Adding Pinterest Pin It Button (With Counter) 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.  The pinned image is linked to the original webpage or blog post location, 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. It also displays how many times a blog post has been shared.

Unlike a typical Pin It button, our version doesn’t pre-select an image from a post; it displays all available images and lets your readers choose the image they like to pin.

(Update: If you want to add this button to your existing social media buttons at the bottom/top of post, please follow this tutorial: Align Google +1, Tweet, Like and Pin It buttons horizontally.)

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. 1	<data:post.body/>

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

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<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>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest button End -->

This code is made up of a combination of two different codes -Pinterest Pin It button and Pinterest bookmarklet. Why a combination? Because the Pin It button code (that’s supposed to do the job) provided by Pinterest simply doesn’t work, at least not on Blogger, for now.
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



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;


Click Save.
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.




<a href='javascript:void(run_pinmarklet1())'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uRsuvdWG_murQH7grfZCeiuIvaYDsgWmLe-ROIpc8c7IfhJZ-Jfg-mk3DYlW1tNWBWfvdBJwFJWx__sgTvg2yTJpc9t0fLwiWpNUxFhpuK060vPHyKHSf4yjLpvprfI27Y7WRJuDBBZo/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
  var e=document.createElement('script');
  e.setAttribute('type','text/javascript');
  e.setAttribute('charset','UTF-8');
  e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
  document.body.appendChild(e);
}
</script>

Enjoy!



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.