気ままにWeb

情報をウォッチしていなかった私が悪いんですが、廃止告知から廃止まで3ヶ月って酷くないですかFacebookさん。
それとも、もっと前に告知ありました？？

Facebook謹製LikeBoxが廃止となり、あたらしくPage Pluginを使えということになりました。
↓ココから取得できます。
https://developers.facebook.com/docs/plugins/page-plugin

見た目はこんな感じ。

横幅は180px〜500px（500pxって狭くない？）、レスポンシブに対応していて、500pxとか指定して取得したコードでも、親BOXのサイズに合わせて小さくなってくれます。

なーんだレスポンシブ対応してるやないすか、よしよしと思って油断していると上記ページの「Adaptive Width」欄にある

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load
It will not react changes to the box model after page load.

If you want to adjust the plugin’s width on window resize, you manually need to rerender the plugin.

このテキストに足元をすくわれるわけです。

つまり、ページが読み込まれた時のサイズ固定で、その後にページ幅が変化した場合はリサイズされないって事であります。
よくあるケースだと、スマホやタブレットで縦で読んでて、横向けにしたとかいうヤツです。
このLikeBoxさん、縦向きサイズのままでその場に居座り続けるんですよ。

縦→横の場合だったら、小さいLikeBoxが居座っていて可愛いなーコイツ。で済むかもしれませんが、横→縦の場合、右側がばっつり切れてしまうんですよ。
シャレになりません。

一応Facebookさん解決法を提示してくれてます。
さっきのテキストのこの部分

If you want to adjust the plugin’s width on window resize, you manually need to rerender the plugin.

「ウィンドウサイズが変更された後、手動で再描画してねよろしく！」

気軽に言ってくれるやないすか。
再描画ってどないするんですか。

悩める底辺エンジニア、さっそくググったらありました。
YUHIISK様 ツイートボタンとかいいねボタンの再読み込み

ふむふむ。最初にFacebookのJavascriptSDKを読み込んどけば

FB.XFBML.parse();

でいけるらしい。

これをウィンドウサイズが変更されたら実行すればいいのか。
ただ、気をつけないといけないのは、ウィンドウ幅をぐいーんと縮めたり伸ばしたりしてるときって、risizeイベント発火しまくってるので、何も考えずに実装しちゃうと、尋常じゃない回数の再描画が実行されてしまいます。
ブラウザの動きが鈍くなってリサイズできんようになって固まります。（経験者談）

またググる。
CreativeStyle様 [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する

google先生がいなかったら何もできなくなるんだろうな。。。。

よっしゃー！これで、ウィンドウリサイズが終わったら再描画コマンド実行すりゃOK楽勝！って

var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
FB.XFBML.parse();
}, 200);
});

と書いたら甘かった。。。

再描画はかかりるのに、幅が変化しない。。。（iOSとAndroidでは大丈夫だったかもしれないです。再検証できてません。すみません。）
どうやら原因は
div class=”fb-page” ….
内にある
data-width=”xxx”
のところ。

初期のページロードがかかった際は、この値は親ボックスによって無視されますが、FB.XFBML.parse();の時は無視してくれないようで。。。
超面倒くさいですが、親ボックスの幅を拾って、data-widthの値を書き換えることに。

で出来上がったサンプルがこちら。

Facebook PagePlugIn
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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.4&appId=xxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
  var timer = false;
  $(window).resize(function() {
      if (timer !== false) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        boxWidth=$('#pagePlugin').width();
        currentWidth=$('#pagePlugin .fb-page').attr('data-width');
        if(boxWidth != currentWidth){
          $('#pagePlugin .fb-page').attr('data-width', boxWidth);
          FB.XFBML.parse(document.getElementById('pagePlugin'));
        }
      }, 200);
  });
</script>
<div id="pagePlugin">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>

14行目の「appId=xxxxxxxxxxxx」のところは任意に変更して下さい。ちゃんとしたappId入れないと動きません。

元のdata-widthの値が500で、親ボックスが500px以上で発火した場合は再描画やめるとか、もろもろ改良の余地があり、突っ込みどころ満載ですけど、とりあえず動きます。

ああ面倒くさい。。。