SYNCER

SYNCER

＜amp-social-share＞ - ソーシャルシェアボタンを設置する

1件

公開日:

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
Twitter。
facebook
Facebook。
gplus
Google+。
linkedin
Linkedin。
pinterest
Pinterest。
tumblr
Tumblr。
whatsapp
WhatsApp。
email
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属性の指定が必須なのでご注意下さい。

Email
subject: メールのタイトル。
body: メールの本文。デフォルトでは、そのページのrel=canonicalのURL。
Facebook
app_id: FacebookのApp ID。指定必須。
href: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
LinkedIn
url: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
Pinterest
url: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
description: テキスト。デフォルトでは、そのページのタイトル。
Google+
url: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
Tumblr
url: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
text: テキスト。デフォルトでは、そのページのタイトル。
Twitter
url: シェアするURL。デフォルトでは、そのページのrel=canonicalのURL。
text: テキスト。デフォルトでは、そのページのタイトル。
Whatsapp
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 ;
}

pocket

エンドポイントの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>

デモを開く

デモ

</head><body>までを含めて下さい。

</body> </html>

<style amp-custom>

</style>