Add Pinterest Hover Buttons for Images In Genesis

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:

1. If its not in your source code, its not loading so you have a problem.
2. 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.

Not Using Genesis?

• Add Pinterest Pin It Hover Button To Images In Any Theme