野良メモ -noramemo-noramemo

京都市山科区のフリーランスwebデザイナーのブログです。

[:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう

この記事は2015年4月22日に書かれたもので、内容が古い可能性がありますのでご注意ください。

[:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう

Facebookプラグインの「 Like Box 」が廃止されるということで、新たに「 Page Plugin 」を設定してみました。

こんにちは!noramemoです。
WebサイトにFacebookページの投稿内容が表示されるように設定している方も多いと思いますが、この度2015年6月にFacebookプラグインの「 Like Box 」が廃止されることになりました。
Facebook側で自動的に新しいプラグインに書き換えてくれたらなんとも楽なんですが、そうも言ってられないので簡単に設定のメモをしておきます。

  • [:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう
    また仕様変わってるううううう!

Page Plugin(Facebook)の設定方法

設定自体は簡単です。
Facebook Developers / Page Plugin にアクセスして以下の項目を入力します。

・Facebook Page URL … FacebookページのURL
・Width … Page Plugin の横幅
・Height … Page Plugin の縦幅
・Show Friend's Faces … 「いいね」を押した友達のプロフィール写真を表示/非表示
・Hide Cover Photo … カバー画像の表示/非表示
・Show Page Posts … 投稿内容の表示/非表示

項目の数が変わっていますが、基本は「Like Box」の時と同じですね。
入力し終えたらコードを出力して、ご自身のページに貼り付けましょう。

  • [:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう
    赤枠内の項目を入力・選択して「GET CODE」ボタンをクリック
  • [:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう
    赤枠内のコードをファイルにペーストして完了です。
    (上段コードはbodyタグ内に、下段のコードは表示したい箇所に設置)
  • [:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう
    出力イメージ
  • [:N]「Like Box」が終了!?新しいFacebookプラグイン「Page Plugin」に切り替えよう
    noramemo-野良メモ- の変更前の表示はこんな感じでした

気付いた点・補足など

最大横幅が500pxに

Like Box 時代はCSSを編集することで横幅のカスタマイズができましたが、最大横幅が500px、最小横幅が280pxになりました。現在は500px以上に設定することができないようです。今後改修して100%表示できるようになると嬉しいです。

「いいね」を押した”自分の友達”が表示される

「いいね」を押した全ユーザの一部が表示されるわけではないので、有名どころ以外では表示される機会は減るかもしれません。

いつの間にか「 iframe 」コード完全終了

「 Like Box 」ではHTML5仕様とiframe仕様のコードが存在しましたが、今回の仕様変更によりiframe用は完全に終了となったようです。もうHTML5が「当たり前」の流れですね。

まとめ

今回自分のブログを再設定しましたが、お仕事で管理している各サイトも切り替えていかないのでたいへんですね。まだまだ切り替え期間はありますが、対応はお早目に:)

以上、noramasaでした!