ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

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

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

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

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

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

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

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

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

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

タイムラインを非表示にしたページプラグイン プレビュー

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

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

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

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

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

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

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

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

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

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

サイトに設置するプラグインのコードは、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 ページプラグインのコードを貼り付けます。

プラグイン Header and Footer で<body>直後にページプラグインのコードを設置します。

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

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

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

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

ページプラグイン表示を確認する

サイトのページを表示して、設置した場所(例:パソコンのサイドバー)にページプラグインが表示されているか確認します。パソコン画面のサイドバーにFacebook ページプラグインが表示されています

無事に表示されていれば、作業完了です。

Facebook ページプラグインはAMPにも埋め込み可!

Facebook ページプラグインはAMPにも埋め込むことができます。詳しくは、以下の記事をご覧下さい。

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

コメントを残す(承認後表示されます)

*
*
* (will not be published.)

Return Top