How to Add Pinterest Button in Blogger

Last time I wrote a post about Pinterest (Pinterst A new way to Socializing) Where I have cleared everything about Pinterest and now Pinterest for Blog or Website to get more traffic from it. Today I am going to share a simple way to add the Pinterest button anywhere in your blogger’s blog.

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.

There is two types of Pinterest button available for Blog or Website. The first one is “Pin It” button and the second one it “Follow button”.

How to Add Pin It button to Blogger?

A Pin It button is just like a Facebook’s Like button or Twitter’s  Tweet button or Plus One button of Google+ as it allows visitor to share your posts without leaving your blog.  Installing Pin It button on your blog will do the same task.
So here is how you can 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 <data:post.body/> tag.

Step#6. Hit Save and that’s it! Check your blog Button appears or not on your post page.

The above code will help you to add Pin It button to each blog post you make. Now if you want to put the Pint It button outside the post area like Sidebar, Footerbar or anywhere in your blogger template follow the easy step given below.

Step#1. Copy the following code give below.

<a href="http://pinterest.com/pin/create/button/?url=Your Homepage url&media=your Blog logo&description=your Blog description"class="pin-it-button" count-layout="horizontal">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/print.js"></script>

 Step#2. Paste the above link mentioned in Step#1 any where you want to show Pin It button e.g. in a sidebar or footerbar.

Step#3. Change the url - Homepage to your blog url. Change the Blog Picture to your logo of your blog and change the Description tag with your own blog description.

That's it! You have successfully add the Pin It button to your bloggers blog.

How to Add Follow Button to Blogger?

The Pinterest follow button act just like Facebook's like button and Twitter's follow button. It allows your visitors to follow your pin on Pinterest without going to Pinterest.

 To add Pinterest follow button on your blog Just add the code snippet given below wherever you want to show the follow button.

<a href="http://pinterest.com/chiranjeev/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>

 Change my username to your Pinterest username.

Hope you like this tutorial and may work for you give a try with your blog and let me know about your experience to add Pinterest button to your blog via comment box below.

Get paid to share your links!