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.
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.
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.
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:
Hover over the image below to see the Pinterest Round Button:
Regular Pinterest Save Button (rectangle)
Enter the following code if you want to use the Rectangular Pinterest Button:
Which will look like this when the user hovers over the image:
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.
Troubleshooting if the Code is not working:
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.