AMPでTwitterやfacebookのシェアボタン(ソーシャルボタン)を付ける方法。

AMPってValidate（文法チェック）も厳しいのでなかなかページのカスタマイズがやりづらいですね。Twitterやfacebokなどのソーシャルのシェアボタンもその1つ。
ところがampのマークアップの拡張で簡単にTwitterやfacebookのシェアボタンが簡単に付くんです。

AMPのソーシャルボタン用タグ「amp-social-share」

AMPにTwitterやfacebookなどのソーシャルへのシェアボタンを付けるには、AMP拡張の<amp-social-share>タグを使うことで実現できます。
こんな感じで表示されます。

「さんタク(サンタク)」の合コンで使ってたアプリは？「押したの誰だ？」 | freeSIM.tokyo

amp-social-shareについてはこちらでパラメータが解説されています。
amp-social-share – Accelerated Mobile Pages Project

AMPページへのTwitter/facebookのシェアボタンの付け方

実際にAMPページにTwitterとfacebookのソーシャルボタンを付ける手順はこちら。

headにamp-social-share.jsを埋め込む

ampへのAdsenseの表示と同じように、headにamp-social-share.jsのタグを挿入。

シェアボタンのタグを挿入

実際にボタンを設置したい所にタグを挿入します。例えばTwitterの場合は、このタグを入れます。

<

facebookは要app_id

facebookだけapp_idが必要です。開発者向けFacebookでサイト用のアプリを設定し、そのapp_idを「data-param-app_id=」で指定してあげます。

他にも、大きさやテキスト、URLを指定したりできるようです。リファレンスにあるサンプルコードはこんな感じ。

typeをみるとLinkdInで、width/heightで大きさ指定。data-param-textで紹介する文章を指定して、data-param-urlでURLを指定できるみたいですね。
typeで指定できるソーシャルネットワークはEmail,facebook,linkedin,pinterest,gplus,tumblr,twitter,whatsappとchrome拡張のWeb Share APIのようです。
このタグの中で「CANONICAL_URL」と「TITLE」はURLとタイトルとして定数になっているようなので、そう記述しておいても機能するっぽい。