Site logo

[Resolved] Trouble with adding pinterest image hover button

Home Forums Support [Resolved] Trouble with adding pinterest image hover button

Home Forums Support Trouble with adding pinterest image hover button

Viewing 15 posts - 1 through 15 (of 35 total)
  • Author
    Posts
  • #723142
    Harshit

    I am unable to add pinterest image hover button using Elements. Whereever I add, it just adds pinterest button there. But, on my other site I am using Insert header and footer plugin to insert the code and the pinterest save button appears on hovering over the image. But same is not happening with GP premium, instead it just adds a save button at a static area depending on the location of hook.

    #723303
    David
    Staff
    Customer Support

    Hi there

    try adding the code to the WP_head hook

    #723460
    Harshit

    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).

    #723645
    David
    Staff
    Customer Support

    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.

    #725044
    Harshit

    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

    #725115
    David
    Staff
    Customer Support

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

    #726781
    Harshit

    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>

    #727299
    Tom
    Lead Developer
    Lead Developer

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

    #728601
    Harshit

    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.

    #729143
    Tom
    Lead Developer
    Lead Developer

    No worries! 🙂

    #731163
    Gracie

    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

    #731399
    Tom
    Lead Developer
    Lead Developer

    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?

    #731789
    Gracie

    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

    #731875
    David
    Staff
    Customer Support

    Hi there,

    do you have a link to that documentation?

    #731890
    Gracie
Viewing 15 posts - 1 through 15 (of 35 total)
  • You must be logged in to reply to this topic.