Ravi Saive: A Technology Blog For Newbies

If you have a blog or website you probably have added social sharing buttons to your posts so that your readers can easily “Like,” “Plus One,” “Retweet,” “Digg,” etc your posts. Similarly, Pinterest does the same thing, but have you ever heard about Pinterest Pin It Button? NO!. Well, let me give you a brief description about Pinterest.

What Is Pinterest ?

Pinterest is an online photo sharing website where you can create, share and manage online image collections found over the web by “pinning” them online. It allows you to create virtual pinboards to categorize uploaded images. The images you uploaded to your pinboard are called as "pins" and Pinterest allows other people to follow your pinboard to get pin updates and "repin" them, plus you can explore pinboards created by other people. Exploring other people pinboards is a best way to discover new things and get inspiration from them. People creating pinboards to decorate their homes and plan their weddings.



Now coming to main point, Pinterest Pin It Button is similar to Facebook Like or Twitter Tweet button, as it allows users to easily share (pinning) your content without leaving your blog. I think this is another best way to drive more traffic to your blog. So, follow below installation steps to place this Pin It button in your blog posts for easy sharing.

Add Pinterest Pin It Button To Blog

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".

<data:post.body/>

5. Copy and Paste the below code immediately After <data:post.body/>.

<b:if cond='data:post.isFirstPost'>
<!-- Pinterest script Start -->
<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script> 
<!-- Pinterest script End -->
</b:if> 

<!-- Pinterest button Start --> 
<div style='text-align:left;padding:5px 5px 5px 0;'>
<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>
</div> 
<!-- Pinterest button End -->

6. Make following changes.

1. Button Positioning : If you would like to place button on top of post then paste above code Before <data:post.body/>.
2. Button Type : To customize button style change the value count-layout to "vertical", "horizontal" or "none" whatever you like.
3. Button Alignment : To change button alignment from left to right. Change value text-align
4. Button Visibility : To display the button only on post pages, remove the conditional tag in line as shown in red color.

7. Save your template and preview it.