Facebook ページプラグインをサイトに設置する方法

Facebookは、ウェッブサイトにFacebookのページを埋め込むページプラグインを提供しています。ページプラグインを埋め込むと、ユーザーは訪問しているサイトのページから、Facebookページにいいね！やシェアをすることができます。

以下はブロギングライフのページプラグインです。ページプラグインの表示は、様々な表示形式、機能オプションが用意されています。ページプラグインは、サイトのサイドバーや記事中などサイト運営者が自由に埋め込むことができます。

ブロギングライフ

目次 - Table of Contents

Facebook ページプラグインをサイトに設置する方法

Facebook ページプラグインをサイトに設置する手順を以下に紹介します。

Facebookのページプラグインのページにアクセスします。

ページプラグインの設定とプレビュー

ページプラグインの設定項目欄とプレビューが表示されています。FacebookページのURLに、運営するサイトのFacebook ページのURLを入力すると、サイトのFacebook ページプラグインのプレビューが表示されます。。

設定項目を入力したり、チェックを入れるとリアルタイムで設定内容を反映したページプラグインのプレビューが表示されます。タイムラインを表示しない場合は、タブの欄の「タイムライン」を削除すると非表示になります。

表示設定を行い、プレビューで確認した後、その設定で良ければ、［コードを取得］ボタンを押して、コードを取得します。

ページプラグインの設定項目をスキップして、コードの取得へ

各種、設定項目については、以下をご参照下さい。

ページプラグインの設定項目

FacebookページのURL: ページプラグインで表示するFacebookページのURLです。
幅: プラグインの幅をピクセルで指定します。デフォルトは340です。設定値の範囲は、180から500までです。
高さ: プラグインの幅をピクセルで指定します。デフォルトは500です。設定の最小値は70です。
タブ: 表示するタブの種類を指定します。種類は、タイムライン、イベント、メッセージです。複数のタブを設定する場合は、コンマで区切って指定します。（例：timeline, messages)
カバー写真を非表示にする: ヘッダーのカバー写真を非表示にします。
plugin containerの幅に合わせる: プラグインを格納するコンテナの幅に収まるようにサイズを自動で調節します。（レスポンシブ）
スモールヘッダーを使用: ヘッダーのサイズが小さくなります。
友達の顔を表示する: いいね！をしている友達のプロフィール写真を表示します。

ページプラグインのコードを取得する

プレビューの下の［コードを取得］ボタンを押すと、小ウィンドウが開かれ、ページプラグインのコードが表示されます。

備考：
「このアプリは開発モードになっており、公開されていません。アプリダッシュボードで公開モードをオンにすることができます。」と表示されているのですが、公開モードをオフでも表示されることがあります。しかし、ガイダンスに従って、公開モードをオンにすることをお勧め致します。

プラグインのコードをサイトに設置する

サイトに設置するプラグインのコードは、2種類あります。1つはソーシャルプラグインの基本制御を行うJavaScript コード、もう一つはページプラグインを表示するコードです。JavaScript コードは、ページの<body>タグの直後に設置します。ページプラグイン表示コードは、プラグインを表示する場所に設置します。

ソーシャルプラグインJavaScript コードの設置

上の画像で、Step 2で表示されている赤枠内のJavaScript コードを、ページの<body>タグの直後に貼り付けます。WordPressの場合は、プラグイン Header and Footer を使用すると簡単に設置することができます。Google Tag Manager をご利用の場合は、タグマネージャーを利用して設置することをお勧めします。タグマネージャーの方で、保守管理ができるので便利です。（Google タグマネージャーは、中級者向けの機能です。）

プラグイン Header and Footer を使用したソーシャルプラグインコードの設置例

WordPressのダッシュボードのメニュー［設定］から[Header and Footer]のページを開きます。”AFTER THE <BODY> TAGの欄にFacebook ページプラグインのコードを貼り付けます。

備考：
レスポンシブテーマをご使用の場合は、DESKTOP側だけに貼り付ければ大丈夫です。MOBILEの欄にはコードを貼り付ける必要はありません。

ページプラグイン表示コードの設置

WordPressの場合は、サイドバーにページプラグインを設置する場合は、ウィジェットを使用するのが一般的です。ダッシュボードからウィジェットのページを表示します。カスタム HTML ウィジェットに、ページプラグイン表示コードを貼り付けます。

コードを貼り付けた後、［保存］ボタンを押してセーブします。

備考 / 注意事項：
以前は、ページプラグインプレビューの下のコードを取得ボタンを押すと、プレビューで設定されている情報が含まれたコードが表示されていました。その場合は、コードをコピーしてそのまま貼り付けます。今回試したところ、ページプラグインの表示設定が含まれていないコードが表示されました。設定が含まれていない場合は、マニュアルで設定する必要があります。以下は、コードの例です。<div class=”fb-page” data-href=”https://www.facebook.com/example-page” data-tabs=”timeline” data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”true” data-show-facepile=”false”><blockquote cite=”https://www.facebook.com/example-page” class=”fb-xfbml-parse-ignore”><a href=”https://www.facebook.com/example-page“>ページ名</a></blockquote></div>

以上で設置作業は完了です。