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

AMP コンポーネント

本ブログは、パソコンとモバイル端末で表示されるページが全て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
現状、当該設定は、ネイティブAMPのページでは適切に表示されません。

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
現状、当該設定は、ネイティブAMPのページでは適切に表示されません。

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>
現状、上記コードを設置しても、ネイティブAMPのページではフォローボタンは表示されません。AMP Playgroundでは表示されます。

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>

 

現状、AMPページでの埋め込みピン ウィジェットのテキスト部は、日本語が文字化けしてしまいます。