facebookの読み込みタグをレスポンシブに対応させる

参考サイトを元に指定した一例

■html

<script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
      <div class="boxFacebook"></div>

■js

    //facebook読み込み
    // ページプラグインの埋め込みコードを返す。
    function pagePluginCode(w) {
        // 幅に応じて高さを変更する場合
        if(w > 400) {
            var h = 300;
        } else {
            var h = 200;
        }
        return '<div class="fb-page" data-href="https://www.facebook.com/*****" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/aeon.ryukyu1975"><a href="https://www.facebook.com/*****">ダミーサイト名</a></blockquote></div></div>';
    }

    // ページプラグインを追加する要素
    var facebookWrap = $('.boxFacebook');
    var fbBeforeWidth = ''; // 前回変更したときの幅
    var fbWidth = facebookWrap.width(); // 今回変更する幅
    var fbTimer = false;
    $(window).on('load resize', function() {
        if (fbTimer !== false) {
            clearTimeout(fbTimer);
        }
        fbTimer = setTimeout(function() {
            fbWidth = facebookWrap.width(); // 変更後の幅を取得
            // 前回の幅から変更があった場合のみ処理
            // スマホだとスクロール時にリサイズが発生することがあるため
            if(fbWidth != fbBeforeWidth) {
                facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
                window.FB.XFBML.parse(); // ページプラグインの再読み込み
                fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
            }
        }, 200);
    });

■css

.boxFacebook{
  width: 48%;
  max-width: 485px;
}

.boxFacebook > .fb-page {
    width: 100%;
}
.boxFacebook > .fb-page > span,
.boxFacebook iframe {
    width: 100% !important;
}

参考サイト

cly7796.net

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

http://cly7796.net/wp/javascript/the-corresponding-embedding-of-facebook-to-responsive/