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:

Note: This script only needs to be added to your site once. It may not work if you have added it twice. An example of this is adding the javascript to the scripts box on one or more pages and then adding it to the Header and Footer Scripts Box in your Genesis Theme Settings

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.

Not Using Genesis?

Add Pinterest Pin It Hover Button To Images In Any Theme

Comments

Fran Eleazer says

November 9, 2014 at 7:58 pm

Thanks, Brad! Exactly what I was looking for to avoid one more plugin, and it works perfectly.

Fran

Log in to Reply
Ray says

November 11, 2013 at 12:48 pm

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!

Log in to Reply
- Brad Dalton says
  
  November 11, 2013 at 1:31 pm
  
  Hello Ray
  
  You could also use CSS code to remove it from any elements and position the button on images.
  
  Log in to Reply
  - Ray says
    
    November 19, 2013 at 2:43 am
    
    I have the pinit button on my front page thumbnails, is there a way to only get it to show on post images?
    
    thanks:)
    
    Log in to Reply
    - David says
      
      November 2, 2014 at 8:48 pm
      
      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…
      
      Log in to Reply
      - Brad Dalton says
        
        November 2, 2014 at 9:01 pm
        
        Support for members only http://wpsites.net/registration/
Lindy says

November 7, 2013 at 12:36 am

Thanks Brad – that was really clear and made it super easy.

Log in to Reply
- Brad Dalton says
  
  November 7, 2013 at 2:07 am
  
  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.
  
  Log in to Reply