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 (必需)

包含要保存为 pin 或重新制成小部件的完全限定 URL。

data-media (必需)

包含要保存为 pin 的图像的完全限定 URL。如果 pin 最终将包含多媒体（例如 YouTube），它应该指向高分辨率缩略图。

data-description (必需)

包含 pin 创建表单中显示的默认描述；请仔细选择，因为如果 pin 不合理，许多 Pin 用户会关闭表单而不进行 pin 操作。

调整保存按钮的大小

默认的小矩形按钮

height=20 width=40

右侧带有 pin 计数的小矩形按钮，使用 data-count="beside"

height=20 width=85

顶部带有 pin 计数的小矩形按钮，使用 data-count="above"

height=50 width=40

使用 data-tall="true" 的大矩形按钮

height=28 width=56

右侧带有 pin 计数的大矩形按钮，使用 data-tall="true" 和 data-count="beside"

height=28 width=107

顶部带有 pin 计数的大矩形按钮，使用 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 用户个人资料 URL。

data-label (必需)

包含要在关注按钮上显示的文本。

嵌入式 Pin 小部件

data-do (必需)

必须设置为 embedPin。

data-url (必需)

必须包含要显示为小部件的 Pinterest 资源的完全限定 URL。

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

alt

此属性类似于 <img> 标记上的 alt 属性，用于指定替代文本。如果未提供，将从 Pinterest API 提供的 pin 数据中推断出来。

验证

请参阅 AMP 验证器规范中的 amp-pinterest 规则。