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

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

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

<div id=&quot;facebookWrap&quot;>
    <div class=&quot;fb-page&quot; data-href=&quot;https://www.facebook.com/itjoshi/&quot; data-tabs=&quot;timeline&quot; data-width=&quot;500&quot; data-height=&quot;300&quot; data-small-header=&quot;true&quot; data-adapt-container-width=&quot;true&quot; data-hide-cover=&quot;true&quot; data-show-facepile=&quot;true&quot;><blockquote cite=&quot;https://www.facebook.com/itjoshi/&quot; class=&quot;fb-xfbml-parse-ignore&quot;><a href=&quot;https://www.facebook.com/itjoshi/&quot;>IT女子のお気に入りフォルダ</a></blockquote></div>
</div>

<div id=&quot;fb-root&quot;></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 = &quot;//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=***************&quot;;
    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>