FacebookのLikeBoxをレスポンシブ化する

Facebookプラグインは、開発者ページから簡単にコードを生成できますが、
そのままでは、レスポンシブサイトなどの可変には対応されていません。

https://developers.facebook.com/docs/plugins/like-box-for-pages
https://developers.facebook.com/docs/plugins/comments

HTML5版

HTML5版を使う場合は、関連するクラスを全て100％にすれば、レスポンシブ可能になります。
クラスについては、DOMを確認してみてください。

CSSに下記を追加することで、可変する100％表示になります。

.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}

コメント欄も使いたい場合は下記になります。

.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}

iFrame版

iFrame版を使う場合には、「Width」という項目に 100% を入力することで可変します。