レスポンシブWebデザインにも使える。Facebookの「LikeButton（いいね！ボタン）」「LikeBox」を可変幅に対応する方法

FacebookのLikeButton（いいね！ボタン）と、FacebookページのLikeBoxをウィンドウ幅に合わせて可変する方法です。お客さんのWebサイトで使うことがあったのでメモしました。

LikeButton（いいね！ボタン）

表示サンプル

こちら（https://developers.facebook.com/docs/plugins/like-button/）からhtml5版で作成します。

html

<div class="fb-like" data-send="false" data-show-faces="false"></div>

css

.fb-like,.fb-like span,.fb-like iframe{
 width:100% !important;
}

LikeBox

表示サンプル

こちら（https://developers.facebook.com/docs/plugins/like-box-for-pages/）からhtml5版で作成します。

html

<div class="fb-like-box" data-href="http://www.facebook.com/FacebookDevelopers" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="true"></div>

css

.fb-like-box,.fb-like-box span,.fb-like-box iframe{
 width:100% !important;
}

LikeButton（いいね！ボタン）、LikeBoxまとめて指定する

それぞれ個別に設定しましたが、どちらもサイトに設置している場合は、ひとまとめにするとすっきりしますね。

cssはまとめる

.fb-like,.fb-like span,.fb-like iframe,
.fb-like-box,.fb-like-box span,.fb-like-box iframe{
 width:100% !important;
}

以上で可変幅に対応できました～。cssのスタイルを優先して適用させる「!important」を使いましたが、他にも方法あるのかな。上記の方法以外に情報を見つけられませんでしたので、ひとまずこの方法で対応しています。