Trouble with adding pinterest image hover button

Hi there

try adding the code to the WP_head hook

I added in the head but the button just appears over header but not hovering over images like at my other site (not using GP).

So try one of the Hooks listed here in the visual guide:

https://docs.generatepress.com/article/hooks-visual-guide/

The after_content_hook could be used on the single post and the archives.

Still shows the button at a fixed location but it should show over the left side of the image when you hover over the image as it shows in my other blog. I have attached screenshot.
https://ibb.co/cTPEXq

Can you share the code you are using so i can see what its meant to be doing.

We got to use two codes, 1st one <script async defer src="//assets.pinterest.com/js/pinit.js"></script>

and 2nd one <a data-pin-do="buttonBookmark" data-pin-tall="true" href="https://www.pinterest.com/pin/create/button/"></a>

Are there instructions somewhere for where to place the second snippet of code?

Sorry for the delayed response. I went back to developers console and checked the code. Apparently, the issue was I was entering the code for adding button, not for image hover. I was adding the wrong code all the time, just after entering the correct code, the button displayed as it should.

Thanks a lot for all the help and sorry for the unnecessary question.

No worries! :)

Hi Harshit & Tom,

Hope you guys are well.

I'm having exactly the same trouble at the moment but haven't managed to work it out :(

Harshit (presuming you can see this?!), is it possible for you to let me know how you've managed to make it work?

1 - where do the two separate bits of code go? I've made two hooks and tried the code in all the different areas...
2 - In some cases the button would show up, but it wasn't on an image, and it wasn't hovering.

If you could share your code/locations, I would be so grateful!

Many thanks,
Gracie

Hey Gracie,

It seems Harshit was entering the wrong code provided by Pinterest.

Can you make sure the code you're getting from them is for the image hover functionality?

Hey Tom,

Thanks for your reply - I think I'm using the right code- I'm just not sure where I'm meant to be putting it to make it work...

These are the two pieces of code I'm using:

The first one is provided by Pinterest and this is the note they give you: "Don't forget to include pinit.js once per page, just before the closing </BODY> tag"

<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>

The second piece of code is below but again, I'm not sure where to put it. This is the note Pinterest give you: "Copy and paste this code onto your page where you want your add-on to appear"

<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>

I've currently got them both (in separate hooks) under "after_header" and in "entire site" but I've tried different variations without success.

Any tips? Am I being really stupid?!

Thanks,
Gracie

Hi there,

do you have a link to that documentation?

Hi David,

Here are the pages I'm using...

https://developers.pinterest.com/docs/widgets/save/?

https://developers.pinterest.com/tools/widget-builder/?buttonType=imageHover&round=false&tall=false&language=en