AMP ページにSNS共有ボタンを簡単に設置する方法

プラグイン AMP for WordPress を使用すると、簡単にWordPressのサイトをAMP化することができます。AMP for WordPressは、基本的な機能がしっかりしているのが特徴です。言い方を変えると、機能は基本的なものに限定されているため、サイト運営者の方で必要な機能は追加する作業が必要となります。

AMP for WordPressには、SNSの共有ボタンの表示機能は含まれていません。しかし、AMPに標準で含まれている amp-social-share と言うコンポーネントを使用することで、簡単にAMPページ内にSNSボタンを設置することができます。

SNS 共有ボタンのセットアップ

AMPページのヘッダー（ <head>タグ内）にamp-social-shareのコンポーネントをインポートする以下のコードを設置します。

AMPコンポーネントが動作するためには、canonical URLが設定されている必要があります。（AMPの仕様、前提条件です。）

標準で利用可能なSNSタイプ

以下のSNSタイプは、amp-social-shareで予め設定されていて、直ぐに利用することができます。

Eメール
Facebook
LinkedIn
Pinterest
Google+
Tumblr
Twitter
Whatsapp
LINE
SMS

それぞれのSNSタイプのパラメータの設定方法については、amp-social-shareのページをご参照下さい。

基本的な設定方法

amp-social-shareに表示するボタンのタイプを指定すると、共有ボタンが並んで表示されます。以下、基本的な設定方法の例です。

<amp-social-share type=”email”></amp-social-share>
<amp-social-share type=”facebook”
data-param-app_id=”254325784911610″></amp-social-share>
<amp-social-share type=”gplus”></amp-social-share>
<amp-social-share type=”linkedin”></amp-social-share>
<amp-social-share type=”pinterest”
data-param-media=”https://ampbyexample.com/img/amp.jpg”></amp-social-share>
<amp-social-share type=”tumblr”></amp-social-share>
<amp-social-share type=”twitter”></amp-social-share>
<amp-social-share type=”whatsapp”></amp-social-share>
<amp-social-share type=”line”></amp-social-share>

記事の最後などに、コードを設置します。AdSenseの広告コードの後などにコードを追加するなどして設置できます。例えば、以下のコードであれば、Twitter, Facebook, Google+, LINE, Eメールの順にボタンを並べて表示されます。

<amp-social-share type=”twitter”></amp-social-share>
<amp-social-share type=”facebook”
data-param-app_id=”12345678901234″></amp-social-share>
<amp-social-share type=”gplus”></amp-social-share>
<amp-social-share type=”line”></amp-social-share>
<amp-social-share type=”email”></amp-social-share>

以下は上のコードを設置して表示しています。