How to Add Pinterest Button To Blogger Post

Yesterday, I accepted Pinterest invitation. Pinterest is the new way of socializing where you can share any interest thing you find on internet, including blog post, twitter, or facebook.

Then I want to put Pinterest button on my blog post so it easier for sharing to Pinterest board. Thanks to LetMeClear for How to Add Pinterest Button To Blogger Post tutorial.

Since, Pinning a pin by a “Pin it” button A description and original link location are added to the pinned image on the board. That gives you more chance to visit the source directly. Pin It button allows visitor to share your posts without leaving your blog.

If you're using Wordpress blog, there's many Pinterest button plugin similar with another bookmarks button plugin. If you're using Blogspot/Blogger blog, this is step to add Pin It button to your each and every blog post.

Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.

<data:post.body/>

Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- 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:22px; 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 -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before  tag.

Step#6. Hit Save and check your blog Button appears or not on your post page.