How to Add hovering Pinterest Save button on 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 this platform, I will strongly suggest you start today and within a few months, you will see the results.
A few days back while browsing Pinterest, I noticed the featured image of the blog was pinned more often than the dedicated pin. And that is not what we expected as we create dedicated pins for each of our articles.
On carefully looking into this, it made me realize that some people may not be using the Pinterest browser extension to pin the article 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 a Pinterest hover button to images. This problem can be easily solved using a social share plugin known as Social Snap which is the social share plugin we are using on Blogging Unplugged and we highly recommend it
Besides adding Pinterest Save button to images, it offers much more features such as
- Hiding pins in blog posts
- Adding custom descriptions and titles
- Ability to add Social follow button (40+ Networks)
- Articles can be shared on over 30+ networks
- Share buttons can be customized
- Individual + Total share counters
- Ability to control how your posts look on Social Media
- Access to Analytics and tracking
- Multi-device compatibility
- Click to Tweet feature
And much more. You can see all the Social Snap features by visiting the official website. Also, if you purchase the plugin using our link you get a 30% discount.
Before we move further, it is also important to know before using Social Snap we tried using a lot of free plugins to solve this problem and most of them were either not compatible with the layout or theme or caused other problems. So we decided to go with this option.
Also, we think by adding this button or using Social Snap 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.
This task can be accomplished in 2 ways
- Using plugins
In this article, we will be discussing both ways of doing it for WordPress.org and Blogspot. In case 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)
Having said that,
The first method to implement Pinterest Save button we will discuss in this article is using plugins. It is the easiest way to implement this and is the recommended way.
How to Add Pinterest Save button to Images in WordPress
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.
How to add hovering Pinterest Save button in WordPress using plugins
If you want to add the Pinterest Hover Button using a plugin, the process is very simple and straight forward. As mentioned before, 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.
For this purpose, you can use any of the 2 plugins mentioned below depending on needs
The first plugin on the list is Social Snap and using this plugin you can add Pinterest save buttons to images in WordPress with just a few clicks.
In case you are already using a Social share plugin and want to just add this functionality and want to optimize your blog for Pinterest then I will suggest navigating to the Tasty Pins plugin section using the table of contents in the sidebar.
How to add Pinterest Save button to images in WordPress using Social Snap
To add Pinterest Save Button using Social Snap, the first thing you have to do is download the plugin.
Social Snap is a freemium plugin, which means it is available in both free and premium versions. However, this feature is only available in the premium version.
You can get the plugin using our link at $27.30 which is 30% off on the actual price. Social Snap is packed with features that will help you boost your social media reach and this is one investment that you won’t regret.
On top of that, I personally use this plugin on Blogging Unplugged. To see how it works you can share our posts. Also, its worth noting that the sharing buttons and save buttons from Social Snap enhances the look and feel of the website.
With that said,
Once you have downloaded the plugin the next step is to install it. To install a plugin you can follow our guide on How to install a WordPress plugin
Now, in the next step you need to locate the Social Snap tab in the WordPress dashboard sidebar and click it.
When you click it, it will take you to the Social Snap settings.
The next step is to click Social Sharing and locate On Media settings in it.
Once you click On Media, it will show you all the settings to add either social share or just Pinterest Save button on images in WordPress.
As you can see, the first option is to Enable on Media. If it is disabled then enable it. The next setting allows you to choose between Pinterest save button or share buttons.
Because this article is about hovering Pinterest save button on images in WordPress, we will be selecting Pinterest button. Also, after making the selection you can see the preview on the right.
If you want to display all the share buttons on the image that you have configured in the network settings, then you will have to select Share buttons. Again, you can see the preview on the right.
As you can see in the image above, I have selected 4 social media platforms in the network settings and all 4 of them are being displayed on the image.
Having said that,
The next setting helps you customize the shape of the Pinterest Save button or share buttons and you get 3 options to choose from
Select the shape that you like. I personally prefer circle as it looks a little different and also Rectangle and Rounded are the most used ones.
Once you are done selecting the shape, the next setting is button size and again you get options to choose from
Pick the size that goes well with the layout and design of your WordPress site. It is important to keep in mind while you are making these changes make sure you check the preview before saving.
After size is the visiblity settings and this option lets you control when to display the Pinterest Save button
You can choose between Always Visible and On Hover. I prefer using On Hover because on doing so Save button does not act as a distraction and when people hover mouse pointer over images, it encourages them to pin their favorite ones.
Also, just like before make sure to check the preview on the right.
The next setting on the list is Choose position. This option allows you to specify the position of Pinterest Save Button on images
You get 5 options to choose from
- Top Left
- Top Right
- Bottom Left
- Bottom Right
Pick the location based on your preference. I prefer having the Pinterest Save button on the top left and you can see how it looks by hovering over images in this post. Also if you have followed this tutorial till here make sure you follow us on Pinterest.
Just like before, once you select the position make sure you check how it appears in the preview.
Once you are done till here, the next two settings allow you to define the minimum width and height of images
Share buttons or Pinterest Save button won’t be visible on the images smaller than the specified size.
Having said that,
Using the next setting you can select where do you want to display the Pinterest Save button on your WordPress site.
And depending on your requirement you can pick from the options on which pages you want to display the buttons on.
As you can see in the above screenshot, I do not want Pinterest save button on images that are on homepage, archives and template, I only want it on Posts and Pages.
After the display on setting, the next option is for you if you have selected Share buttons instead of Pinterest button.
As you can see if I have disabled this option as I m not using social share button on images.
If you enable this setting the share buttons on images will have spacing between them. Below is a screenshot
Now, if you disable this setting , there will be no spacing.
It is important to keep in mind whichever option you select, the buttons can be customized according to the look and feel of the website by using various settings we have discussed in this section.
Also, make sure you check the preview before saving the changes.
With that said,
The next setting on the list is Hide on Mobile. As the name suggests enabling this setting will hide Pinterest Save button on mobile devices
I do not recommend enabling this option.
After hide on mobile, the next 2 settings on the list are Pinterest Image source and description source. Using these settings you can specify the source for both.
I recommend selecting Custom from post/page settings for both.
The last setting on the list is Custom colors. And as the name suggests, enabling this setting will let you choose custom colors for share and Pinterest save button on images
By default this option is disabled, to select custom colors all you have to do is enable this option and it will allow you to change
- Background color
- Icon color
- Background hover color
- Icon hover color
Pick the colors that compliment your theme style.
This setting concludes everything you need to do to enable Pinterest hover button on images using Social Snap.
Now, in case you face any difficulty with regards to the functionality of the plugin then you can look for the solution in the plugin documentation or contact the Social Snap customer support about it.
Having said that,
If you are already using a social share plugin and are not looking to migrate and just want to just add Pinterest hovering save button then the next plugin is for you.
Before we move forward, let me tell you the next plugin that we are going to use to implement Pinterest save button is an amazing WordPress plugin as it lets you optimize your pins for Pinterest SEO.
So the next plugin we are going to use to implement Pinterest Pin it button on images is Tasty Pins.
How to add hovering Pinterest Save button to Images in WordPress using Tasty Pins
In order to implement Pinterest Save button using Tasty Pins, the first step is to download the plugin.
Tasty Pins is a premium Pinterest optimization plugin and is available at $29 for a single site license. This plugin is from a company called WP Tasty and if you are a food blogger then there is a possibility that you may have come across this brand at some point in your blogging journey.
WP Tasty very well known for its 3 products
- Tasty Recipes– For creating beautiful recipe cards and implementing its schema markup.
- Tasty Links– For auto-linking to keywords to maximize your affiliate revenue.
- Tasty Pins– To optimize your Pinterest pins for improving your reach and to generate traffic from the platform.
Visit the WP Tasty official website for more details on products.
Having said that,
Why we recommend Tasty Pins for implementing this?
- This plugin will help optimize your Pins for Pinterest. You can easily set a custom description of your pins. It lets you include hashtags, keywords, and whatever is on your mind.
- 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.
- 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.
- 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
- This plugin is super fast and lightweight and can you get the help of technical support in case 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.
Once you have downloaded the plugin, the next step is to install the plugin. And for that, you can follow our guide on How to install a WordPress plugin.
After you are done installing the plugin Tasty Pins automatically adds Pinterest Save button to all images on your blog or website.
Isn’t it simple?
To check if every image is showing the hovering Pinterest pin it button, all you have to do is visit an existing post and hover your mouse pointer over the image and you will see the Pinterest save button. Below is a screenshot of how the hovering Pinterest button looks like.
After you are done adding the hovering Save button on images, the next question is
What if you don’t you want people to pin certain images? Is it possible to disable pinning of selected images?
The answer is yes, you can disable pinning of images using Tasty Pins with just a click of a button.
How to Hide hovering Pinterest Save button on Images in WordPress
Hiding Pinterest Save button or disabling pinning of images in WordPress is very easy using Tasty Pins.
And the best part is it can be done with a single click. Generally, this is executed by adding
data-pin-nopin attribute to the image.
However, using Tasty Pins this attribute is automatically implemented to the selected image without you having to worry about the code.
Here is how its done
The first step in this process is simple which is uploading the image and adding it to your post or page.
Once you are done inserting the image, the next step is to select the image block if you are using the WordPress Gutenberg editor and find the Tasty Pins settings as shown in the screenshot below.
On clicking Tasty Pins, it will reveal all the settings and in the last step all you have to do is select Disable Pinning
Once you are done till here don’t forget to click Update or Save draft to save the changes you have made
Alternatively, if you are a Classic editor user and want to implement this, then all you have to do is upload an image and when it is done uploading locate the Attachment Display settings in the Add Media popup
As you can see there is an option to Disable pinning for the selected image and all you have to do is select the option and insert the image in the post.
The final step is to save the changes you have made.
Having said that
After implementing this we took it a step further to test if we could pin these images using official Pinterest Chrome extension. And we found you cannot pin images if it is disabled for pinning using Tasty Pins.
The error we encountered was “Sorry this image can’t be saved.”
After this, I went back to the Gutenberg editor and converted the image block to HTML to see if the plugin has automatically inserted
data-pin-nopin attribute and below is the result
As you can see in the screenshot above, when you select Disable pinning it automatically adds the
data-pin-nopin attribute and a value “1” is assigned to it which means the image cannot be pinned.
These are all the settings that you need to know about when enabling the Pinterest Pin it button on images and post.
In case you are having trouble configuring the plugin or are facing any difficulty in using Tasty Pins then you can contact the WP Tasty customer support and your problem will be resolved in no time.
Having said that,
Next up in this article is
How to Add hovering Pinterest Save button to Images in WordPress manually
Before we begin this section, it is important to know implementing Pinterest Save button on images in WordPress is very simple if you are comfortable with adding code to your website.
In case you are not then I highly recommend you doing this via Social Snap or Tasty Pins. Tutorials on how to do this using both plugins have been discussed in detail above.
Having said that,
In this section we will be covering the following topics
- Creating Pinterest Save button
- Adding the code manually
- Inserting the Pinterest Pin it button code using plugin
- Disable pinning of images manually
Also, later in this article we have covered how can you add Pinterest Save button on images in Blogspot. If you are a Google Blogger or Blogspot user then you can navigate to that section using the tables of content in the sidebar.
So without further ado, lets start the tutorial
How to Create 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.
But things are different this time and the process is simple and very easy to execute.
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
There are 3 types of Save button you can create using this tool
- 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.
- 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.
- 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.
When you select the “Image hover”, you get 2 option below it
If you want a round Pinterest button on your images, pick round and to increase the size select “Large”.
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
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 Save button on images in WordPress without plugins
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.
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. Below is a screenshot for reference
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
- Verify your website on Google Search Console
- Add Google Analytics to your WordPress site
- Verify your website on Pinterest
- Verify your website on Bing Webmaster Tools
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
- Scripts in header
- Scripts in footer
Add the Pinterest Save button code in the Scripts in Footer box
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, all you have to do is locate the image that you do not want people to pin and select the image block. When you select the image block, it will show you three dots. Click on it and it will show you a menu where you need to select Edit as HTML.
When you select Edit as HTML, it will show you the code just like the screenshot below
Remember images are always wrapped in
<img> tag. When you find the
<img> tag, 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.
When you add this attribute WordPress will show you an error similar to the screenshot below.
To resolve this error you need to click Convert to HTML. On doing so your image block will permanently convert to HTML.
The final and the most important step in the process is saving the changes you have made.
If you are using the Classic editor then, when you enter the WordPress editor you will see 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
Once you find the image, 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 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.
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.
Add the code you have generated using the widget builder just above it.
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
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.
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.