• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Pinterest Hover Buttons for Images In Genesis

pinterest pin it image button

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.

pinterest script

Hover over this image to see the result.

pin it hover

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:

header scripts

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:

source code

  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

Reader Interactions

Comments

  1. 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
  2. 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/

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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.