AMP

2020.08.21

AMPでシェアボタンを設置してSNSと連携「amp-social-share」

この記事は1342日前に投稿されたものです。

AMPプラグインでAMPに対応したときにいろいろ問題がおきて、シェアボタンについてもその一つでした。以前は「AddToAny Share Buttons」というプラグインで表示していましたが、エラー（aria-labelgがない）が出たのでプラグインを使わずにaria-labelgを追加したものを直接テンプレートに記述しエラーも解消されて一安心。したのも束の間、AMPではonClickは使えませんというエラーの通知が・・・。

いやいや！そもそもAMPにはシェアボタン用のコンポーネントがあります。

AMPについてはこちら↓

amp-social-shareで簡単にシェアボタンを設置

amp-social-shareにすでに設定されたサービスがいくつかあるので簡単に設置できます。

設定済みサービス（2020年8月現在）

Email / Facebook / LinkedIn / Pinterest / Google+ / Tumblr / Twitter / WhatsApp / LINE / SMS

<amp-social-share type="サービス名"></amp-social-share>

Facebookは開発者IDが必要になります。

<amp-social-share type="facebook" data-param-app_id="管理者ID"></amp-social-share>

はてブやPocketなどの未設定のサービスのボタンを作成する

設定済みのもの以外でも、amp-social-share属性を追加すれば使用できるようになります。未設定のサービスはボタンやCSSを作成する必要があります。

type

サービス名（独自で設定）

data-share-endpoint

フォーマットは各サービスに合わせる。サービスのURL＋タイトル等

はてなブックマーク

<amp-social-share
    type="hatena_bookmark"
    data-share-endpoint="http://b.hatena.ne.jp/entry/シェアするページのURL">
</amp-social-share>

Pocket

<amp-social-share
    type="pocket"
    data-share-endpoint="http://getpocket.com/edit?url=シェアするページのURL">
</amp-social-share>

シェアボタンのカスタマイズ

設定済みサービスのボタンにはスタイル設定がされているので、CSSでオーバーライドしてカスタマイズしていきます。

CSS

amp-social-share[type=サービス名]{ CSSの内容 }

アイコンを変えたい場合は、background-imageで背景に画像を設定します。背景色も設定されているので、必要があれば「背景なし」の設定を。

widthとheightはCSSでオーバーライドできません！インラインで記述します。

CSSサンプル

amp-social-share[type=facebook] {
    background-image: url(../images/sns-fb.png);
    background-color: transparent;
}

サンプル

このブログで使用しているコードです。シェアボタンのサイズは幅50px横50pxで、オリジナルのアイコンを背景に設定しています。Facebook、Twitter、Pinterest、LINE、はてブ、Pocketの6つです。

WordPress

<?php
    $url_encode=urlencode(get_permalink());
    $title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="share">
  <amp-social-share type="facebook" data-param-app_id="管理者ID" width="50px" height="50px"></amp-social-share>
  <amp-social-share type="twitter" width="50px" height="50px"></amp-social-share>
  <amp-social-share type="pinterest" width="50px" height="50px"></amp-social-share>
  <amp-social-share type="line" width="50px" height="50px"></amp-social-share>
  <amp-social-share
      type="hatena_bookmark" width="50px" height="50px"
      data-share-endpoint="http://b.hatena.ne.jp/entry/<?php echo $url_encode ?>">
  </amp-social-share>
  <amp-social-share
      type="pocket" width="50px" height="50px"
      data-share-endpoint="http://getpocket.com/edit?url=<?php echo $url_encode ?>">
  </amp-social-share>
</div>

CSS

amp-social-share {
    margin-right: 3px; /* ボタンのマージン */
}
/* facebook */
amp-social-share[type=facebook] {
    background-image: url(../images/sns-fb.png);
    background-color: transparent;
}
/* twitter */
amp-social-share[type=twitter] {
    background-image: url(../images/sns-twitter.png);
    background-color: transparent;
}
/* pinterest */
amp-social-share[type=pinterest] {
    background-image: url(../images/sns-pinterest.png);
    background-color: transparent;
}
/* line */
amp-social-share[type=line] {
    background-image: url(../images/sns-line.png);
    background-color: transparent;
}
/* hatena_bookmark */
amp-social-share[type=hatena_bookmark] {
    background-image: url(../images/sns-hatebu.png);
    background-color: transparent;
}
/* pocket */
amp-social-share[type=pocket] {
    background-image: url(../images/sns-pocket.png);
    background-color: transparent;
}

参考サイト：amp-social-share