amp-pinterest

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

範例

使用 amp-pinterest 元件來顯示「儲存」按鈕、Pin 小工具或「追蹤」按鈕。

範例：「儲存」按鈕

<amp-pinterest
  height="20"
  width="40"
  data-do="buttonPin"
  data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
  data-media="http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg"
  data-description="Next stop: Pinterest"
>
</amp-pinterest>

範例：Pin 小工具

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

範例：「追蹤」按鈕

<amp-pinterest
  height="20"
  width="94"
  data-do="buttonFollow"
  data-href="https://www.pinterest.com/kentbrew/"
  data-label="Kent Brewster"
>
</amp-pinterest>

儲存按鈕

data-do (必填)

必須設為 buttonPin。

data-url (必填)

包含完整網址，做為釘選儲存或重新製作成小工具之用。

data-media (必填)

包含完整網址，做為釘選儲存的圖片之用。如果釘選最終會包含多媒體 (例如 YouTube)，則應指向高解析度縮圖。

data-description (必填)

包含釘選建立表單中顯示的預設說明；請謹慎選擇，因為如果說明沒有意義，許多 Pinterest 使用者會直接關閉表單而不釘選。

調整「儲存」按鈕大小

預設小型矩形按鈕

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

追蹤按鈕

data-do (必填)

必須設為 buttonFollow。

data-href (必填)

包含要追蹤的完整 Pinterest 使用者個人資料網址。

data-label (必填)

包含要在「追蹤」按鈕上顯示的文字。

嵌入式 Pin 小工具

data-do (必填)

必須設為 embedPin。

data-url (必填)

必須包含要顯示為小工具的 Pinterest 資源完整網址。

data-url="https://www.pinterest.com/pin/99360735500167749/"

替代文字

此屬性如同 <img> 標記上的 alt 屬性，指定替代文字。如果未提供，系統會從 Pinterest API 提供的 Pin 資料推斷。

驗證

請參閱 AMP 驗證器規格中的 amp-pinterest 規則。