close
Social Media

Pinterest Save Button- How to Add Pin It Hover Button to Images

When we talk about reliable sources that drive traffic to your blog, Pinterest is one of the front runners.

If you are still not using the platform, I will strongly suggest you start today and within and within a few months, you will see the results.

A few days back while browsing the Pinterest, I noticed the featured image of the blog was shared rather than the dedicated pin. It is important to keep in mind we create dedicated pins for each of our articles.

On carefully looking into this made me realize, some of the people may not be using the Pinterest browser extension to pin and when they share using the social share buttons, it pins the featured image.

To fix this problem we found a quick solution which is adding Pinterest hover button to images. Before we move further, this problem could have been solved using a social share plugin and it would have given us more functionalities such as hiding pins in blog posts and adding custom descriptions and titles.

However, we found some of them weren’t correctly working with the layout and so we decided to go with this option.

Also, we think by adding this button not only will it give the people to pin other images but also will encourage them to share more on Pinterest because whenever the mouse pointer will hover over the image a prominent Pinterest logo or Save button will appear.

Moving ahead,

This task can be accomplished in 2 ways

  1. Manually
  2. Using plugins

In this article, we will be discussing both the ways of doing it for WordPress and Blogspot. Now, if you are WordPress.com user and looking for a way to implement this then let me tell you if you are using the free plan you cannot edit the code or install plugins to add this functionality to your blog. (WordPress.com vs WordPress.org)

How to Add hovering Pinterest Save button on images

Pinterest hovering save button

Before we move further, it is important to know while we were implementing this, we came across an official plugin by Pinterest that used to help add this feature to your website.

Unfortunately, the plugin was not available for download and was close on Feb 15th, 2019.

Moral of the story- There are currently no official plugins by Pinterest that help with this. However, other plugins can help you with this and we will be discussing them later in this article.

Creating Pinterest Save Button

Whenever we use the word manually some of you may think the process may be a little complicated and not for you. As a result of this, you may directly want to jump to the part where we are implementing using the plugin.

But things are different this time and the process is simple and very easy to execute. Also, if you just want to add this feature I highly recommend using this method rather than using plugins.

To add the Pinterest button to images, the first thing you need to do is visit the Pinterest widget builder and you will see a tool just like the screenshot below

pinterest save button builder

There are 3 types of Save button you can create using this tool

  1. One Image– This button will let the people share only a particular image from the page that you choose. Yes, you heard it correctly. You need to provide the link of the image that you want to be pinned.
  2. Any Image– The next option you get is “Any Image”. Using this option you will be able to create a button that will give the people the option to choose and share from various images on your post or page.
  3. Image Hover– The last option you get is to create the hover button. With this option, you will be able to add a button on images that will only be visible when someone takes the mouse pointer on them. It can be a Pinterest logo or a rectangle Save button depending on what type of button you have implemented.

Moving forward,

When you select the “Image hover”, you get 2 option below it

  1. Round
  2. Large

If you want a round Pinterest button on your images, pick round and to increase the size select “Large”.

pinterest round save button

What if you don’t want a round button. By default, Pinterest provides you with the rectangle Pinterest Save Button. Again to increase the size you have to select “Large”. Here’s how it looks

pinterest rectangle save button

Also, when you go for the Save button rather than the Pinterest logo, you can select the language as well. If you have a blog in a language other than English. This is a great option for you.

How to Add Pinterest’s hover Save button to Images in WordPress

Adding Pinterest Save button manually on images

Once you are done making all the choices, you will get a code that you need to add to the footer of the website. You will find this code below the preview image.

code snippet for Pinterest save button

Now, in the other tab of the browser login to your WordPress dashboard. If you are comfortable adding it to the footer of your website, the process is very straight forward else you can do it via the Insert Header Footer plugin which is explained after this part.

If you are comfortable in adding the code navigate to Appearance >> Theme Editor

It will take you to a new screen within the WordPress dashboard and on the right, you can see the list of all your theme files. Search for the file with the name Theme footer or footer.php

When you find the file click it and scroll down till you find the </body>  tag. Now paste the code right above it. Here is how it should look like.

adding pinterest save button code to footer

The last thing you need to do is click Update File to save the changes and clear cache in case the changes are not reflected.

Using Insert headers and footers plugin

Like I mentioned for the people who are not comfortable adding code directly to the website can use Insert headers and footers plugin.

This is a free plugin and you can download it via this link. This plugin is also helpful if you want to add the search console verification code, analytics code or Pinterest site verification code.

Once you have downloaded and installed the plugin, you will find a new option in Settings “Insert Headers and Footers”. Click it and it will take you to the plugin settings where you will see 2 empty boxes labeled as

  1. Scripts in header
  2. Scripts in footer

Add the Pinterest Save button code in the Scripts in Footer box

insert pinterest pin it button code using header and footer

The next thing you need to do is click Save to save the changes you have made and that’s it.

You have successfully implemented the Pinterest Save button on images.

 A word of advice – When you add such code snippets to your website make sure you add them to Child theme rather than the main theme or else you will lose all the changes you have once the theme is updated.

After you are done implementing the Pinterest Pin it button on the images. The next question that comes to mind is

How to tell Pinterest not to save an Image

This thing again is pretty easy to execute and all you need to do is go to a page or a post and click Edit. It will take you to the WordPress editor.

If you are a  Gutenberg  user, click the three dots on the top right and it will show a menu and select Code editor. Once you are in the code editor you need to find the image. To find the image if you remember the name of the image, you can perform a search using it.

finding image in wordpress editor

Remember images are always wrapped in  <img>  tag. In case you do not remember the name of the image you can search for  <img  instead.

When you find the image, the next thing you need to do is add  data-pin-nopin=”true”  at the very end. Here is what it looks like after adding the tag.

adding no pin attribute

The final and the most important step in the process is saving the changes you have made.

If you are using the   Classic editor  when you enter the WordPress editor, you will find 2 options visual and text.

You need to select text and search for the image code as suggested above and here’s how the code looks like

finding image in wordpress classic editor

Once you find the all you need to do is add  data-pin-nopin=”true”  at the very end and click Update to save the changes.

How to add hovering Pinterest Save button using plugins

If you want to add the Pinterest Hover Button using a plugin, the process is very simple and straight forward. While writing this article we did a search for free plugins that will help you implement this functionality and we found some of these plugins were not updated for a long time and are not compatible with the current version of WordPress.

We do not recommend using any such plugins as using them can be a threat to your website security.

not updated pinterest plugin

For this purpose, you can use any of these 3 plugins (1 premium + 2 free) depending on what your needs are

  1. Tasty Pins
  2. Shareaholic
  3. Pin it Button on Image hover

Why we recommend Tasty Pins for implementing this?

  1. This plugin will help optimize your Pins for Pinterest. You can easily set a description of your pins. It lets you include hashtags, keywords and whatever is on your mind.
  2. If you create multiple pins for your posts then you can easily hide them using this plugin. This means additional pins won’t be visible on the page, but when the visitors click the share button they will be able to see all the pins and share whichever pin they like.
  3. Tasty Pins also has the feature where it forces the users to Pin the hidden image first rather than the visible one and this can be activated by just a click of a button.
  4. With the help of this plugin, you can also add the Pinterest hover button to all your images and it gives to the power to disable pinning of certain images
  5. This plugin is super fast and lightweight and you get the help of technical support if you are facing problems

All in all WP tasty pins is a complete package that allows you to optimize your pins to increase visibility and also you can add additional features to boost engagement on your website.

Using Shareaholic

Shareaholic is a social media plugin that you can download and use for free. It also gives you the functionality of adding hovering share buttons on images.

Before we begin, if you are already using a social media plugin and are satisfied and do not want to use Shareaholic but looking for a free plugin for the Pinterest hover button, scroll down a little we have another free plugin you can use for this purpose.

Moving forward

Download Shareaholic using this link and install it. You can follow our step by step guide on How to install a WordPress plugin.

The next thing you need to do is, go to the plugin settings and search for the option “Share buttons for images” and enable it.

shareaholic image hover social buttons

The best thing about this plugin is it lets you add other social media buttons to your images.

To add other social media buttons, click Settings and it will take you to a new screen where you can change the design settings and just below that is the option to select Services. And on the right, you can see the preview.

adding other social media buttons shareaholic

In the final step, you need to click Save Changes to update the changes you have made. And that’s it you have successfully implemented Social share buttons on images using Shareaholic.

Using Pin it Button on Image hover and post 

This is another free plugin that you can use to add the Pinterest Save button on images. This plugin will only allow you to add hovering Pinterest button on images.

You can download the plugin using this link and install it. Once you are done installing, go to the plugin settings and it will take you to a new screen where you can change the “Pin It” button settings.

pin it button plugin settings

This plugin gives you the functionality using which you can exclude pages and images from showing the Save button which is amazing.

When you are done with the settings click Save to save the changes you have made. Now visit any page on your website and see the changes.

Adding Pinterest Pin It button on Blogger

Blogger or Blogspot is a free and very popular blogging platform by Google. Adding Pinterest Save Button to images in Blogger is very similar to how it is done in WordPress manually.

The first step in the process is creating the save button which is done exactly the same way as explained earlier. You need to visit the Pinterest Save Button builder and create one for your Blogspot blog.

pinterest save button builder

After you have created the button, the next thing you need to do is log in to your Blogspot dashboard and head over to Themes >> Edit HTML

It will take you to the code editor and you need to find the  </body>  tag. For this, you can you the search function that is Ctrl + F for Windows and Cmd + F for Mac’s.

finding body tag in blogger

Add the code you have generated using the widget builder just above it.

adding pinterest save button code to blogger

After adding the code, click Save Changes and visit any page on your blog to see if the changes are reflected.

Congrats. You have successfully implemented the Pinterest Save button to the images on your Blogspot blog.

How to exclude images from pinning on Pinterest

To exclude images from being pinned on Pinterest, visit any Page or Post and click Edit. It will take you to the Blogspot editor.

In the toolbar, at the very beginning, you will see 2 options namely Compose and HTML. You need to select HTML, it will take you to the code editor where you need to search for the image to be excluded.

To exclude images you need to add  data-pin-nopin=”true”  at the very end of the code. Here is a screenshot

adding no pin attribute to blogger

After making the changes, click Update to save the changes.

And that’s all

Once you have implemented the Pinterest Save button or Pin It button, I m sure it will encourage the visitors to share your content more on Pinterest leading to a boost in traffic.

While we are on the topic of Pinterest and boosting traffic, I will suggest you apply for Pinterest Rich Pins after you are done adding the save button and learn How to hide pin images in blog posts

As you know, SEO helps in bringing traffic from search engines. To optimize your website for search engines make sure you read our On Page SEO cheat sheet.

With that said, I hope you find this tutorial helpful and are able to add the Save button. If you have any questions feel free to send them our way.

Also, don’t forget to share this article on social media and follow us there. Subscribe to our newsletter and receive the latest updates and amazing blogging deals in your inbox.

GeekyPlug
Tags : Beginner's GuidePinterestTutorial
Jasmeet Singh

The author Jasmeet Singh

Jasmeet Singh is the Blogging El Jefe at GeekyPlug. Started his career as a BPO employee and now is a full-time blogger and writes how-to guides and his personal experiences related to blogging. In his spare time, he likes to read books, listen to podcasts and play video games.

6 Comments

Leave a Response