AMP ページでのPinterest ピンボタン、フォローボタン、ウィジェットの表示設定方法

本ブログは、パソコンとモバイル端末で表示されるページが全てAMPとなるネイティブAMPに対応しています。本記事では、amp-pinterestのコンポーネントページの説明を訳して、AMPページでのPinterest コンポーネントを実際にAMPページ上で表示させる設定を紹介します。

必須スクリプト

以下のスクリプトをAMPページのヘッダー部に設置します。

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

Pin it （ピン）ボタン

<amp-pinterest
  height=20
  width=40
  data-do="buttonPin"
  data-url="https://blog.blogging-life.com/"
  data-media="https://blog.blogging-life.com/wp-content/uploads/2018/09/blogging-life-blog.png"
  data-description="ネイティブAMP対応　ブロギングライフBLOG">
</amp-pinterest>

上のコードを使用したピンボタンの表示例です。ボタンを押すと実際に動作します。

パラメーターの説明

data-do (必須)

必ずbuttonPinをセットします。

data-url (必須)

ピン留め、または、ウィジェットに再作成されるための条件を満たしたURL。

data-media (必須)

ピン留めされる画像の条件を満たしたURL。もし、ピンが最終的にYouTubeなどのマルチメディアを含む場合は、高画質のサムネールをポイントする（指す）ようにします。

data-description (必須)

ピン作成フォームに表示されるデフォルトの説明（ディスクリプション）。意味のない説明の場合、ピンどめする人の多くは、ピンせずにフォームを閉じてしまうため、慎重に言葉を選んで下さい。

Pin it ボタンのサイズ

デフォルトの小さい長方形のボタン：

height=20 width=40

data-count="beside"を設定して、右側にピンカウントが表示される小型長方形のボタン：

height=20 width=85

data-count="above"を設定して、上にピンカウントが表示される小型長方形のボタン：

height=50 width=40

data-tall="true"を設定した大型の長方形ボタン：

height=28 width=56

data-tall="true" と data-count="beside"を設定して、右側にピンカウントが表示される大型の長方形ボタン：

height=28 width=107

data-tall="true" と data-count="above" を設定して、上にピンカウントが表示される大型の長方形ボタン：

height=66 width=56

data-round="true" を設定して表示される小さい丸型のボタン：

height=16 width=16

data-round="true" と data-tall="true" を設定して表示される大きい丸型のボタン：

height=32 width=32

フォローボタン(Follow ボタン）

<amp-pinterest
    height=20
    width=94
    data-do="buttonFollow"
    data-href="https://www.pinterest.com/blogging_life/"
    data-label="ブロギングライフ">
</amp-pinterest>

data-do (必須)

buttonFollow を必ず指定します。

data-href (必須)

フォローするPinterest ユーザープロファイルのURLを設定します。

data-label (必須)

フォローボタン上に表示させるテキストを含めます。

埋め込みピン ウィジェット

<amp-pinterest
  width=245
  height=330
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/718394578032786940/">
</amp-pinterest>