page plugin（facebook埋め込み）をレスポンシブ対応する

 

まずは通常の手順通りコードを埋め込む

下記のように埋め込みたい場所（ここでは＜div id=”pageplugin”＞ボックス内）に取得したコードを埋め込みます。（javascriptのコードは省略）

<div id="pageplugin">
    <div class="fb-page" data-href=“xxxxxx” data-width="500px" data-height="600" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="true">
        <div class="fb-xfbml-parse-ignore "><blockquote cite="http://www.facebook.com/xxxxxxxx”><a href="http://www.facebook.com/xxxxxxxx”>xxxxxxx</a></blockquote></div>
    </div>
</div>

ここでdata-widthはmax値である500pxを指定しておきます。親ボックスのpagepluginの幅は100%にしておく。

 

jqueryのコードを追加

下記のコードを追加する

<script type="text/javascript">
    $(window).load(function () {
        var htmlStr = $('#pageplugin').html();
        var timer = false;
        $(window).resize(function () {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                $('#pageplugin').html(htmlStr);
                window.FB.XFBML.parse();
            }, 200);
        });
    });
</script>

ウィンドウのサイズが変わるたびにwindow.FB.XFBML.parse()で再読み込みしています。$(window).resizeはウィンドウサイズ変更中は呼ばれまくるのでタイマを使って呼ばれる頻度を減らします。

window.FB.XFBML.parse();だけで良さそうですがどうやら親ボックスの幅がよまれないようなのでボックスから書き換えます。

これで完了。

 

注意事項

ie8で動作確認したところ$(window).resizeが繰り返し読まれ続ける現象が発生。無限リロード問題という既知の問題っぽい。対応面倒なので<!–[if !(lte IE 8)]><!–>で囲ってie9以上とその他のブラウザでのダイナミックなレスポンシブ対応とすることにしよ。

 

 - その他Tips

  関連記事