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のソーシャルボタンを付ける手順はこちら。
ampへのAdsenseの表示と同じように、headにamp-social-share.jsのタグを挿入。
1 | <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> |
シェアボタンのタグを挿入
実際にボタンを設置したい所にタグを挿入します。例えばTwitterの場合は、このタグを入れます。
1 | <amp-social-share type="twitter"></amp-social-share> |
<
facebookは要app_id
facebookだけapp_idが必要です。開発者向けFacebookでサイト用のアプリを設定し、そのapp_idを「data-param-app_id=」で指定してあげます。
1 | <amp-social-share type="facebook" data-param-app_id="********"></amp-social-share> |
他にも、大きさやテキスト、URLを指定したりできるようです。リファレンスにあるサンプルコードはこんな感じ。
1 2 3 4 | <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とタイトルとして定数になっているようなので、そう記述しておいても機能するっぽい。
1 2 3 4 5 | <amp-social-share type="twitter" layout="container" data-param-text="チェックしてね！ TITLE - CANONICAL_URL #freesimtokyo"> Share on Whatsapp </amp-social-share> |
