Add Pinterest Pin It button with Counter to Blogger

Pin It button allows your readers to share your posts without having to leave your blog. It pulls all available images from a post and lets them choose which image to pin. It also comes with an optional counter that displays how many times a blog post has been pinned.

Adding Pin It button to Blogger post

This Pin It button goes to the top or bottom of a post. It comes with a counter that displays how many times a blog post has been pinned.

Here are the steps:

1. Go to Template > Edit HTML.
2. Back up your template.
3. Check the Expand Widget Templates checkbox on top right of the HTML window.
4. Look for the following data tag in your HTML. This is the tag for the post content:

   <data:post.body/>

   Normally there are two instances of the tag present in your template. Locate the the first (from top) one. 
5. Paste the following code immediately below (after) it:

   <!-- Pinterest button Start by BloggerSentral.com -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
   <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
   <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
   </div> 
   <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 
   <style type='text/css'> 
   #pin-wrapper > a {background-image:none !important;}
   </style> 
   </b:if> 
   <!-- Pinterest button End -->

   
   
   Note:
   • The Pinterest script line "<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>" must occur only once in your blog. Omit this line if you’ve already had the script in your blog.
6. Button configuration
   You can customize the layout of Pin It button & counter by changing the value of data-pin-config attribute in both line 4 and 5. Refer to the table below for the available types and their settings.
   
   

   Button type	Value of data-pin-config
   	above
   	beside
   	none

7. Button placement 
   The steps above position the button on bottom left of each post. To change the button position, do the following:
   • Position it on top of post 
     Place the button code before <data:post.body/>, instead of after.
   • Button alignment 
     Change the value of text-align property in line 3: 
     Align right: set it to right; 
     Align center: set it to center;
8. Click Save.
9. View your blog. The button should appear on post pages.

Adding Pin It button as a widget

To put Pin It button outside post area e.g. in sidebar or footer, paste the following code into a HTML/Javascript gadget. The button will appear on all pages (not just post pages), but it doesn’t have a counter.

1. Go to Layout and click a Add A Gadget.
2. Select HTML/Javascript gadget.
3. Copy the following code and paste it inside the content box.

<a data-pin-config="none" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
<script src="//assets.pinterest.com/js/pinit.js"></script>

Enjoy!