FacebookのLikeボックスをレスポンシブ対応(100%)にする方法、HTML5版

FacebookのLike Boxですが、Developerページから、コードを生成すると、Widthと、Heightをピクセルで指定する仕様となっています。

 

通常だと

そのまま使用すると、下記のように、大きい画面では幅が足りなくなり、スマートフォンなどの小さい画面ではLike Boxが切れてしまいます。

 

 

レスポンシブ対応すると

画面サイズに合わせて、幅が変わります。

 

 

 

レスポンシブ対応方法

Like Boxの挿入方法は、「HTML5」、「XFBML」、「IFRAME」、「URL」とありますが、今回は「HTML5」版で、検証しております。

対応方法は簡単で、「HTML5」版で、Like Boxを挿入し、以下のCSSを加えるだけです。

#fb-root {
    display: none;
}

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

 

スタイルを挿入するのみで、対応ができますので、とりあえずは何も考えずに入れておきたいですね。

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。