APS Weblog blog
Facebook Like Box が終了。Page Plugin に［お役立ち情報］
FacebookのLike Boxの提供が2015年6月23日で終了し、Page Pluginというものに変わるようですね。
この記事を投稿した時点では、もうLike Boxは使えず、Page Pluginでの作成になるようです。
ちなみにLike Boxとは、ホームページにFacebookページの投稿や「いいね！」してくれた人を表示させる機能です。
↓こういうのですね。
ということで、廃止まで少し間がありますが、せっかくなので早めに移行してみました。
Facebook Page Pluginの移行手順
- まずはPage Pluginの作成ページにアクセス。
Facebook Page Plugin：https://developers.facebook.com/docs/plugins/page-plugin - “Facebook Page URL”の欄にFacebookページのURLを、“Width”には幅を、“Height”には高さを入力し、お好みで“Hide Cover Photo” “Show Friend’s Faces” “Show Page Posts”の項目にチェックを入れて［Get Code］をクリックします。
各項目の内容は以下の通り。
- URL
FacebookページのURL - Width
Page Pluginの幅 - Height
Page Pluginの高さ - Hide Cover Photo
ページプラグインにカバー写真を表示させるか否か
チェック有：表示しない／チェック無し：表示する - Show Friend’s Faces
Facebookページに「いいね！」してくれている人の顔写真を表示させるか否か
チェック有：表示する／チェック無し：表示しない - Show Page Posts
Facebookページの投稿記事を表示させるか否か
チェック有：表示する／チェック無し：表示しない
- URL
- 1の <div id="fb-root">… を、表示させたいWebサイトの<body>（開始タグ）の直後に貼り付けます。
次に2の<div class="fb-page"…を、表示させたい場所に貼り付けます。
（Likeboxを使っていた人は現在のものと差し替えてください。）
- Page Pluginのものに差し替わります。
Likeboxからの変更点
【メリット】そのまま設定しても自動でレスポンシブに対応
Likeboxのときは、最初に設定した幅（width）で固定されて表示するため、レスポンシブに対応させるにはCSSで幅をカスタマイズ必要がありましたが、Page Pluginでは、CSS無しでも自動で幅を調整してくれるようになりました。
【メリット】カバー写真を表示できるようになった
Facebookページで設定しているカバー写真を、Page Plugin上でも表示できるようになりました。
【メリット】［シェア］ボタンがついた
【デメリット】設定できる幅が有限になった
一番残念なところはここですね。設定できる幅（width）が有限になりました。
前項の通り、LikeboxのときはCSSで設定すれば幅を自由に設定できましたが、Page Pluginでは設定できる幅が280px～500pxになりました。
ちなみにiframeの中で幅が計算されているために、今までのようにCSSで幅を設定することは出来ませんでした…。（2015年4月現在）
幅280px～500pxというかなり微妙な数値なので、設置する場所が限定されますね。かなり困ります…。
【デメリット？】「いいね！」してくれている人の顔写真が小さくなり、表示数が減った
設定できる幅が280px～500pxってかなり中途半端ですよね。サイドに置くには少し大きいけど、メインに置くにはちょっと小さい…。
いままでwidth:100%とかで、幅いっぱいに表示させてたサイトは困りますよね…。
Facebookさんの今後の改善に期待です。
