How To Add Pinterest Pin It Button To Blogger Post

In case you are unfamiliar, Pinterest is an online pinboard that allows users to share images they find over the web -by “pinning” them on their boards.  A description and original link location are added to the pinned image, giving users the chance to visit the source directly.

A Pin It button is what Like button is to Facebook or Tweet button is to Twitter, as it allows users to share your posts without having to leave your blog. Installing it on each post will surely lets readers pin your posts with ease.

Now let’s proceed with the tutorial:

1. Go to Design > Edit HTML  (New interface: 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:

   1	<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:
   view sourceprint?

   01	<!-- Pinterest Start -->

   02	<b:if cond='data:blog.pageType == &quot;item&quot;'>

   03	<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>

   04	<a class='pin-it-button' count-layout='horizontal'expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

   05	<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>

   06

   </div>

   07	<script src='http://assets.pinterest.com/js/pinit.js'type='text/javascript'/>

   08	<script type='text/javascript'>

   09	function run_pinmarklet() {

   10	var e=document.createElement('script');

   11	e.setAttribute('type','text/javascript');

   12	e.setAttribute('charset','UTF-8');

   13	e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);

   14	document.body.appendChild(e);

   15

   }

   16

   </script>

   17

   </b:if>

   18	<!-- Pinterest button End -->

   This code is made up of a combination of two different codes -Pinterest’s bookmarklet and Pin It button.
6. Button configuration
   You can customize the layout of Pin It button & counter by changing the value of count-layout attribute in line 4. Refer to the table below for the available types and their settings.
   
   

   Button type	count-layout value	margin-left (in line 5) value
   	vertical	-46px
   	horizontal	-93px
   	none	-46px

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.

Update:

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 comes without the counter.

view sourceprint?

01

<a href='javascript:void(run_pinmarklet())'><imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWRAR8-aedn4zTykfmENTEHOZxkc4Mg3Xt6IOuKCq5PcYiB_hAonDLg3OI-GR7f_4Gn8UEMqGYBwtrnBm0j0opKf_sd1dWe6Q5DUxTpkLiYtdTOEgK9oxVkdJIs49UhaagNjUCA-s6L9Jw/s1600/pinmask2.png"style='margin:0; padding:0; border:none;'/></a>

02	<script type='text/javascript'>

03	function run_pinmarklet() {

04	var e=document.createElement('script');

05	e.setAttribute('type','text/javascript');

06	e.setAttribute('charset','UTF-8');

07	e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);

08	document.body.appendChild(e);

09

}

10

</script>

Enjoy!