Search code examples
htmlamp-html

Hover an image with AMP-Pinterest's PinIt button


I added AMP-Pinterest to my AMPed page. I'd like to set the propery data-pin-hover="true" to get the PinIt button on the image. For some reason it doesn't work.

Here is what I have so far:

That's in <head>:

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

(and of course other AMP stuff)

That's in <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>

I also added data-pin-nopin="false" and data-pin-no-hover="false" to my amp-img's declaration (just in case, if it's not by default set to false. More info here: 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" />

But it still doesn't work (the PinIt button shows up above/below amp-img).

Question: Now I'm wondering if I did something wrong or it's simply not supported using AMP-Pinterest to hover an image? (I can't find any example).


Solution

  • Unfortunately, this option doesn't to be available for amp-pinterest at the moment (going through the docs and other examples). However, if you don't prefer for the Pin It button to not appear above or below, you can instead have it embedded in the image, as seen in the 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.