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の純正『いいね！』ボタンを設置したい！」という方は、ご参考いただけますと幸いです。
このページを共有する