ブロギングライフ

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

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

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

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

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

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

 

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

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

Facebook ページプラグインをAMPページに埋め込む設定

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

<script async custom-element=”amp-facebook-page” src=”https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js”></script>

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

<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 です。

Facebook ページプラグインのコードのAMPページ設置方法

プラグインコードのAMPページへの設置方法は、AMP化した方法によって異なります。一般的には、AMPページでテキストウィジェットが使用できる場合は、ウィジェットを使用して設置するのが手軽です。

WordPress テーマのCocoonにFacebook プラグインを設置した表示例です。

Cocoon のAMPページにFacebook プラグイン設置例

上で紹介したCocoonのAMPページでの設定は、カスタムHTMLを使用して設置しています。

Cocoon AMP ページでのFacebook ページプラグイン表示例

AMP化した他の方法での設置方法なども、今後記事にして紹介する予定です。

TwitterなどのタイムラインもAMPに埋め込み可能?

2018年4月の時点では、Twitterの場合、AMPへのツイートの埋め込みはできますが、タイムライン等のウィジェットのAMPへの埋め込みはサポートされていません。

Facebookは、GoogleのAMPと競合するインスタント記事を提供しています。競合する高速モバイルページ、AMPにはFacebookのページプラグインが競合SNSに先駆けて対応していることは、興味深いです。

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

*
*
* (公開されません)

Return Top