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&width=302&colorscheme=light&show_faces=true&stream=false&header=false&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を押していっていただけると幸いです(;´-`)