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のタグを挿入。

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

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

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

<amp-social-share type="twitter"></amp-social-share>

<

facebookは要app_id

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

 <amp-social-share type="facebook" data-param-app_id="********"></amp-social-share>

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

<amp-social-share type="linkedin" width="60" height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

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とタイトルとして定数になっているようなので、そう記述しておいても機能するっぽい。

<amp-social-share type="twitter"
    layout="container"
    data-param-text="チェックしてね！　TITLE - CANONICAL_URL　#freesimtokyo">
    Share on Whatsapp
</amp-social-share>

WordPress AMP対応 モダンWeb制作 レッスンブック