Add Pinterest Pin It Button (With Counter) To Blogger Post

For your better understanding, Pinterest is an online pinboard-look site that allows users to share images by “pinning” them on their boards. The shared images are linked to the original source, giving users the chance to visit the source by click on image.Pinterest launched as a closed beta in March 2010.Nine months after launch Pinterest had 10,000 users.

Pinterest website is very popular in these days.Bloggers can get a lot of traffic for their blogs.You can add Pin it button on your blog for sharing purpose as like Facebook like and twitter tweet button.A Pin It button allows users to share your posts without having to leave your blog post. It also counts how many times a blog post has been shared on pinterest.In this tutorial you will learn "How to Add Pinterest Pin It Button (With Counter) To Blogger Post".

See Also - How To Increase Your Google+ Circles

Add Pinterest Pin It Button

• Go to Blogger Dashboard > Design > Edit HTML  (New Interface: Template > Edit HTML).
• First Of All Back Up Your Template.
• Check the Expand Widget Templates Checkbox
• Press (Ctrl+F) and Find Below Code In Template HTML

<data:post.body/>

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

<!-- Pinterest Button 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 -->

• Button Configuration - You can customize the layout of Pin It button & counter by changing the value of count-layout (Yellow). But after change the count-layout also change margin-left (Yellow) value.For example count-layout value - horizontal and margin-left value - -93px.

Button Style	count-layout value	margin-left value
	vertical	-46px
	horizontal	-93px
	none	-46px

Button Placement 

Please follow the given below steps to change the position of button in blog post:

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 red color mentioned above in code.
• Align right: set it to right; 
• Align center: set it to center;

Now, save your template and visit your blog, you will see pin it button on blog posts.If you need any help,ask via comments.If you find this post useful, please pin or share.