Facebook Page Pluginホームページなどに表示してFacebookページへの「いいね!」を促すソーシャルプラグイン「Like Box」ですが、このLike Boxは現在deprecated(非推奨)とされており、2015年6月23日にサービスが終了します。これに代わるFacebookプラグインとして新たに、「Page Plugin」が提供されています。
ここではLike BoxからPage Pluginへの移行で、何が変わるのか、何に注意すればよいのかを見てみましょう。

目次:

  1. Like Boxをそのままにしておくとどうなる?
  2. Page Pluginへ手動で差し替える方法は?
  3. その他の非推奨Facebookプラグイン

1. Like Boxをそのままにしておくとどうなる?

サービスの提供が終了する6月23日以降もLike Boxのコードをそのままにしておいた場合はどうなるのでしょうか?
FacebookデベロッパーのLike Boxページを表示すると、現在は以下のメッセージが表示されています。

これを見ると、もしLike Boxのコードを使用し続けている場合も6月23日からは自動的にPage Pluginに切り替わるようですので、該当部分がいきなり非表示になったりする訳ではなさそうです。

6/23追記:Like Boxのコードのままでも、自動的にPage Pluginに切り替わることを確認しました。カバー写真無しのPage Pluginに変更されるので、見た目もLike Boxのときとほぼ変わらず、違和感がありません。

ただ、非推奨となったFacebookプラグインのコードがいつまでサポートされるのかはわかりませんので、あらかじめ手動で差し替えておくのが良いかもしれません。

2. Page Pluginへ手動で差し替える方法は?

Like BoxからPage Pluginへの差し替えは以下の手順で行えます。

  1. Facebook Page Pluginのページへアクセスする
  2. 各項目の設定を行う
  3. 出力されたコードをサイトに貼り付ける

まず、Facebookデベロッパー「Page Plugin」のページへアクセスします。

Page Plugin 設定画面

設定項目:

  1. Facebook Page URL
  2. Width
  3. Height
  4. Adapt to plugin container width
  5. Show Friend’s Faces
  6. Use Small Header
  7. Hide Cover Photo
  8. Show Page Posts

1. Facebook Page URL

表示したいFacebookページのURLを入力します。

2. Width

Page Pluginを表示する幅のピクセル数を180〜500で入力します。
何も入力しない場合は自動的にデフォルトの340pxで表示されます。
なお、以前は設定可能な数値が「280〜500」となっていたこともありましたが、仕様が変更され、表示幅の自由度が広がりました。

3. Height

Pgae Pluginを表示する高さをピクセル数で入力します。
以前は設定可能な最小値が130となっていましたが、現在は70〜で設定可能です。高さを制限する理由がなければ、何も入力しなくても問題ありません。

4. Adapt to plugin container width

ページが読み込まれた際に、自動的にPage Pluginがある親要素の幅いっぱい(最大幅は「width」で設定された値)で表示されます。
レスポンシブWebデザインの場合は、ここにチェックを入れて「width」に「500」を入力しておき、親要素のCSSで幅を調整するのがおすすめです

5. Show Friend’s Faces

今までFacebookページに「いいね!」をしてくれたユーザーのプロフィール画像が表示されます。

6. Use Small Header

ヘッダーのカバー画像の高さが約半分ほどになり、シェアボタンも非表示となります。

7. Hide Cover Photo

カバー写真を非表示にし、シンプルな白背景となります。
見た目は今までのLike Boxと近いかもしれません。

8. Show Page Posts

Facebookページの投稿のタイムラインが表示されます。


各設定が終わりましたら、左下の「Get Code」ボタンをクリックします。

Page Pluginのコード取得画面

上記のようにダイアログが表示されますので、発行されたコードのうち、1のほうをBODYタグの開始直後、2のほうをPage Pluginを表示させたい箇所に貼り付けます。

3. その他の非推奨Facebookプラグイン

現在、非推奨とされているFacebookプラグインは他にも「Activity Feed」「Recommendations Feed」「Facepile」「Registration Plugin」「Shared Activity」等があります。もしこれらを設置しているサイトがある場合は、合わせてチェックしておいたほうが良さそうです。

※作成から2年前(909日経過)の記事です。内容が古い可能性があります。
東京都東日本橋の株式会社プレスマンPRESSMAN*Tech