Step-by-Step Easy Tutorial Add the Pinterest Hover Button

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

Pinterest is an excellent source of traffic for new and experienced bloggers. But, you need to put in an effort to make click worthy, tall vertical pins with crisp text overlay that is easy to read on mobile, as most users are on mobile these days. 80-90% of our daily traffic on our main blog is from mobile viewers coming from Pinterest.

One excellent way to prompt your readers to share your posts on Pinterest and gain more traffic is to enable the Pinterest button on your images. If you would like to add the Pinterest Hover, Save Button to your Images. There is a very easy method you can follow.

Adding the Pinterest Hover Button with a Plugin

JQuery Pin It Button for Images is a WordPress plugin that works quite well to add the Pinterest Pin It button to your images.

Once the plugin is installed, the default behavior is to add the Pin it button to all images that do not have the class set as nopin. This is different from the nopin="nopin" or the data-pin-nopin="true". So for images you don’t want pinned see this example of adding the class nopin to the custom HTML of the image. In Gutenberg you’ll need to switch the image from an image block to a custom html block.

<img src="https://wpbloggerassist.com/my_image.jpg" alt="Selecting the Gutenberg custom html block" width="247" height="300" class="nopin aligncenter size-medium wp-image-69" data-pin-nopin="true" />

 

That makes it very easy using the jQuery Pin It button to have control on which images the Pin It Button appears.
 
 

Adding the Pinterest Hover Button using Code

One word of caution before we begin. When you enable the Pinterest Hover feature, all images on your post will be pinnable – even if you have set data-pin-nopin and/or data-pin-no-hover. So if you have images that you do not want pinned on your post, like family photos etc. You can possibly work around it by setting the specific data-pin-media to the image you want pinned instead (instructions below).

First if you are using the Classic Editor, switch to the “Text” view and scroll to the bottom of your post to enter the code.

If you are using Gutenberg add a custom html block to the bottom of your post.
Selecting the Gutenberg custom html block

Make sure you only add the code once per post/page, you can add it at the bottom of the post or in the footer.

If you already have a Pinterest Button Set

You may only need this code added to your post.

<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
</script>

Small Round Pinterest Save Button

Then enter this code for the small round Pinterest Save Button, this is the option I have enabled on this page:

<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true"
data-pin-round="true"></script>

Hover over the image below to see the Pinterest Round Button:
Image show text easy step by step guide to the Pinterest Save Button with a small image to 2 pins

OR

Regular Pinterest Save Button (rectangle)

Enter the following code if you want to use the Rectangular Pinterest Button:

<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true"
></script>

Which will look like this when the user hovers over the image:
Image show text easy step by step guide to the Pinterest Save Button with a small image to 2 pins

This code is based off the Pinterest Developer code from this post here.

An advanced option is to add the Pinterest Save Button to all the images on your site, you could edit Child Theme footer.php file and add the code right before the closing <body> tag. Note: you will need to remove the code from any posts/pages if you have previously added it, otherwise the code will be doubled up on the page.

I do not recommend to add the hover feature via your Child theme or to a header/footer plugin, yes it would be easy to enter the code once and its done. But since the code enables any/all of your images, your themes images, external images you may have permission to show on your page but not pin to Pinterest, will all be able to be saved to Pinterest. You lose the control to prevent specific images from being pinned. The only option you have is to set a different image to be pinned (instructions below).

Customizations You Can Apply

Set a different image to be pinned with a custom description

If you want a different image and description to be pinned when the Pinterest Button is clicked add the following to your <img> tag.

<img src="https://yourdomain.com/image-you-don't-want-pinned.jpg" alt="your alt text for visually impaired, with keywords if it fits for SEO" width="247" height="300" class="aligncenter size-medium wp-image-69" data-pin-media="https://example.com/your-tall-vertical-pin-image.jpg" data-pin-description="Your Custom Pinterest Description with #hashtags"/>

 

 

Troubleshooting if the Code is not working:

My Minify plugin was breaking the code, so I had to exclude the file “//assets.pinterest.com/js/pinit.js” from my plugin, I am using the JCH Optimize Pro to minify styles and javascript and optimize images. So if the code above is not working for you, you may need to exclude the file as well. If you need instructions on excluding files from the minify plugin, please leave a comment below.

If you are not seeing your changes, try:

  • clear your cache plugin
  • clear host cache *if you are using feature
  • clear your browser cache

One tip for your browser is that you can hold down the “Shift” key on your keyboard and click refresh, to get the latest version of the page.

If you do have any questions or other tips that might help others, please share it in the comments.

Thanks for taking the time to read this post.

Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

Leave a Reply

Your email address will not be published. Required fields are marked *