Facebook Page Plugin を使ってWebサイトにFacebookページを表示させる

以前の記事でも書いたように2015年6月にFacebookのプラグイン機能が大幅に仕様変更してしまい、従来の方法ではWebサイトにFacebookページのデータを表示させる事が出来なくなってしまいました。
これまで多くのwebサイトで使用されていた「Like Box」も2015年6月以降使う事が出来なくなってしまいました。今後は「Page Plugin」というプラグインを「Like Box」の代わりに使っていく事になります。

新しい「Page Plugin」はこんな感じです。

出来る事は以前の「Like box」とほとんど変わりません。若干設置方法が変わりましたがFeedの取得などに比べると、トークンを発行する必要も無くシンプルで非常に簡単です。

まず、Facebookにログインし、「page-plugin」のコードを取得するため
https://developers.facebook.com/docs/plugins/page-pluginに行きます。

「Facebook Page URL」の中に制作するWebサイト内に表示させたいFacebookページのURLを挿入し、Webサイト上で表示される「page-plugin」の幅や高さ、表示させる情報の種類などのオプションを設定します。

プレビューを見ながら確認し、OKなら左下の「Get Code」を押します。（幅は280～500pxの間で、高さは、130px未満には設定できません。表示オプションはHTML側でもコントロール出来ます）

「Get Code」ボタンを押すと、以下のようなポップアップ画面が出てくるので、その中にある2種類のコードをHTMLファイルにコピー＆ペーストします。

上の①コードは、サイト内のタグ内で1度だけ呼び出せばOKです。「page-plugin」パーツを1ページ内に何度でも呼び出す場合でも、1回だけ記入してあればOKです。

下の②コードは、「page-plugin」パーツを表示させたい部分にタグを貼り付けます。複数の「page-plugin」パーツを表示させたい時はその分の数のコードを貼る必要があります。

以上で終わりです。
「page-plugin」パーツを表示させるだけならプログラムの知識もいらず、面倒くさいトークンの取得なども必要ないので非常に簡単に出来ます。しかし所詮はプラグインなので、細かいデザイン部分を自分で決めたい場合はやはり前回の記事のようにJSON形式のデータを取得し、「.getJSON」メソッドで表示させる必要があります。ただしこの場合jQueryやJavaScriptの知識がある程度必要になり、定期的なサイトのメンテナンスも必須となってしまうので、両方のメリット・デメリットをしっかりを見極めた上でどちらを使うか選びましょう。

「Page Plugin」を使う場合のメリット

• とにかく設置が簡単
• Facebook側の仕様が変わるまで、メンテナンスフリー

「Page Plugin」のデメリット

• プラグインの読み込みに時間がかかる
• デザイン的な自由度が無い
• Facebook側で発信されたデータはプラグインを通して表示されているので、Googleのクローラーが認識しづらい。

JSON形式のデータを使う場合のメリット

• テキストデータで出力される為、Googleのクローラーが認識しやすくなる。
• テキストデータなのでCSSで自由に修飾が出来る。
• 「Page Plugin」を使わない事でページの表示を早くする事が出来る。

JSON形式のデータを使う場合のデメリット

• 設置するのにjQueryやJavaScriptの知識がある程度必要。
• 定期的にサイトのメンテナンスが必要。

前回書いた「Facebookページのフィード情報を取得する方法」

yachin29.hatenablog.com

※「Page Plugin」の表示を確認するには実際にサーバーにデータをアップするか、XAMPPなどの仮想サーバーで確認する必要があります。www.apachefriends.org