将图像悬停在 AMP-Pinterest Pin It 按钮上

Question

我将 AMP-Pinterest 添加到我的 AMPed 页面。我想设置属性 data-pin-hover="true" 获取图像上的 PinIt 按钮。由于某种原因，它不起作用。

这是我目前的情况：

那是在<head>:

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

（当然还有其他 AMP 内容）

那是在<body>:

<amp-pinterest height=28 width=56
    data-do="buttonPin"
    data-url="URL"
    data-media="IMG_URL"
    data-pin-hover="true"
    data-description="DESC">
</amp-pinterest>

我还在我的 amp-img's 声明中添加了 data-pin-nopin="false" 和 data-pin-no-hover="false"（以防万一，如果它不是默认设置为 false。更多信息在这里：https://www.ampproject.org/docs/reference/components/amp-pinterest ):

<amp-img alt="NAME" src="IMG_URL" width="600"
height="400" layout="responsive"  data-pin-nopin="false"
data-pin-no-hover="false" />

但它仍然不起作用（PinIt 按钮出现 above/below amp-img）。

问题： 现在我想知道我是不是做错了什么，或者根本不支持使用 AMP-Pinterest 来悬停图像？（我找不到任何例子）。

Answer 1

遗憾的是，此选项目前不适用于 amp-pinterest（查看文档和其他示例）。但是，如果您不希望 Pin It 按钮不出现在上方或下方，您可以将其嵌入图像中，如 amp-pinterest samples:

中所示

Embed pin widget

To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.

将图像悬停在 AMP-Pinterest Pin It 按钮上

Hover an image with AMP-Pinterest's PinIt button

html

amp-html