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

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

• Like Box - Facebook Developers

ここで作成できる，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を押していっていただけると幸いです(；´-`)

---