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

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を指定しています。

この記事のAMP対応ページには、記事のURLを指定したボタンも設置しています。

もし、このページやブログのどこか一部分でも「いいね!」と思ったら、ボタンを押していただけますと嬉しいです。

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

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

まとめ

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

著者:bouya Imamura