Mofu

飛べないエビは美味しいエビフライ。

埋め込んだfacebookがレスポンシブ対応してくれない???

気まぐれで中学生ぐらいの頃に作ったサイトとか探してて(もう消えてた)その当時知り合いだった人がまだサイト更新してたらりして興奮したおんたです。

リセット癖?みたいなのがあってtwitter初めても好きなアニメやらジャンル変わるごとにアカウント引っ越ししてました。名前も変わったり。

もう9年ほど前にtwitter始めたんですけど当時からの知り合いはまだいるんですかね?

たまに思います。

 

twitter大好きでfacebookとかあまり触らないんですが、サイト埋め込みの時には戦わなきゃですね。

全く気にしてなかったんですが、あの埋め込みfacebook側で500px以上で使用できません。(なんで?)

そしてどうやら生成されたコードを貼り付けるだけではリアルタイムに幅が変更されず手動のリロードが必要みたいで。

今回は幅を変更したら自動リロードするようにします。(描写に遅延が出ます、残念。)

レスポンシブ対応できるとあっても設定は個人でよろしくって感じだったのでメモ書きです。

facebookの埋め込みレスポンシブ

 まずはコードの取得

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

 高さ・幅を入力し、「plugin containerの幅に合わせる」にチェックを入れておきます。

そして「コードの取得」をクリック。

ポップアップで生成されたコードが出てきます。

タブがありますが、今回は「javascript SDK」参考です。

 

【HTML】

<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=akane.kondo.5015";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!— /取得したコード① —>

<div id="box">
    <!-- 取得してきたコード② -->
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
    <!-- 取得してきたコード② -->
</div>
<style>
    .fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget iframe[style]{
        width: 0;
    }
    #box {
        /*親要素のサイズ指定 500pxまで*/
        max-width: 500px;
    }
</style>
    
<script>
//親要素名#box 変更するう場合は
  var timer = false;
  $(window).resize(function() {
      if (timer !== false) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        boxWidth=$('#box').width();
        currentWidth=$('#box .fb-page').attr('data-width');
        if(boxWidth != currentWidth){
          $('#box .fb-page').attr('data-width', boxWidth);//boxWidthは触らない
          FB.XFBML.parse(document.getElementById('box'));
        }
      }, 200);
  });
</script>

※htmlにcssとjsまとめてます。

取得してきたコード②

を囲んでいるのが親要素になります。
ここでは「id="box"」ですが、変更する場合はcssやjs側の訂正もお忘れなく。
下から6行目最後の

('data-width', boxWidth);

この「boxWidth」は触らぬように。

変更の場合は

boxWidth

の修正漏れ注意です。

ざざざっとこんな具合でレスポンシブ幅が調節できるようになりました。(500px以上広げられないけど)
あまりsnsの埋め込みはしていなかったので実は知らなかったですこんなこと。
何とか横幅100%対応して欲しいですね。