facebookのいいねボックスのwidthを100%にする方法

レスポンシブルに対応していないfacebookのウィジェット挿入もこれで楽々

最近の案件でたまたまあったのが、px指定じゃなくて100%で表示させたい場合。

通常はfacebookのDeveloperページから、コードを生成すると、Widthと、Heightをピクセルで指定する仕様となっていますが、
それだとpx指定しか通常で出来ません。

 

[browser-shot url=”http://developers.facebook.com/docs/plugins/like-box-for-pages” alt=”” target=”_blank”]

 

 

対応方法は簡単で、以下のCSSをコピペするだけです。

#fb-root {
    display: none;
}
 
.fb_iframe_widget, .fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

ちなみにLike Boxの挿入方法は、「HTML5」、「XFBML」、「IFRAME」、「URL」とありますが、今回は「HTML5」版でしか試しておりませんので、あしからず。