Learn how to add pin it button to Blogger.

Image is always attractive medium to encourage visitors to visit the post and Pinterest Pin or Save Button on image makes the target more efficiency and also helps to bring more organic visitors from Pinterest. Because after creating pin from your Pin/Save button mouseover image, it may appear on Pinterest timeline and when a user see your post image (attached with Post URL) on Pinterest ant click on image will be redirected to your post URL.
how to add pin it button to blogger
How to add pin it button to Blogger


Summary: Why you should add Pin/Save Pinterest Button
  • To share Post Image with Post URL, Post Title, Post Snippet
  • Make Your Image Viral to Pinterest
  • Get traffic from Pinterest

How to add Pin/Save Button in Blogger

There has two major steps to add Pin/Save Button in Blogger.
  1. Customize Pin/Save Button.
  2. Install Pin/Save Button.
Customize from Widget Builder

If you have not account in Pinterest then create an account with your mail and complete your profile.  It is not required to create pin button hover image in Blogger, but it will help you to create more tools from Pinterest what will be said just after.

After completing Pinterest profile go to Pinterest Widget Builder under Tools Developer.

Here you will see many tools to generate custom ‘Save Button’, ‘Follow Button’, ‘Pin Button’, ‘Profile Widget’. For now choose ‘Save Button’ from tab and customize from the given options. You can customize button type as ‘One Image’ to enable ‘Save Button’ for one image from post, ‘Any Image’ to enable ‘Save Button’ for all images from post, ‘Image Hover’ (Recommended) to enable ‘Save Button’ when hover on any image from Post.

If you want to enlarge ‘Save Button’ then check on ‘Large’ and ‘Round’ for conversion rectangular ‘Save Button’ to circle ‘Pin Button’.

After completing customization JavaScript code will be generated automatically. You have to paste the code manually in your Blogger Template or Themes.

Customize from code:

You can customize your code from here. The default code is:

Round Pin Button:
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>
Large Save Button:
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-save="true" src="//assets.pinterest.com/js/pinit.js"></script>
The following table will help you to customize more.

Attribute Value Refers to
data-pin-hover True/False Active pin when hover the mouse on image if value is ‘true’.
data-pin-round True/False Custom pin button to round if value is ‘true’
data-pin-save True/False Activate save button if value is true otherwise round pin button.
data-pin-tall True/False Custom tall pin button if value is true

Install Pin Hover Image Button in Blogger

After customization Pin/Save Button, you are ready to install pin hover image button in Blogger and it is easy to complete. Just follow this instructions.

1. Go to Blogger Dashboard →Theme →Edit HTML and search for </body>
2. Paste the custom JavaScript code just before </body>.
2. Save your theme.

You have added Pin button and it will work if you or visitors make hover on image. If you want to install other Pinterest tools in your Blogger website, you can make it manually from here after switching specific tools from Tabs. For other tools you have to add excess code that will be given after red text

Have got this article helpful or not working? Put your comment below.