AMP対応ページにFacebookの純正「いいね！」ボタンを設置して高速で表示してみよう

AMP

AMP対応ページにもFacebookの純正「いいね！」ボタンを設置する方法があります。

これはいいな・・・！

AMP対応ページで高速に表示できる「いいね！」ボタンを設置するメリット

Facebookの純正「いいね！」ボタンと言えば、Facebook公式サイトで作成したコードをWebサイトに埋め込んで表示する方法が広く知られていると思います。

しかし、コードの「読み込みが遅い」という理由でWebサイトの表示速度を優先している方は設置を見送ったり、コードを非同期で読み込むため「async」属性を指定して変更を加えて設置したり、オリジナルボタンを設置してAPIを使って「いいね！」数を取得・表示する方もいらっしゃると思います。

押しやすい「いいね！」ボタンを考える

閲覧者にとって最も押しやすい「いいね！」ボタンとは、「公式の」「純正の」普段見慣れた「いいね！」ボタンじゃないかと思います。心理的にも安心感があってアクションしやすい（「いいね！」ボタンを押してもらいやすい）と私は考えます。

前置きが長くなりましたが、以下に設置方法を書きましたのでご参考ください。

AMP対応ページにFacebookの純正「いいね！」ボタンを設置する方法

スクリプトを読み込もう

まず、AMP対応ページの「<head></head>」内に以下のスクリプトを読み込みます。

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

読み込み順はドキュメントを参考にして「<meta charset=”utf-8″>」以降に読み込み「<style amp-boilerplate>」の前に読み込みました。スクリプトを読み込んだら、次は設置するボタンについて見ていきましょう。

設置するボタン

以下は、解説ページのサンプルコードを参考にしています。

<amp-facebook-like width=90 height=30
 layout="fixed"
 data-layout="button_count"
 data-href="https://www.facebook.com/imamura.tetsuya/">
</amp-facebook-like>

「amp-facebook-like」要素を使ってボタンを表示します。また、ボタンに指定できる属性を指定して、お好みでカスタマイズしましょう。

ボタンに指定できる属性

data-href（必須） URL
data-layout ボタンの種類
data-colorscheme ボタンの色
data-action ボタンのテキストを「いいね！」または「おすすめ」に変更する
data-kd_site 設置する対象のページが13歳未満かどうか
data-size ボタンの大きさ
data-share 隣にシェアボタンを表示するかどうか
data-show_faces ボタンを押してくれたFacebookアカウントのアバターを表示するかどうか

その他、common attributesページに書いてある属性も指定できます。

設置サンプル

私のブログのAMP対応ページには「いいね！」ボタンが設置されています。

このブログの更新情報を配信するFacebookページのURLを指定しています。

言語の変更ができるよう対応中

読み込むFacebook SDKがデフォルトで「en_US」となっているので「いいね！」が「like」など英語での表記になっていますが、開発者の方が言語を変更できるように対応中のようです。対応されるまで待ちましょう。

まとめ

「AMP対応ページにもFacebookの純正『いいね！』ボタンを設置したい！」という方は、ご参考いただけますと幸いです。

著者:bouya Imamura