お問い合わせ

AMP対応ページとSNSの連携

UI開発者 木村

AMP対応ページは、モバイルユーザーに対して表示速度の高速化や、Google検索におけるアクセス数向上を図るための手段の一つです。ですが、モバイルユーザーがWebサイトを訪問する手段はGoogle検索のみではなく、近年ではSNSによる拡散機能も大きな訪問ルートの一つであると考えられます。

AMP HTMLではAMP JS以外のJavaScriptの読み込み、インラインへの記述が禁止されているため、各サービスが提供するウィジェットはAMP HTMLには実装できないことが多いです。今回はAMPコンポーネントを使用した、AMP HTMLでSNSのシェアボタンとSNSのコンテンツの埋め込み方法をご紹介します。

シェアボタンの追加

モバイル端末で、閲覧中のWebページをSNSなどに共有する方法はOSやブラウザの種類によって異なりますが、多くのモバイルブラウザでは、一度メニューを展開する必要があるものが多いと思います。ユーザーによっては、その手順を手間だと思う人がいるかもしれません。その解決策の一つとして、ページ上にシェアボタンを設置する方法があります。

従来のシェアボタンは、インラインにJavaScriptを記述しなくてはならないものが多いため、そういったシェアボタンをAMP HTMLで実装することはできません。

AMP HTMLで作成されたページにシェアボタンを実装するためには、amp-social-shareというAMPコンポーネントを使用します。執筆時にamp-social-shareに対応しているのは次のサービスです。

  • Email
  • Facebook
  • LinkedIn
  • Pinterest
  • Google+
  • Tumblr
  • Twitter
  • WhatsApp

次のコードは、実際にamp-social-shareを実装したAMP HTMLのサンプルです。

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-social-share</title>
<link rel="canonical" href="dummy">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
  background-color: #fcfcfc;
}
h1 {
  text-align: center;
  font-size: 24px;
}
.btn-social {
  text-align: center;
  padding: 0 10px;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

<h1>amp-social-share</h1>

<div class="btn-social">
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="facebook" data-param-app_id="$$$dummy$$$"></amp-social-share>
<amp-social-share type="gplus"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="pinterest"></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>
<!-- /.btn-social --></div>

</body>
</html>

AMPコンポーネントを使用する際には、AMPコンポーネントをscript要素で読み込む必要があります。サンプルソース内で次のscript要素を読み込んでいます。

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

ボタンのマークアップは、AMPコンポーネントによって追加された、amp-social-share要素を使用します。シェアするサービスを、各amp-social-share要素のtype属性にサンプルソースと同じように記述します。type属性のサービス名をアッパーケースにするなどの変更はできません。

また、Facebookのシェアボタンを設置する際には、FacebookのユーザーIDをdata-param-app_id属性に記述する必要があります。

上記サンプルソースで実装したもののキャプチャが次です。

デフォルトのシェアボタン

シェアボタンのデザインはCSSで調整することが可能です。ボタンの色やアイコン画像を個別に変更する場合は、type属性を属性セレクタで指定することによって変更可能です。style[anmp-custom]に次のスタイルを追加することによって、ボタンを角丸にし、Eメールアイコンの背景色を変更しています。

.btn-social amp-social-share {
  border-radius: 4px;
  background-size: 80%;
}

.btn-social amp-social-share[type="email"] {
  background-color: tomato;
}

注意が必要な点は、amp-social-share要素に対してCSSでのwidthプロパティとheightプロパティは、amp-social-shareの性質上適用されません。アイコンの大きさを変更する場合は次のように、amp-social-share要素のwidth属性、height属性に指定する必要があります。

<div class="btn-social">
<amp-social-share type="email" width="40" height="40"></amp-social-share>
<amp-social-share type="facebook" data-param-app_id="$$$dummy$$$" width="40" height="40"></amp-social-share>
<amp-social-share type="gplus" width="40" height="40"></amp-social-share>
<amp-social-share type="linkedin" width="40" height="40"></amp-social-share>
<amp-social-share type="pinterest" width="40" height="40"></amp-social-share>
<amp-social-share type="tumblr" width="40" height="40"></amp-social-share>
<amp-social-share type="twitter" width="40" height="40"></amp-social-share>
<amp-social-share type="whatsapp" width="40" height="40"></amp-social-share>
<!-- /.btn-social --></div>
スタイルを変更したシェアボタン

SNSのコンテンツをAMP対応ページに掲載する

AMP対応ページにSNSのコンテンツを表示することによって、AMP対応ページ上でコンテンツの閲覧やシェアが可能になり、よりSNSでの拡散が期待できます。

SNSのコンテンツをAMP対応ページに表示するためには、次のAMPコンポーネントを使用します。サービスごとに使用するAMPコンポーネントが異なります。

別々のAMPコンポーネントではありますが、実装方法は大きくは変わりません。指定のscript要素を用いて指定のAMPコンポーネントを読み込み、コンテンツのURLやIDなどを指定の属性値に記述することによって実装可能です。読み込みに必要な要素や属性は、それぞれのリファレンスを参照してください。

例としてFacebookのコンテンツを実際に読み込みます。次は当社のFacebookのコンテンツをAMP対応ページに表示するサンプルソースです。head要素などは割愛しています。

<amp-facebook width="300" height="400" layout="responsive" data-href="https://ja-jp.facebook.com/MitsueLinks/posts/1343478129042750"></amp-facebook>

FacebookのコンテンツをAMP対応ページに実装する場合は、width属性、height属性を記述し、コンテンツのURLをdata-href属性に記述するだけで実装することができます。

このように、AMPコンポーネントを用いることで、AMP対応ページでもシェアボタンの実装やSNSのコンテンツの読み込みが可能となり、ページ遷移や複数回のタップをすることなくコンテンツの閲覧、シェアが可能になりますので、ブログなどのページをAMP対応する際には、是非設置してみてはいかがでしょうか。

2017年の記事一覧に戻る