ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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のコンポーネントをインポートする以下のコードを設置します。

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

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>

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

AMPページでのSNS共有ボタンの表示例

以下のリンクから、実際に表示しているページをご覧いただけます。(WordPress無料ブログ Lightningを使用したブロギングライフ内に設置しているサンプルサイトのAMPページです。)

Blogger 専用情報サイト Blogger 101@ブロギングライフ立ち上げのお知らせ

備考:
上のページを、パソコンで表示する場合は、広告やSNS共有ボタンは表示されません。パソコンでSNS共有ボタンの表示例をご覧になりたい方は、ネイティブAMP対応のブロギングライフBLOGをご訪問下さい。

Facebookの共有ボタンのパラメーター設定

Facebookの場合は、アプリIDを入手して、以下のコードの data-param-app_idの引数に設定します。(赤字の数字の部分をアプリIDに入れ換えます。)

<amp-social-share type=”facebook”
data-param-app_id=”12345678901234“></amp-social-share>

ボタン表示のカスタマイズ

CSSでスタイリングを設定して、ボタン表示をカスタマイズすることもできます。ボタンの形状を丸にしたりする例などを、AMP by Exampleのページで紹介しています。

ネイティブAMPのブロギングライフBLOGは、本記事の amp-social-share コンポーネントのデフォルト設定でSNS共有ボタンを設置しています。素早く設置できて、問題なく動作しています。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!