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 创建表单中的默认描述；请谨慎选择，因为如果描述不合理，许多用户会直接关闭表单而不保存。

调整保存按钮大小

默认小型矩形按钮

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 规则。