<amp-pinterest> - Pinterestのコンテンツを埋め込み表示する
公開日:
AMPのamp-instagramは、Pinterestのコンテンツを埋め込み表示するための要素です。
概要
- 名前
- amp-pinterest
- 可用性
- Stable (安定)
- サポートするレイアウト
- fill,fixed,fixed-height,flex-item,nodisplay,responsive
- 必要なスクリプト
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-pinterest/0.1/validator-amp-pinterest.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-pinterest.html
属性
data-description
data-do属性がbuttonPin
の場合に必須。Pin対象のメディアファイルの詳細。
data-do
指定例: buttonPin
コンテンツの種類をキーワードで指定する。
- buttonPin
- Pinボタン。
- buttonFollow
- フォローボタン。
- embedPin
- 画像の埋め込み表示。
data-href
data-do属性がbuttonFollow
の場合に必須。フォロー対象のユーザーのURL。
data-label
data-do属性がbuttonFollow
の場合に必須。フォローボタンに表示されるテキスト。
data-media
data-do属性がbuttonPin
の場合に必須。Pin対象のメディアファイルのURL。
data-url
data-do属性がbuttonPin
、またはembedPin
の場合に必須。コンテンツのURLを指定する。
height
指定例: 150
高さ。
width
指定例: 200
横幅。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-pinterestを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
画像
画像を埋め込み表示するには、data-url、data-do、width、heightの指定が必要です。data-do属性にはembedPin
、data-urlには画像ページのパーマリンクを指定します。横幅(width)、高さ(height)は自動調節されないので、個々に指定しなければいけません。2017年2月現在、埋め込めるウィジェットはミニサイズ以外には対応してなく、また、日本語のテキストが文字化けします。
HTML
<amp-pinterest
data-do="embedPin"
data-url="https://jp.pinterest.com/pin/461126449327281183/"
width="245"
height="299">
</amp-pinterest>
ピンボタン
data-url、data-do、data-media、data-description、width、heightの指定が必要です。data-do属性にはbuttonPin
、data-url属性には、画像ページが設置されているウェブページのURL、data-media属性には画像ファイルのURL、そしてdata-description属性には紹介用のテキストを指定します。
HTML
<amp-pinterest
data-do="buttonPin"
data-url="https://syncer.jp/Web/AMP/Component/amp-pinterest/"
data-media="/image/mascot/200.png"
data-description="SYNCERのマスコット"
width="40"
height="20">
</amp-pinterest>
フォローボタン
data-href、data-do、data-label、width、heightの指定が必要です。data-do属性にはbuttonFollow
、data-href属性にはプロフィールページのURL、data-label属性にはラベルとなるテキストを指定します。Follow
というラベルテキストを設定したとして、横幅(width)は59
、高さ(height)は24
を指定しておくとちょうどいいです。
HTML
<amp-pinterest
data-do="buttonFollow"
data-label="Follow"
data-href="https://jp.pinterest.com/syncerjp/"
width="59"
height="24">
</amp-pinterest>
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-pinterest> - Pinterestのコンテンツを埋め込み表示する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-pinterest/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
</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-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-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-pinterest
data-do="embedPin"
data-url="https://jp.pinterest.com/pin/461126449327281183/"
width="245"
height="299">
</amp-pinterest>
<p>日本語は文字化けします。</p>
<h2>Pinボタン</h2>
<amp-pinterest
data-do="buttonPin"
data-url="https://syncer.jp/Web/AMP/Component/amp-pinterest/"
data-media="/image/mascot/200.png"
data-description="SYNCERのマスコット"
width="40"
height="20">
</amp-pinterest>
<h2>フォローボタン</h2>
<amp-pinterest
data-do="buttonFollow"
data-label="Follow"
data-href="https://jp.pinterest.com/syncerjp/"
width="59"
height="24">
</amp-pinterest>
</body>
</html>