As you are unfamiliar to Printrest,It is a pinboard-styled social photo sharing website. The service allows users to create and manage theme-based image collections.The pinned image is linked to the original webpage or blog post location, giving users the chance to visit the source directly.A pin it button is same as facebook like and twitter tweet it button.As it allows users to share your posts without leaving your blog.It also displays how many times a post has been shared.Now let's see how to add this Printerest Pin It button to blogger.


Choosing Pinterest Button


Here I am giving all types of Pin It button first choose any one of them and proceed to installation.

1. Pin it Horizontal Button



<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(&quot;script&quot;);
        s.type = &quot;text/javascript&quot;;
        s.async = true;
        if (window.location.protocol == &quot;https:&quot;)
            s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
        else
            s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
        var x = document.getElementsByTagName(&quot;script&quot;)[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent(&quot;onload&quot;, async_load);
    else
        window.addEventListener(&quot;load&quot;, async_load, false);
})();
</script>
<!-- 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 -->


2. Pin it Vertical Button



<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(&quot;script&quot;);
        s.type = &quot;text/javascript&quot;;
        s.async = true;
        if (window.location.protocol == &quot;https:&quot;)
            s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
        else
            s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
        var x = document.getElementsByTagName(&quot;script&quot;)[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent(&quot;onload&quot;, async_load);
    else
        window.addEventListener(&quot;load&quot;, async_load, false);
})();
</script>
<!-- Pinterest button Start -->
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
</div>
<!-- Pinterest button End -->


3. Pin it Button Without Count



<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(&quot;script&quot;);
        s.type = &quot;text/javascript&quot;;
        s.async = true;
        if (window.location.protocol == &quot;https:&quot;)
            s.src = &quot;https://assets.pinterest.com/js/pinit.js&quot;;
        else
            s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
        var x = document.getElementsByTagName(&quot;script&quot;)[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent(&quot;onload&quot;, async_load);
    else
        window.addEventListener(&quot;load&quot;, async_load, false);
})();
</script>
<!-- Pinterest button Start -->
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
</div>
<!-- Pinterest button End -->


Installing The Button On Blogger


Adding Buttons At The End Of Post


If you want to add these buttons below the complete post(after the jump break, if any) then paste any one of the button code after the below code

<div class='post-footer'>


If you want to add any of the above buttons below the post title then paste below code after it.

<div class='post-header-line-1'/>


OR

Adding Buttons Below Post Titles


<div class='post-header'>

Now save your template and you are done....
If you found this post helpful then kindly Pin It....

Pin It

Post a Comment

  1. How to make it appear floating button Rahul? thanks in advance

    ReplyDelete
  2. HOW TO COUNT OF THE PIN IT TO STORE IN VARIABLE?

    ReplyDelete
  3. Hi, for some reason, the button shows up ok with the counter, but I'm unable to pin anything i.e. an image to be pinned does not show up at all when the "pin it" button is clicked.

    Please help?

    ReplyDelete
  4. i got it loaded and it open when clicked how do i make it grab an image? it just shows a blank image now :(

    ReplyDelete
  5. Now not even the counter shows up! help please!

    ReplyDelete
  6. Hi,
    I have the same problem as Chrissy. I've added the button in the right place....because it shows up. But when I attempt to pin something the gray Pinterest box shows up and no image...just a yellow box. Any suggestions?

    ReplyDelete
  7. I pasted the code, but there's no button. Is there a workaround?

    ReplyDelete
  8. web counter Enormous website along with attractive and exclusive materials whatever you need.

    ReplyDelete
  9. Just come across being searching it on google.
    I need this not for my blog but for a website.
    Still no fortune to get it work.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top