読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-social-share | AMPにSNSのシェアボタンを挿入する

f:id:mochizuki_p:20170107174707p:plain

AMPにSNSのシェアボタンを表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • 各SNSの種類を指定する必要がある。
  • ユーザー定義のシェアボタンも設定できる

専用のJavaScript

以下をhead内に追記してください。

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

実際にシェアされるURL

実際にシェアされるページのURLはAMPページ内で

<meta rel=canonical content="http://hoge.com/fuga.html"/>

で指定された元のURLとなります。

つまり、amp-social-shareタグ内で個別にURLを指定する必要はありません。

スタイルの指定

amp-social-shareでは任意のスタイルを指定することも可能です。

amp-social-share[type="facebook"] {
  color:  #3B5998;
}

各SNS別のamp-social-shareの設定例

Twitter

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

Google+

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

Facebook

<amp-social-share type="facebook" app_id="hogehoge"></amp-social-share>
app_id

必ず含みます 固有のウェブサイトごとに取得する固有IDです。

Tumblr

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

はてななどの国内Webサービスへの対応

amp-social-shareではユーザー定義のタグを設定することもできます。

そのポイントは

  • data-share-endpointでエンドポイントを指定する

  • 引数はdata-param-*で指定

*の部分が実際のリクエストのパラメーターとなります。

<amp-social-share type="hatena"
    layout="container"
    data-share-endpoint="http://b.hatena.ne.jp/www.hitode-festival.com/entry/2015/02/02/203907">
    はてぶ
</amp-social-share>