facebookページのLike Boxからborderとかを消して無個性にする

borderとかヘッダーとかいらない

ここで作成できる,facebookページのLike Boxですが,デフォルトだと自己主張が強く,置く場所によっては浮いてしまいます.今回はそれをなるべく無個性にする方法を紹介.

今回は300x300でLikeboxを設置するものとします.

デフォルト

ヘッダーを消す

Likebox作成ページのところでheaderのチェックを外すか,iframeのsrc属性のurlでheader=falseにします.

上下左右1pxずつのborderが残りますが,これも消します.

overflow:hiddenとposition:relativeでごにょごにょ

まっしろ!

きえた!

<div id="likebox_wrapper">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHavelog%2F189060244460937&amp;width=302&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=302" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:302px; height:302px;"></iframe>
</div>

ラッパーを300x300にし,Likebox本体のiframeは302x302になるように調整して...

#likebox_wrapper {
    line-height: 0;
    width: 300px;
    height: 300px;
    overflow: hidden;
    position:relative;
}
#likebox_wrapper iframe{
    position:relative;
    left:-1px;
    top: -1px;
}

CSSでtopとleftから-1pxずつずらしてあげることでborderがめだたく消滅.

あとは適当に背景色などでサイトになじませればOK

これで自己主張の強くないLikeboxにすることができました! 自己主張しないってことは,サイト上ではあまり押してもらえなくなるかもしれませんね! やったー・・・.

ぜひLikeを押していっていただけると幸いです(;´-`)


Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search