FacebookのPagePlugin版Like Boxの幅を動的に変える方法

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

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

見た目はこんな感じ。

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以上で発火した場合は再描画やめるとか、もろもろ改良の余地があり、突っ込みどころ満載ですけど、とりあえず動きます。

ああ面倒くさい。。。

FacebookのPagePlugin版Like Boxの幅を動的に変える方法」への6件のフィードバック

  1. 突っ込みどころ満載どころか、Bootstrap環境のWPテンプレに導入して稼働したのは
    pochiさんの記述だけでしたよ>v<b 何試してもダメでJQ記述書いて読み込ませたりすると
    BootstrapのCSSとぶつかるし散々なときにたどり着きました。スマホ端末でレスポンシブした瞬間は
    うはー やっとかぁ><bと叫びましたw 若干iOSとAndroidで左右に振れるんですけど
    Bootstrap側のWidthとpaddingの記述オーバーのせいでしょうからこれには関係なくキニシナイ・。・
    直しは必要でしょうけど、とりあえずレスポンシブしてないと非難轟轟ですもの;。;
    サーバー負荷下げて軽くしたかったFBの意図がここまで影響するとは思いませんでした。
    Google無くなったらホント私は役立たずになってしまうかもしれない・・・
    これからもがんばって下さい>v<b

    1. コメントありがとうございます。
      当時「Facebook側の仕様です!」で逃げずに頑張って調べてよかった!

      padding関係でズレる場合は、ズレを起こすBOX要素の中にpaddingをゼロにしたdiv等を入れてから、その中にPagePluginをぶち込んでやるのが一番手っ取り早い気がしてます。
      ネストが深くなってしまいますけど、一個だけだし、padding計算するの面倒だし、ブラウザで誤差とかでたらイヤだし、何より楽なので。

      FacebookがデフォルトでDynamic Resizingに対応しなかったのは、いまだに納得できないでいます。。。

  2. 一息つけたので、同業者と飲みに行って話した際、自社テンプレ使用じゃない余所から持ってきたテンプレ加工の業者は、みんな苦しんでる様子でしたのでリアル拡散しておきました。
    IOS表示時に320px幅まで引き延ばすのは自分で考えや・。・ みたいな感じで。
    paddind調整でbootstrapのcss見ずらいなぁ;。;と}の後ろに改行入れてサイズ合わせしてよし表示・。・ うぉぉぃまだ動くぞ@@; 構成内容 目を皿にしてみたら あれ、これviewport読んでなくないか?と思い、width=device-widthではなくcontent=width=750 入れたら正常化。 content=width=1024にして「ほらアップルのサイトと一緒ですよ><b」なんてやるとクライアントが頭でお茶沸かしそうなので却下しましたが。
    padding 0 のdivはぉぉ・。・なるほどなぁと勉強になりました。
    FacebookのDynamic Resizing非対応は①上がり続けるサーバ負荷を下げたかった。②担当者が忘れた。③タダのサービスに振り回されるのに疲れた。 なのかなというのが周りの意見です。 ①だと今後の変更はないかもなので、改悪だなぁと考えざるえませんし ②ならVer.変更時にDynamic Resizing対応と告知があるやも。 ③はcomment表示は未だ少々の記述でdata width 100%で表示できるからという根拠らしいです。 「page pluginなんてsidebarでいいじゃんなどと1カラム構成の人敵に回す発想か、Googleのモバフレにたてついてるのか。発想がアップルと同じ概念だともうお手上げですよね。 駄文失礼しました;。; また寄らせて頂きます。 
     

    1. コメントありがとうございます。
      バタバタとしていて遅くなってしまいました。すみません。

      bootstrapもPagePluginも、基本は使わせてもらっている立場なので文句を言えないんですが、苦労させられるとどうしても恨み節が出るのが人情ですよね。
      この「苦労」の部分が飯の種にもなっている側面があるので、なんとも複雑な心境です^^;

      半分愚痴な忘備録ブログですが、少しは人様のお役に立てた感じがして嬉しかったです。
      ありがとうございました。

  3. お久しぶりです。

    FbのPage Pluginがまたあちこちで正常にならなくなってきているようですが

    POCHIさんのまわりはどうですか?

    私もまた悪戦苦闘してますw

    もうやめてって感じです ・。・;

    1. ご無沙汰しております。
      ここ最近はPHPをゴリゴリ書いていてフロント側は他の人におまかせな状態が続いていました。

      ざっとググると投稿埋め込み用scriptがあると全滅するとか、そんときはFBから持ってきたコードを編集して貼りつけないといけないとか、けっこうヒドイ事になってるみたいですね。。。
      くわしくウォッチできていないので、何かあるとヤバイ。。。^ ^;
      Parseを終了させると発表して困らせたりとか、Facebookほんと勘弁して欲しいです。

      今のところ、PagePluginを組み込んだところから文句言われたりとかないですし、私が組み込んだページを少し回ってみましたが、とりあえずちゃんと表示はされているようなので、一段落するまでは何もおこらずにいて欲しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA