Facebookプラグイン LikeBoxをPagePluginに変更する

スポンサーリンク

facebook いいね!

Facebookプラグイン LikeBox は6月23日以降使えなくなるので、代わりに提供されるプラグイン「PagePlugin」に変更してみました。

コードの作成と貼り付けはLikeBoxの時と同じで、機能も特に変わった点はありません。

Facebookプラグイン LikeBoxは6月23日で終了

ウェブサイトやブログにコードを埋め込んで、自分のFacebookページを表示させることができるFacebookプラグイン LikeBox が6月23日以降使えなくなります。

Facebookデベロッパー内の Facebook Like Box ページには、6月23日以降は使えなくなるとの記載があります。

Facebook LikeBox 利用停止

こちらが該当の記載です。相変わらずFacebookデベロッパーは英語表記しかありませんねぇ・・・

If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.

新しいFacebookプラグイン PagePlugin

LikeBoxの代わりに新しく登場したプラグインが PagePlugin です。機能は以前のLikeBoxと同様で、頭にはFacebook名とボタン類、その下に自分の投稿と「いいね!」してくれた人数が表示されます。

ちなみに、左側が以前のLikeboxで、右側が新しいPagePluginです。少しデザインが変わりましたね。カバー画像があればPagePluginの上部に表示されます。いわしのFacebookページには設定してないので、何も表示されません。

Facebookプラグイン LikeBoxとPagePlugin

Facebookプラグイン PagePlugin コードの作成

では、PagePluginをウェブサイトやブログに設置してみましょう。まずはFacebookデベロッパー内にある Page Plugin でコードを作成します。

facebook pageplugin

下にコードジェネレータがあるので、自分のFacebookページのURLを入力してください。あとはこのままでOKです。これで「Get Code」をクリックすれば、PagePluginのコードが取得できます。

Facebook コードジェネレーター

もう少し細かく設定したいという方は、こちらを参考にしてください。PagePluginは設定を変更すると、その場でプレビューが見られるので便利ですよ。

Facebook PagePlugin設定

● Facebook Page URL
自分のfacebookページURLをそのまま貼り付けます。

● Width
PagePluginの横幅です。最小は180、最大は500となっていますが、空白でも問題ありません。表示領域に合わせて伸縮するので、レスポンシブ対応は不要です。

● Height
PagePluginの縦幅で、最小は130までとなっています。こちらも空白でOKです。

● Show Friend’s Faces
「いいね!」してくれた人を表示します。

● Hide Cover Photo
カバー画像の有無を設定します。

● Show Page Posts
投稿表示の有無を設定します。

さらに下へ進むと、設定のデフォルト値や、言語の設定などに関する説明があります。必要に応じて読んでみてください。

Facebookプラグイン PagePlugin コードの貼り付け

あとはこのコードを貼り付けるだけです。コードは上下別々になっていますが、PagePluginを表示させたい場所に両方とも貼り付ければOKです。

Facebook PagePluginコード

少し補足しておくと、ページ内にPagePluginを複数設置する場合、上のコードは1度だけ、下のコードは表示させたい場所ごとに貼り付けます。3ヶ所設置する場合は、最初に上下のコードを貼り付けて、残りの2ヶ所は下のコードだけ貼り付けるということになりますね。

いわしブログのサイドバーに、さっそくPagePluginを貼り付けてみました。

Facebook PagePlugin貼り付け

これを機にカバー画像を設定してみたのですが、いわしの頭がアイコン画像に被ってしまいました。Facebookページではちゃんと表示されますが、これは仕方ありませんねぇ・・・

以前と比べてみると、カバー画像がある分ビジュアルになって、わかりやすくなったでしょうか。「シェア」ボタンも追加されてます。

コードの取得と貼り付けはLikeBoxの時と同じで、特に難しくはありません。まだLikeBoxをお使いの方は、23日までに新しいFacebookプラグイン PagePluginへ変更してくださいね。

スポンサーリンク
PC用
PC用

フォローする