12 Apr 2012

Add Pinterest Pin it Button to Blogger

Pinterest, a social sharing site, which allows you to organize and share (pin) your interests, has become very famous as this site is more simple, beautiful and organizable. They also have launched their sharing buttons known as “Pin it”.Pinterest share button has counter and comes in different sizes. But before you add it, let’s see what you have to do first.


Step 1: Log in to Blogger, go to your blog’s dashboard > Template tab.

Step 2: Check “Expand Template Widget” and find </body>. Before it add the below script:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
Step 3: Find <data:post.body/> and before/after it (or both) add any one of the following codes: 


Horizontal Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>


Vertical Count
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>
If you don’t want any count for the Pinterest share buttons then add the following code: 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=http://your-image.jpg&amp;description=&quot; + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>
Step 4: Save your template. It’s done.


Enjoy ! 

4 comments:

  1. Thanks for this tutorial!
    HI , I added this part of the code to enable pinning , but it only works halfway. Each time i try to pin it, the thumbnail image is too small and I get the 'Image too small error' on pinterest.
    The actual image on the website is well over 500px500px.
    Is there some place where i can actually increase the thumbnail image size?
    Thx so much! Would really appreciate a reply.

    ReplyDelete
  2. Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

    ReplyDelete
  3. Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

    ReplyDelete
  4. Pinwords is a really basic tool, but it̢۪s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you

    create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

    ReplyDelete