A Complete Guide For Blogger Beginners: Click Here

X
Sign-up for FREE daily Updates.

Feb 6, 2012

Pinterest Pin It Button For Blogger

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.

Pinterest Pin It Button For Blogger

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.

Pinterest


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.

If you have a Tip, tutorial, Idea or anything you want to share with ravisaive readers, you can send it to : ravisaive.in[a]gmail.com
If you have any questions or comments regarding this article, feel free to leave a comment with the comment function in every post below. We will follow up quickly.
If you enjoyed this article and wish to receive more great articles from us then don't forget to subscribe to our regular Email Updates to receive Latest Articles in your Mailbox.
Enter your Email to Subscribe This Blog :

11 comments:

  1. it worked as in it shows up on my blog, but when you go to pin it, it doesnt work. It doesnt grab any images.

    ReplyDelete
    Replies
    1. @ Laura - You have pinterest account? I don't have it, not able to test it.. but it should work..

      Delete
  2. Is this the advanced code for the button taken from the site? Because using this code leads to a pop up which doesn't have any image, just like the the basic and advanced code on pintrest's site.

    ReplyDelete
  3. Same problem as Emm & Laura here.

    ReplyDelete
    Replies
    1. @ Scott Monty - Sorry, I will look into this problem and fix the code.

      Delete
  4. didn;t work for site either :(
    http://studio23hudson.blogspot.com

    ReplyDelete
  5. hi, i'm not sure why the logo is not appearing. it only shows 'pin it' in normal font and not a logo + the counter. any idea how to rectify it? thanks!

    ReplyDelete
  6. I'm having the same problem as everyone else:( THank you for the simple posting instructions though cuz everywhere else it doesn't even show up:(

    ReplyDelete
  7. I was having trouble too. No screen of images to choose from. A blank image comes up and allows me to choose a category and write a description.

    ReplyDelete
  8. The code needs a snippet of image search in post,something like this:

    http://ahhh-design.com/add-pinterest-button-to-wordpress-theme/

    ReplyDelete
  9. this plugin works better and has more options: http://www.mediadevelopment.no/projects/pinit/

    ReplyDelete