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%表示になります。
1 2 3 4 5 6 |
.fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fb_iframe_widget span{ width: 100% !important; } |
コメント欄も使いたい場合は下記になります。
1 2 3 4 5 6 7 8 |
.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% を入力することで可変します。
コメントを残す