Facebookページプラグイン[Page Plugin]の設置方法(ライクボックス代替)

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

当サイトでもこれまで使用してきたFacebookのライクボックスが2015年6月23日から利用できなくなります。

2015年6月23日からFacebook Lightboxが利用不能に
Facebook Like Box

ライクボックスとはこんなの。

Facebookライクボックスのデザイン

で、代わりとなるものは、何になるかというと、ページプラグイン(Page Plugin)になります。

こんなのになります。

Facebookページプラグインのデザイン

今回は、ページプラグインジェネレーターの使い方と、コードの設置方法を紹介したいと思います。

photo by Jay Cameron

スポンサーリンク
レクタングル(大)広告

Facebookページプラグインとは

Page Plugin

ページプラグインは、あなたのサイトのフェイスブックページをプロモーションするパーツを簡単に埋め込むことができるツールです。

ページプラグインを使う事で、サイトの訪問者は、あなたのサイトを去ることなく「いいね!」や「共有」を行うことができるようになります。

ページプラグイン作り方

ページプラグインパーツの作成は簡単です。

まずは、Page Pluginに移動します。

コードの生成

基本的なものなら「Facebook Page URL」部分にFacebookページのURLを入力して「Get Code」ボタンを押せばコードを取得できます。

ページプラグインジェネレーター

その他の、設定項目については、以下のようになっています。

Facebookページプラグインジェネレーター

幅は、280~500pxの間でしか設定できません。
高さは、130px未満には設定できません。

コードの貼り付け

「Get Code」ボタンを押すと、以下のようなダイアログが表示されます。

ページプラグインのコード

①のコードは、サイト内の<body></body>タグ内で1度だけ呼び出せばOKです。ページプラグインパーツを1ページ内に何度でも呼び出す場合でも、1回だけ記入してあればOKです。

body内で1度だけ呼び出すコード

②は、ページプラグインパーツを表示させたい部分にタグを貼り付けます。

ページプラグインを表示させたい部分に貼り付けるタグ

上記のようなタグは、パーツを表示させたい部分すべてに貼り付ける必要があります。

WordPressのウィジェットに貼り付ける場合

WordPressのウィジェットに1ヶ所だけ表示させる場合は、①と②のコードを足し合わせて、そのままテキストをウィジェットにでも貼り付ければOKです。

ページプラグインタグをテキストウィジェットに貼り付ける

動作確認

で、早速設置してみた結果が以下です。

Facebookページプラグインのデザイン

これは、以下のように設定したパーツです。

  • 幅:300px
  • 高さ:378px
  • 投稿を表示:オン

投稿表示をオンにしなかった場合は、幾ら高さを設定しようと、以下のようにしか表示されないようです。

投稿を表示

まとめ

ちなみに、以前のフェイスブックライクボックスとページブラグインを比較するとこんな感じになります。

Facebookライクボックスのデザイン Facebookページプラグインのデザイン

これまで、慣れ親しんだ感があるせいか、以前の方がわかりやすく「いいね!」しやすいような気もします。けれど、わざわざFacebookが仕様変更するほどですから、新しいページプラグインの方がFacebookページのプロモーションになるのかもしれません。

確かに、新しいデザインの方が、カバー写真がある分慣れるとわかりやすいかもしれません。それに、「いいね!」「シェア」ボタン両方があるのも、用途に合わせて使いやすいかもしれません。

個人的にページプラグインは、いろいろな機能がコンパクトにまとめられたといった印象です。