<amp-social-share> - ソーシャルシェアボタンを設置する
公開日:
AMPのamp-social-shareは、ソーシャルシェアボタンを設置するための要素です。公式にシェアボタンとしてAMPのコアに含まれているものといないものがありますが、後者もパラメータを指定して設置できます。
概要
- 名前
- amp-social-share
- 可用性
- Stable (安定)
- サポートするレイアウト
- container,fill,fixed,fixed-height,flex-item,nodisplay,responsive
- 必要なスクリプト
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-social-share/0.1/validator-amp-social-share.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-social-share.html
属性
data-param-*
それぞれのシェアボタンでサポートしているパラメータは、data-param-
に続けた属性名で指定できる。
data-share-endpoint
エンドポイントのURL。AMPのコアに含まれないサービスをシェアボタンにする場合に必須。
type
シェアボタンの種類をキーワードで指定する。
- Twitter。
- Facebook。
- gplus
- Google+。
- Linkedin。
- Pinterest。
- tumblr
- Tumblr。
- WhatsApp。
- E-mail。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-social-shareを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
公式に対応しているサービス
下記は公式に対応しているウェブサービスの一覧です。各サービスで独自の属性を指定できます。これらはdata-param-*
に続く形で指定して下さい。Facebookではapp_id属性の指定が必須なのでご注意下さい。
- subject: メールのタイトル。
- body: メールの本文。デフォルトでは、そのページの
rel=canonical
のURL。 - app_id: FacebookのApp ID。指定必須。
- href: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - url: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - url: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - description: テキスト。デフォルトでは、そのページのタイトル。
- Google+
- url: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - Tumblr
- url: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - text: テキスト。デフォルトでは、そのページのタイトル。
- url: シェアするURL。デフォルトでは、そのページの
rel=canonical
のURL。 - text: テキスト。デフォルトでは、そのページのタイトル。
- text: テキスト。デフォルトでは、そのページのタイトルと、
rel=canonical
のURL。
置換変数
パラメータに一部のキーワードを指定すると、それが置換されます。例えば、TITLE
というキーワードを含めた場合、その部分がページのタイトルに置き換えられます。URLエンコードされる点にご注意下さい。詳しくは置換変数の項目をご参考下さい。
HTML
<head>
<title>SYNCER</title>
</head>
<body>
<amp-social-share
data-param-text="TITLE"
type="twitter">
</amp-social-share>
</body>
実際に設定される値
<amp-social-share
data-param-text="SYNCER"
type="twitter">
</amp-social-share>
スタイリング
シェアボタンのスタイルは、下記のようにtype属性をセレクタに含めて指定できます。
CSS
amp-social-share[type=twitter] {
/* type=twitterのシェアボタンのスタイル */
}
オリジナルのシェアボタンを設置する場合、下記の仕様に合わせましょう。
- 横幅(width)は、
60px
を指定する。 - 高さ(height)は、
44px
を指定する。 - アイコンは、background-imageプロパティで指定する。
非公式のシェアボタン
非公式のシェアボタンを設置できます。src属性にはエンドポイントのURLを含め、type属性にはそのサービスを表す独自の値を設定して下さい。日本で使用されている主なウェブサービスのシェアボタンを作成してみました。
はてなブックマーク
はてなブックマークの場合、シェアするURLをエンドポイントのURL自体に含めなければいけないため、URLエンコードされる置換変数を利用できません。各ページ(URL)ごとに直接、エンドポイントのURLを指定しなければいけません。
HTML
<amp-social-share
type="hatena_bookmark"
layout="container"
data-share-endpoint="http://b.hatena.ne.jp/entry/https://syncer.jp/Web/AMP/Component/amp-social-share/">
B!
</amp-social-share>
CSS
amp-social-share[type=hatena_bookmark] {
width: 60px ;
height: 44px ;
font-family: Verdana ;
background-color: #00A4DE ;
font-weight: 700 ;
color: #fff ;
line-height: 44px ;
text-align: center ;
font-size: 28px ;
}
エンドポイントのURLには置換変数を利用できるので、ページごとにコードを変更する必要はありません。
HTML
<amp-social-share
type="pocket"
layout="container"
data-share-endpoint="http://getpocket.com/edit?url=SOURCE_URL">
</amp-social-share>
CSS
amp-social-share[type=pocket] {
width: 60px ;
height: 44px ;
background-color: #EF3E55 ;
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.53 6.84l-3.76 3.61c-.213.204-.486.306-.76.306-.273 0-.547-.102-.76-.306L3.488 6.84c-.437-.418-.45-1.113-.032-1.55.42-.438 1.114-.452 1.55-.033l3.005 2.88 3.006-2.88c.436-.42 1.13-.405 1.55.032.42.436.405 1.13-.032 1.55zm3.388-5.028c-.207-.572-.755-.956-1.363-.956H1.45c-.6 0-1.144.376-1.357.936-.063.166-.095.34-.095.515v4.828l.055.96c.232 2.184 1.365 4.092 3.12 5.423.03.024.063.047.095.07l.02.015c.94.687 1.992 1.152 3.128 1.382.524.105 1.06.16 1.592.16.492 0 .986-.046 1.472-.136.058-.014.116-.024.175-.038.016-.002.033-.01.05-.018 1.088-.237 2.098-.69 3.004-1.352l.02-.014.095-.072c1.754-1.33 2.887-3.24 3.12-5.423l.054-.96V2.307c0-.167-.02-.333-.08-.495z"/></svg>' ) ;
/* MIT License | https://icon.now.sh/ */
}
LINE
エンドポイントのURLには置換変数を利用できるので、ページごとにコードを変更する必要はありません。
HTML
<amp-social-share
type="line"
layout="container"
data-share-endpoint="http://line.me/R/msg/text/?TITLE%3ASOURCE_URL">
</amp-social-share>
CSS
amp-social-share[type=line] {
width: 60px ;
height: 44px ;
background-color: #00B900 ;
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.91 6.57c.232 0 .42.19.42.42 0 .23-.188.42-.42.42h-1.17v.75h1.17c.232 0 .42.188.42.42 0 .23-.188.42-.42.42h-1.59c-.23 0-.418-.19-.418-.42V5.4c0-.23.188-.42.42-.42h1.59c.23 0 .418.19.418.42 0 .232-.188.42-.42.42h-1.17v.75h1.17zm-2.57 2.01c0 .18-.116.34-.288.398-.043.014-.088.02-.133.02-.136 0-.26-.06-.34-.167L7.95 6.618V8.58c0 .23-.186.42-.42.42-.23 0-.417-.19-.417-.42V5.4c0-.18.115-.34.286-.397.043-.015.09-.022.133-.022.13 0 .256.068.335.17L9.5 7.37V5.4c0-.23.188-.42.42-.42.23 0 .42.19.42.42v3.18zm-3.828 0c0 .23-.188.42-.42.42-.23 0-.418-.19-.418-.42V5.4c0-.23.188-.42.42-.42.23 0 .418.19.418.42v3.18zM4.868 9h-1.59c-.23 0-.42-.19-.42-.42V5.4c0-.23.19-.42.42-.42.232 0 .42.19.42.42v2.76h1.17c.232 0 .42.188.42.42 0 .23-.188.42-.42.42M16 6.87C16 3.29 12.41.376 8 .376S0 3.29 0 6.87c0 3.208 2.846 5.896 6.69 6.405.26.056.615.172.705.394.08.2.053.514.026.72l-.11.683c-.034.203-.16.79.694.432.855-.36 4.608-2.714 6.286-4.646C15.445 9.594 16 8.302 16 6.87"/></svg>' ) ;
/* MIT License | https://icon.now.sh/ */
}
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-social-share> - ソーシャルシェアボタンを設置する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-social-share/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
/* はてなブックマーク */
amp-social-share[type=hatena_bookmark] {
width: 60px ;
height: 44px ;
font-family: Verdana ;
background-color: #00A4DE ;
font-weight: 700 ;
color: #fff ;
line-height: 44px ;
text-align: center ;
font-size: 28px ;
}
/* pocket */
amp-social-share[type=pocket] {
width: 60px ;
height: 44px ;
background-color: #EF3E55 ;
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.53 6.84l-3.76 3.61c-.213.204-.486.306-.76.306-.273 0-.547-.102-.76-.306L3.488 6.84c-.437-.418-.45-1.113-.032-1.55.42-.438 1.114-.452 1.55-.033l3.005 2.88 3.006-2.88c.436-.42 1.13-.405 1.55.032.42.436.405 1.13-.032 1.55zm3.388-5.028c-.207-.572-.755-.956-1.363-.956H1.45c-.6 0-1.144.376-1.357.936-.063.166-.095.34-.095.515v4.828l.055.96c.232 2.184 1.365 4.092 3.12 5.423.03.024.063.047.095.07l.02.015c.94.687 1.992 1.152 3.128 1.382.524.105 1.06.16 1.592.16.492 0 .986-.046 1.472-.136.058-.014.116-.024.175-.038.016-.002.033-.01.05-.018 1.088-.237 2.098-.69 3.004-1.352l.02-.014.095-.072c1.754-1.33 2.887-3.24 3.12-5.423l.054-.96V2.307c0-.167-.02-.333-.08-.495z"/></svg>' ) ;
/* MIT License | https://icon.now.sh/ */
}
/* LINE */
amp-social-share[type=line] {
width: 60px ;
height: 44px ;
background-color: #00B900 ;
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.91 6.57c.232 0 .42.19.42.42 0 .23-.188.42-.42.42h-1.17v.75h1.17c.232 0 .42.188.42.42 0 .23-.188.42-.42.42h-1.59c-.23 0-.418-.19-.418-.42V5.4c0-.23.188-.42.42-.42h1.59c.23 0 .418.19.418.42 0 .232-.188.42-.42.42h-1.17v.75h1.17zm-2.57 2.01c0 .18-.116.34-.288.398-.043.014-.088.02-.133.02-.136 0-.26-.06-.34-.167L7.95 6.618V8.58c0 .23-.186.42-.42.42-.23 0-.417-.19-.417-.42V5.4c0-.18.115-.34.286-.397.043-.015.09-.022.133-.022.13 0 .256.068.335.17L9.5 7.37V5.4c0-.23.188-.42.42-.42.23 0 .42.19.42.42v3.18zm-3.828 0c0 .23-.188.42-.42.42-.23 0-.418-.19-.418-.42V5.4c0-.23.188-.42.42-.42.23 0 .418.19.418.42v3.18zM4.868 9h-1.59c-.23 0-.42-.19-.42-.42V5.4c0-.23.19-.42.42-.42.232 0 .42.19.42.42v2.76h1.17c.232 0 .42.188.42.42 0 .23-.188.42-.42.42M16 6.87C16 3.29 12.41.376 8 .376S0 3.29 0 6.87c0 3.208 2.846 5.896 6.69 6.405.26.056.615.172.705.394.08.2.053.514.026.72l-.11.683c-.034.203-.16.79.694.432.855-.36 4.608-2.714 6.286-4.646C15.445 9.594 16 8.302 16 6.87"/></svg>' ) ;
/* MIT License | https://icon.now.sh/ */
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<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 src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h2>コアに登録されているシェアボタン</h2>
<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"></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>
<h2>オリジナルのシェアボタン</h2>
<h3>はてなブックマーク</h3>
<amp-social-share
type="hatena_bookmark"
layout="container"
data-share-endpoint="http://b.hatena.ne.jp/entry/s/syncer.jp/Web/AMP/Component/amp-social-share/">
B!
</amp-social-share>
<h3>pocket</h3>
<amp-social-share
type="pocket"
layout="container"
data-share-endpoint="http://getpocket.com/edit?url=SOURCE_URL">
</amp-social-share>
<h3>LINE</h3>
<amp-social-share
type="line"
layout="container"
data-share-endpoint="http://line.me/R/msg/text/?TITLE%3ASOURCE_URL">
</amp-social-share>
</body>
</html>