以前に「Facebook貼付をレスポンシブに」の記事を書きましたが、この時は Like Box を使用していました。2015年6月に Like Box は廃止され、 page plugin に移行しましたので、今回はこれを使います。
使い方はとても簡単です。 page plugin のページを開き、FacebookページのURLを入力し、「コード」をクリックします。幅は180～500pxの間でしか設定できないようで、未入力では340pxがデフォルトになるようです。
コードは Javascript か iFrame が選択できます。こちらは iFrame 版。
こちらが Javascript 版。「Step 2」のコードを<body>直下に置き、「ステップ 2」のコードを表示位置へ貼り付けます。英文そのままと日本語訳とがごっちゃになってます。
レスポンシブ対応についてですが、コード取得時に入力した横幅は「最大幅」で、実際の表示時には親ボックスの幅に追従します。最大幅は500ピクセルに制限されますので親ボックスがそれより大きければ隙間ができますが、親ボックスが小さければ自動的に縮小されます。ということはコード取得時には「500px」にしておけば良いわけです。
レスポンシブ対応していると言えなくもないのですが問題もあります。公式ページにも明記されていますが動的なサイズ変更には対応していないのです。ページをロードした時にはきっちりと収まるのですが、その時のサイズに固定され、その後のウィンドウサイズ変更には追従しないのです。この仕様で問題が出そうなのはスマホで回転させたときです。
完全なレスポンシブ対応させるには回転（ウィンドウサイズ変更）させた後にリロードすれば良いので、その動作を自動化します。
例として以下のように Javascript 版のコードを親ボックスfb-pluginで囲んだ場合を示します。
<div id="fb-plugin">
…ステップ3のコード…
</div>
Javascript（jQuery）のスクリプト・コードを挿入します。
<script type="text/javascript">
$(window).load(function () {
var htmlStr = $('#fb-plugin').html();
var timer = false;
$(window).resize(function () {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
$('#fb-plugin').html(htmlStr);
window.FB.XFBML.parse();
}, 200);
});
});
</script>
「window.FB.XFBML.parse();」がリロードです。resizeした時にリロードを実行しているだけの簡単なスクリプトですが、負荷を下げるために200msの間隔を空けています。ステップ3のコードを一旦読み込んでそのまま書き出しているのは、そうしないとリロードがうまく動かないからです。
本来はcssだけでレスポンシブを実現するのがスマートな方法です。上記のスクリプトはresizeを使用していますが、resizeイベントは思いもよらないところで発生するので本当は使いたくないです。対応をスマホの回転のみに絞ってorientationchangeイベントでリロードさせた方が良いかもしれません。
0 件のコメント:
コメントを投稿