株式会社コプロシステム

お問い合わせ

2015年5月19日

もう移行は済んだ?「Like Box」に代わるFacebookの新しいプラグイン「Page Plugin」の設置方法やポイントまとめ

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステム・UXデザイン室 ディレクターの石川です。

企業のマーケティング活動におけるツールのひとつとしてFacebookの"Facebookページ"を導入することは今や珍しくなくなっています。
それと同時に、Facebookページの存在やそこからのコンテンツ発信を認知させたり、そのファン化を促すことができるFacebookのプラグイン「Likeボックス」(下図参照)をWebサイト上で見かけることも多くなってきました。


そのプラグイン「Likeボックス」ですが、来る2015年6月23日(火)にサービスの提供が終了となるのはご存知でしょうか?
https://developers.facebook.com/docs/plugins/like-box-for-pages


(訳:Graph APIのv2.3のリリースと同時に、Likeボックスは非推奨のプラグインになりました。代わりに新しい「Page Plugin」を使ってください。Page Pluginは、Facebookページからのコンテンツをあなたのウェブサイトに簡単に埋め込めます。)


引き続き利用するには後継の新しいプラグイン「Page Plugin」を設置し直す必要があります。

今回の記事では「Page Plugin」の設置方法や特徴などをまとめました。是非ご覧ください。
※当記事で紹介している情報は、記事執筆時の2015年5月13日(水)現在の情報です。

設置方法

1:「Page Plugin」のコードを入手できるページにアクセス

Facebook・開発者用ページに各種プラグインのコードを入手できるページがあるので、まずはそのページにアクセスします。
URL:https://developers.facebook.com/docs/plugins/page-plugin


2:必要な情報を入力して「Get Code」をクリック

<①Facebook Page URL>

Page Pluginとして使用したいFacebookページのURLを入力します。
例)https://www.facebook.com/coprosystem

<②Width>

Page Pluginを埋め込む時の横幅を指定します。
最小280px ~ 最大500px

<③Height>

Page Pluginを埋め込む時の高さを指定します。
最小130px

<④Hide Cover Photo>

Page Pluginのデザインでカバー写真の表示/非表示を切り替えられます。
以前のLikeボックスにはない機能です。
存在感がありますし、見た目も締まりますね。

<⑤Show Friend's Faces>

そのFacebookページに「いいね!」している(ファンになっている)友達の数とプロフィール写真の表示/非表示を切り替えられます。
ユーザーがFacebookにログインしていなかったり、「いいね!」している友達がいない場合は、『「いいね!」した友達はまだいません。』と表示されます。

<⑥Show Page Posts>

そのFacebookページの投稿コンテンツの表示/非表示を切り替えられます。
ここにチェックを入れると「Height」で設定できる数値がかなり長くなります。


3:2種類のコードをコピペします

1のコードはbodyタグ開始直後にペーストします。

2のコードは、Page Pluginを表示したい箇所にペーストします。

Page Pluginを使用する上でのポイント

シェア機能がついた

このプラグインからFacebookページをシェアする機能がつきました。
逆になんで今までなかったのか...。


横幅の最大値は500px

以前のLikeボックスとは違い横幅は最大500pxで、それより大きく設定することができません。
500px以上の値は入力できますが、その結果の出力されたコードをHTMLに埋め込んでも500px以上にはなりません。
また、数値を指定しない時のデフォルトサイズは340pxです。


高さの最大値は表示する要素によって様々

●『Page Posts』を表示した場合

「Page Posts」を表示すると、そのFacebookページの投稿コンテンツが最大5つ表示されます。
この場合の最大値は、その5つがすべて表示できる高さまで設定することができます。
確認した範囲では3000px以上を設定することもできました。
でも、投稿コンテンツが短ければ設定できる数値も小さくなります。
数値を指定しない時のデフォルトサイズは500pxです。


●『Friend's Faces』を表示した場合(Page Postsは非表示)

この場合の高さは最大224pxです。
数値を指定しない時のデフォルトサイズも同じく224pxです。


●『Friend's Faces』も『Page Posts』も非表示

この場合の高さは最大130pxです。
数値を指定しない時のデフォルトサイズも同じく130pxです。


ページを読み込んだ時に横幅が決まる

Page Pluginの配布ページには下記の記述があります。

The plugin will automatically adapt to the width of its parent element on page load(min. 280px / max. 500px)

『Page Pluginの横幅は、ページを読み込んだ時にPage Pluginの親要素の横幅に自動的に合わせるよ。280px~500pxの範囲内でね。』ということです。
実際に数パターンの横幅の親要素の中で表示してみましょう。
例として用意したPage Pluginの横幅は400pxです。


●Page Pluginの横幅(400px) > 親要素の横幅(200px)

親要素の横幅に合わせてはくれますが、それは280px~500pxという範囲内の話。
元々設定していた400pxが最小280pxまで小さくなっています。
それ以上は小さくならないので、親要素200pxからはみ出ています。


●Page Pluginの横幅(400px) > 親要素の横幅(300px)

親要素の横幅が280px~500px範囲内なので、元々設定していた400pxが親要素の横幅300pxまで小さくなっています。


●Page Pluginの横幅(400px) < 親要素の横幅(600px)

親要素の横幅に合わせるとはいえ元々設定していた400pxより大きくなることはないので、400pxで止まっています。
このケースでもっと大きく表示させたい場合は最大値の500pxを設定しましょう。



いかがでしたでしょうか?
期限まで「まだ1ヵ月以上」と考える方、「もう1ヵ月しかない」と考える方、いろいろあると思います。
移行がこれからの方は忘れない早めのうちに対応することをおすすめします。
参考になれば幸いです!

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Facebook」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP