Enable Pin Hover On Specific Posts/Pages
In this tutorial, i’ll provide a small script you can simply paste into your script box on any edit post or page screen.
The javascript will enable the new Pinterest pin it hover buttons to appear on all images on the specific page or post.
Here’s the code:
All you need to do is paste it into the Scripts box on any edit screen in Genesis.
Hover over this image to see the result.
Enable Pin Hover Site Wide
You can also use the script site wide so all your images display a pin it button on hover.
Simply go to Genesis > Theme Settings > Header and Footer Scripts and paste the script into the Header box.
Here’s the script i used on this site:
And here’s the box its pasted into:
Image Hover Button Not Displaying After Installation?
Pinterest do offer support so you can contact them if your buttons aren’t displaying otherwise leave a comment below and i’ll take a look for you.
One way to find out if the code is working is to right click a page or post which includes an image and view the source code to find the script.
Here’s what it looks like in the source code of this post:
- If its not in your source code, its not loading so you have a problem.
- If your see more than 2 url’s to Pinterest, then its being loaded twice and may not work properly.
Prefer a Plugin?
Non coders may prefer to simply install the Pinterest Pin It Button plugin.
Coders may prefer to customize further using the resources on the Pinterest Developers site.
Thanks, Brad! Exactly what I was looking for to avoid one more plugin, and it works perfectly.
Fran
Thanks so much for this! I was using a plug in to achieve this but it was adding a pin it button on the related posts thumbnails. I was searching on how to remove it when I came across your post, now I have what I want…with one less plug in! Thanks!
Hello Ray
You could also use CSS code to remove it from any elements and position the button on images.
I have the pinit button on my front page thumbnails, is there a way to only get it to show on post images?
thanks:)
Also curious about this. I’ve added the script to my site, and it applies the PinIt button to each image in my posts.
But it also applies it to the Pinterest Share button in the footer that’s added by the WP Font Awesome Share Icons plugin…
Support for members only http://wpsites.net/registration/
Thanks Brad – that was really clear and made it super easy.
Hello Lindy.
Glad you found it easy.
I know the buttons to display in different positions depending on which browser is used.
Shouldn’t be difficult to reposition them for each browser if needed.