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

Facebookは、ウェッブサイトと連携する様々なツールやプラグインを提供しています。ページプラグインもその1つです。Facebookのページプラグインは、AMPページにも対応しています。本記事では、Facebook ページプラグインをAMPに導入する設定方法を紹介致します。

Facebook ページプラグインとは？

ページプラグインは、Facebookのページをウェッブサイトに埋め込む機能です。ユーサーはプラグインから、「いいね！」や「共有」などをすることも可能となります。以下はページプラグインの埋め込んだ例です。

タイムライン（投稿）を含めて表示することもできます。

Facebookタイムラインの設定オプションや通常ページに埋め込む方法については、以下の記事をご参照下さい。
Facebook ページプラグインをサイトに設置する方法

以下のスクリプトをAMP ページの<head>タグ内に追加します。

続いて、ページプラグインを埋め込む場所（表示場所）にプラグインのコードを挿入します。以下は、設定するコードの例です。

<amp-facebook-page width=”340″ height=”130″
layout=”fixed”
data-hide-cover=”true”
data-href=”https://www.facebook.com/imdb/”>
</amp-facebook-page>

data-href （必須）: ページプラグインで表示するFacebookページのURLを指定します。
data-locale (オプション): デフォルトでは、ユーザアーのシステム言語が使用されます。data-localで使用する言語を指定することが可能です。
data-tabs （オプション）: 表示するタブを指定します。（例：タイムライン、イベント、メッセージ）複数を指定する場合は、コンマで区切ります。（例：timeline, events）デフォルトでは、タイムラインを表示する設定になっています。プラグインの幅をピクセルで指定します。デフォルトは500です。設定の最小値は70です。
data-hide-cover（オプション）: ヘッダーのカバー写真を非表示にします。
data-show-facepile （オプション）: いいね！をしている友達のプロフィール写真を表示します。
data-hide-cta （オプション）: カスタムコールトゥアクション（設定しているバアアイ）を隠します。デフォルトは非表示です。
data-small-header（オプション）: ヘッダーのサイズを小さくします。デフォルトはfalse です。