Facebookのページ・プラグインをレスポンシブ対応（可変）にする

基本的にFacebookのページプラグインは作成する際にプラグインの幅を決めなければいけません。（最小値は180、最大値は500です）空白にしてもデフォルト値である340pxが指定されます。
指定したwidthの値はコードの中にエンベッドで「data-width=""」と記述されているため、Facebookのページ・プラグインをレスポンシブ対応（可変）にするには少し工夫が必要です。

今回はjQueryを使って、サイズが変更する度に読み込み直しその都度最適な幅で表示できるようにします。

まずはFacebookのページプラグインを表示させる為に必要なコードを自分が作った「div」の中に入れます。

HTML

<div id="pageplugin">
<div class="fb-page" data-href="https://www.facebook.com/felica.ta/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/felica.ta/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/felica.ta/">フェリカテクニカルアカデミー</a></blockquote></div>
</div>

上で作ったdivに対して、レイアウト上必要なスタイルを指定する。今回は横幅が最大500pxで親要素がそれ以下の幅になると可変していく仕様です。
CSS

#pageplugin {
margin: 0 auto;
max-width: 500px;
}

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

jQuery

$(function () {
    var windowWidth = $(window).width();
    var htmlStr = $('#pageplugin').html();
    var timer = null;
    $(window).on('resize',function() {
        var resizedWidth = $(window).width();
        if(windowWidth != resizedWidth && resizedWidth < 500) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $('#pageplugin').html(htmlStr);
                window.FB.XFBML.parse();
　　　　　　　　　　　//window.FB.XFBML.parse()で再レンダリングします。
                var windowWidth = $(window).width();
            }, 500);
        }
    });
});