CROR

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

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

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

HTML5版

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

likebox01

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

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

iFrame版

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

likebox02

likebox03

コメントを残す

Return Top