5/17/2016 NOTE: There is a newer, updated version of this blog post where I recommend a different plugin. Please view that here: How to Add a Pinterest Hover Button to WordPress Images
The developer of the plugin listed in this blog post below has stopped updating the plugin and stopped responding to support requests. So I now recommend the plugin listed in the above blog post.

 

Want to make it quick and easy for your blog visitors to Pin your images? You can – by adding a Pinterest hover button to your blog images! A “hover button” is a button that appears when you put your mouse pointer over an image. Go ahead and test it out on this image below. Clicking on the Pinterest button that appears in the top right corner will allow you to pin this image to your Pinterest boards.

Pinterest Hover Button on WordPress

Here are the instructions for WordPress self-hosted (aka wordpress.org) blogs. For Blogger blogs, see this post: How to Add a Pinterest Hover Button to your Blogger Images.

Add a Pinterest Hover Button to WordPress:

  1. Install and activate the “Pinterest Pin It Button for Images” WordPress plugin.
  2. To change any of the plugin’s default settings: select Settings > Pinterest Pin It in your WordPress Dashboard. I changed my content width to match the width of the area in my blog where my article content goes (excluding my sidebar). You can also select which types of pages and posts you want the Pinterest Hover button to appear on:
    Wordpress Pinterest Hover Button

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

Use a Custom Pin It Image:

  1. Download a Pinterest Icon to your computer or create your own. (You can get Free Pinterest Buttons for your Blog here – and new winter colors here!)
  2. Upload that image to the plugin’s directory on your blog:
    /wp-content/plugins/pinterest-pin-it-button-for-images/
  3. Now you need to edit the plugin’s code so that it uses your custom image. In your WordPress Dashboard, select Plugins > Editor.
  4. In the top right corner, select the “Pinterest Pin It Button for Images” plugin from the drop-down list and then click the Select button. Then click on the pinterest-pin-it-button-for-images/ppibfi_pinterest.css file.
    Custom Image Pin It Hover for WordPress
  5. On the left side of your screen, you will now see the code for that file. Scroll down until you find this line of code:
    .pibfi_pinterest .xc_pin {
  6. Change the width and height values to match the width and height of your custom image. (Mine is 57 x 57.) And change the background-image file name from “ppibfi_button.png” to the file name of your custom image. (Mine is dk-pinterest-hover.png):
    Custom Pin It Hover Image in WordPress
  7. Click the “Update File” button to save your changes.

 Change the Position of the Pin It Button:

  1. You can also change the position of the hover image. Follow steps #3-5 above for using a custom Pin It image.
  2. Edit the top and margin-left values. By default the hover image will appear 5px down and 1px over to the left of the top right corner of your blog image. Increasing the top value will move the hover image down further and decreasing the margin-left value will move the hover image further to the left. (I changed my top value to 15px and my margin-left value to -15px.)
    Move Pin It Hover Button in WordPress
  3. Click the “Update File” button to save your changes.