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%表示になります。

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

iFrame版

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

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください