IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

facebookのページプラグインをレスポンシブ対応する方法(横幅可変に対応)

facebookのページプラグインはレスポンシブ対応されていて、横幅500pxを指定して取得したコードでも親BOXがそれより小さければ親BOXに合わせて小さく表示されます。(横幅180px〜500pxという制限はありますが・・・)
しかしながら、ページが読み込まれた時のサイズで固定されるため、表示された後にウィンドウ幅が変わってもリサイズされません。例えば、スマホを縦向きで見ていて、横向きに変えても一度表示されたfacebookのページプラグインは縦向きに合わせられた小さい表示のままということです。
ということは、逆に横向きから縦向きに変えると、はみ出ちゃう。これでは困るのでその対応方法のメモです。

ちなみに、facebookのページプラグインは以下のfacebook for developersでコード取得できます。
facebook for developers

「ウィンドウサイズが変更されたら再描画する」という方法で対応したいと思います。
setTimeoutでチラつきをなくすようにできています。

<div id="facebookWrap">
    <div class="fb-page" data-href="https://www.facebook.com/itjoshi/" data-tabs="timeline" data-width="500" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true"><blockquote cite="https://www.facebook.com/itjoshi/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/itjoshi/">IT女子のお気に入りフォルダ</a></blockquote></div>
</div>
<div id="fb-root"></div>
<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&appId=***************";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  var timer = false;
  $(window).resize(function() {
      if (timer !== false) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        boxWidth=$('#facebookWrap').width();
        currentWidth=$('#facebookWrap .fb-page').attr('data-width');
        if(boxWidth != currentWidth){
          $('#facebookWrap .fb-page').attr('data-width', boxWidth);
          FB.XFBML.parse(document.getElementById('pagePlugin'));
        }
      }, 200);
  });
</script>