タブ表示も可能！ウェブサイトにFacebookページプラグインを表示させる方法
会社やウェブサイトなどプロモーションに使用する「Facebookページ」の縮小版をページ下やサイドバーウィジェットに貼付けたウェブサイトを見た事があると思います。
ページの紹介だけの場合や、タグを表示させタイムライン、イベント、メッセージの送信など色々な表示が出来るため非常に便利です。
WordPressのプラグインを使うのかと思う方もいるかもしれませんがコードを貼付けるだけで簡単に利用できるので、今回はそちらの説明をしていきます。
Facebook ページプラグインとは？
簡単に言うとあなたのFacebookページをの縮小版をウェブサイトに貼付ける事が可能になります。
- ウェブサイトのファンを増やす
- ユーザーの交流の場としても利用出来る
- Facebookページの情報をあなたのページにいながら確認出来る
このようなメリットがあります。視覚的にプロモーション出来るだけでなく、ユーザーがあなたのページを離脱する事なくFacebookの情報を確認できるので、結果的にサイト内滞在時間や回遊率が上がることになります。
2015年6月23日以前まではLike Box（いいね！ボックス）というものが使用されていましたが、こちらは廃止されました。
現在はPage Plugin（ページプラグイン）というものを使用していきます。
実際にはこのようになります。（表示させたい内容などは設定可能）↓
ページプラグインの使い方説明
Facebook for developers のページプラグインに移動します
このような詳細を入力するボックス（薄いグレー文字の例が書いてある）があるので各自入力していきます。
FacebookページのURL
facebookページのURLをそのままコピーしてペーストしてください。
タブ
ウィジェット等に差し込んだfacebookページにタブを表示させる事が出来ます。
タブ部分に「timeline」のみの場合と「timeline」「event」「messages」と３つのタブを表示させて操作する事が可能になります。
timeline,events,messages
このようにカンマで区切るようにしてください。
このようにFacebookに移動せずに、Facebook上にメッセージを送る事も可能です。
幅、高さ
幅：薄グレーで記入されている通り、埋め込みの幅は最低180px最大500px。
高さ：埋め込みの高さは、最低70px。タブ表示するとスクロールできる仕様。
ページプラグインコードの取得
細かい設定を決め終えたら、プレビューボックス左下の「コードを取得」をクリックします。
すると、コードが表示されたウィンドウが出てきますので、必要な場所に貼付けていきます。
ページプラグインコードを貼付ける
基本的にどのようなウェブサイト、どのような場所でも貼付ける事は可能です。
WordPressのサイドバーなどウィジェットで挿入したい場合
「外観」→「ウィジェット」で「テキスト」をサイドバーに挿入します。
先ほど取得した、step2のJavaScriptコードとstep3のコードをボックス内にペーストし、「保存」をクリック。
これだけで完了です。
他ブログサービスや違う場所に貼付けたい場合
- Step2のJavaScriptコードを＜body＞タグ直後に貼付けます。
- ページプラグインを表示させたい場所にStep3のコードを貼付けて下さい。
これで完了です。
ページプラグイン動作確認
このように、貼付けた場所にFacebookページの縮小版があなたのウェブサイトに表示されるようになりました。
タイムラインやメッセージ、イベントを表示させるかどうか、ヘッダー画像を小さくしたり、非表示にしたり等も表示設定の箇所で細かく決められるので希望に沿った形で作ってみて下さい。