HOW TO ADD A PINTEREST HOVER BUTTON

Want an easy (and stylish!) way to add a Pinterest “Pin It” hover button to your WordPress images? A “hover button” is a button that appears when you put your mouse over an image. Go ahead and test it out on this image below. Clicking on the pink Pinterest button that appears in the middle of the image will let you pin this image to your Pinterest boards. Cool, right? Well keep on reading to find out how to get this snazzy Pinterest Hover Button on your WordPress images too!

Note #1: These instructions are for Wordpress self-hosted (wordpress.org) websites and blogs — not for WordPress.com blogs. For Blogger blogs, see this post: How to Add a Pinterest Hover Button to your Blogger Images.

Note #2: in 2013 I wrote another blog post on this topic and recommended a different WordPress plugin; however the developer of that plugin has stopped updating the plugin and stopped responding to support requests. So I switched to this plugin for my website – and for my clients’ websites – and I have been very happy with it ever since.

How to Add a Pinterest Hover Button to WordPress

  1. Install and activate the “jQuery Pin It Button For Images” WordPress plugin. (In your WordPress dashboard, go to Plugins > Add New. Search for “jQuery Pin It Button For Images.”  Click the “Install Now” button to install the plugin. Then click the link to Activate it.)
    Pinterest Hover Button WordPress Plugin
  2. To change any of the plugin’s default settings: select Settings > jQuery Pin It Button For Images in your WordPress Dashboard. I leave most of the settings at their default values. However there are a few things that I do change – and I have mentioned them below.

Now view one of your blog posts and you should see a gray rectangle-shaped Pin It button appear on top of your images when you put your mouse over an image. You can call it quits now — or we can customize things a bit…

Disable the Pinterest Hover Button on Small Images

Disable the Pinterest button from appearing on small images such as thumbnails, social media icons, and small images in your sidebar. The easiest way to do this is to set the minimum resolution (size) in the plugin settings: select Settings > jQuery Pin It Button For Images in your WordPress Dashboard. Images that are smaller than that size won’t have the Pin it hover button appear. What size should you use for your minimum resolution setting? I use 300 x 300. You can choose a size that work for your website; but I would not recommend going smaller than 200 x 200.

Disable the Pinterest Hover Button on Small Images

 

Set the Default Pinterest Pin Description

You can choose what the default description will be when someone pins one of your images. In your WordPress Dashboard, select Settings > jQuery Pin It Button For Images and then click on the Visual tab. The default Description source is the Page Title (or Post title for blogs). However I find that redundant, especially if you have Pinterest Rich Pins setup (since the page title and description will automatically appear on your pin anyway). If you’re good about entering in Alt text and/or Descriptions for your images when you upload them to WordPress (which is so good for SEO – so do that!), choose one of those options for your Description source. Otherwise if you don’t enter in image alt text or descriptions (naughty naughty!) — choose the Page Title.

Pinterest Hover Button Pin Description

 

Always Link to the Individual Page or Blog Post

Have you ever clicked on a pin in Pinterest and have it go to the website’s home page or to another main page of the blog, instead of directly to the article that the pin was about? Annoying, right? Well you don’t want your website visitors to go through that – so make sure your pins are always linking to the specific article (blog post or web page) – even if your visitors are pinning the article from your main blog page, blog category page, or blog archive page. To do this, select Settings > jQuery Pin It Button For Images in your WordPress Dashboard. Then click on the Visual tab. Check the option to “Always link to individual post page”.

Pinterest Hover Button Link to Individual Post

 

Customize Your Pin It Hover Button:

In your WordPress Dashboard, select Settings > jQuery Pin It Button For Images and then click on the Visual tab. Choose your desired settings for the following:

Transparency Value: When someone puts their mouse over your image to pin it, the image can fade a bit, making your Pin It button stand out more. Play around with different values for this setting to see what you like. Or you can choose 0.00 to have no fading effect added to your image.

Custom “Pin It” Button: Add some style to your Pin It hover button! Create your own custom button — or you can download my Free Pinterest Buttons for your Blog. Check the box to “Use custom image” and then click the button to upload your custom image. You also should enter in the height and width of your custom button.

“Pin It” Button Position: Choose where you want your Pin It hover button to appear on your image. You can choose the middle of the image (like I do) – or you can choose any of the 4 corners. If you choose one of the corners, you can also add some extra spacing between the edge of your button and the edge of your image by entering in values in the “Pin It” button Images boxes.

Pinterest Hover Button: Use a Custom Image

 

To find out more info about how to use this plugin, you can read the plugin developer’s documentation.

Now get going and add a Pinterest hover button to your WordPress images! Then leave a comment below with a link to your blog so we can check out how much you rock!

Don’t forget it… Pin it! Pin it to Pinterest