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（必需）

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

data-description（必需）

包含在图钉创建表单中显示的默认描述；请仔细选择，因为许多 Pinners 如果没有意义，就会关闭表单而不进行固定。

调整保存按钮的大小

默认的小矩形按钮

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 用户个人资料 URL。

data-label（必需）

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

嵌入式 Pin 小组件

data-do（必需）

必须设置为 embedPin。

data-url（必需）

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

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

alt

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

验证

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