facebook Page Plugin [js]

2016/07に公開

facebook Page Pluginを埋め込む方法です（Like Boxは終了しました）。
基本、コードをコピペするだけで設置できます。

sample

基本的には提供元サイトにFacebookページのURLなどを入力する箇所があるので、適当に入力・選択して、「コードを取得」で表示されるコードを適切にコピペするだけで設置できます。

ご自分で設置するときはローカル環境では表示しないので、サーバにアップして確認してください。

IE7以前のブラウザはには（FB側が）対応していません。IE8は表示していますが、いつまでサポートされるかわかりません（2016/08現在）。

JavaScript SDK

<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.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

FBのソーシャルプラグインを利用する際のお約束的コードです。（できるだけ）bodyタグの開始タグ直後に記述してください。この記述は同一ページにひとつあれば十分です（たとえばページプラグインの他に、同一ページにFBのいいねボタンやシェアボタンを設置していたとしても、この記述はひとつあれば良いです）。

（多分）このコードが大きく変更されることは稀かと思われますが、6行目最後の方のversion=v2.7は数字部分がわりと頻繁に変更される可能性が高いかもなので、ボタンが表示されなくなったら、まず提供元サイトでこの部分の変更がないか確認すると良いかも？

html

<div class="fb-page" data-href="表示したいFBページのURL" data-tabs="timelineなど" data-width="幅180〜500px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="表示したいFBページのURL" class="fb-xfbml-parse-ignore"><a href="表示したいFBページのURL">Facebook</a></blockquote></div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

JavaScript SDKが記述済みならば、このclass[fb-page]のdivタグをまるっと表示したいところに貼り付けると、Page Pluginが表示されます。

  • facebookページがすでにあることがで前提です。個人ページではPage Pluginを利用できません（参考：初心者向け｜Facebookページと個人ページとグループの違い － インファクトスタッフ　WEBマーケティングブログ）。
  • data-tabsでタイムラインを表示させたりイベントを表示させたりできます（複数をタブ表示できます）。ここを未入力にすれば、ヘッダー以外表示されません。いまのところ、設定できるのはtimeline、events、messagesの３種類なのかな？提供元サイトでは「など」と表現しているので、その他のものも表示できるようになるのかもしれません。
  • 「plugin containerの幅に合わせる」を選択すると、（180〜500pxの幅の範囲で）可変対応になります。その他のオプションについても提供元サイトに説明があります。
  • JavaScript SDKが設置できない環境の場合（ブログなど？）、iframe版も用意されています。「コードを取得」で表示されるオーバーレイに「IFrame」のタブがあるので、そちらでコードをコピペしてください。iframe版はJavaScript SDKが不要です。

css

特にcssを設定する必要はないのですが、スマートデバイスなどで幅を可変対応にしたいとき（「plugin containerの幅に合わせる」にチェックを入れた場合）は、直の親タグにpadding（もしかしたらmarginも）を設定しない方が綺麗に表示するかもしれません。横スクロールが出るとか、そういうときは親タグの左右のpaddingを外してみてください。

ちなみに2016/07現在では親タグにtext-align: center;を設定するとPage Pluginが中央表示になります。

js

jsの追加は特に必要ないのですが、このサンプルではスマートデバイスで見られることも意識して、端末が回転した（ユーザーが端末を持つ向きが縦/横変化した）ときのためにコードを追加しています。

提供元サイトで設定する際に「plugin containerの幅に合わせる」を選択しておけば、幅を指定していたとしても、親タグの幅に合わせるようになっています（たとえば最大幅の500pxを指定していても、これを選択しておくと親タグの幅が200pxならそれに合わせてくれます・・・ただし最小幅は180px）。

しかし、たとえばスマートデバイスではFBページプラグインを幅いっぱい（とはいえ最大500pxなので端末によってはいっぱいにならないですが）に表示するように親タグの幅をautoとか100%とかにしていたとして、縦持ちから横向きに回転させたとき、そのままでは縦持ちのときの幅のままになってしまいます。
縦→横ならさほど問題ではないと思いますが、横→縦に回転させたとき、表示されない部分が出てきます。

というわけで、スマートデバイスを回転させた際に、再読み込みするようにしてみました。
この場合、縦か横かを検知する必要はなく、回転したことさえ分かれば良いので、ウィンドウリサイズを検知するようにしています。

これはあくまで例であって、そもそも回転しようがなんだろうが最小幅（180px）に固定しておけばこのような差異は気にならないので、そのようにしても良いわけです。
瑣末な問題と無視しても良いですし、他に良い方法があれば、うまく工夫してみてください。

$(function() {
    var htmlStr = $('#pageplugin').html();
    var timer = false;

    $(window).on('resize', function(){
        if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            $('#pageplugin').html(htmlStr); //親タグの幅を検知しないらしいので、親ごと再読み込み
            window.FB.XFBML.parse(); //プラグインの再読み込み
        }, 200);
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上記のhtmlコードにはfacebook Page Pluginに親タグを記述していませんが、この処理をしたい場合は親タグにid[pageplugin]（id名は任意。このjqueryを適用できるようにセレクターとして指定）を付与してください。

この処理を追加すると、古いIEでは再読み込みを繰り返してしまうことがあるようなので、そのような現象があった場合は、Modernizrなどをつかって、この処理を適用させないようにするなど対処してください。

戻る

Top