Pinterest Pin It button with Counter (latest update)

This is the latest version of our original popular Pin It button tutorial.

This 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 in line 7 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!

Other posts on Pinterest buttons:

• Want to use your own button? Try this: Pinterest Pin It button on image hover.
• Adding this button to your existing social media buttons? Try this tutorial: Align Google +1, Tweet, Like and Pin It buttons horizontally.
• You might also want to add a Pinterest Follow button to your blog, check it out.

If you find this post useful, please pin or share.