Add Pinterest Pin it Button to Blogger (Updated)

Pinterest have launched their sharing buttons, why not have it for Blogger. “Pin it” buttons has counters and comes in three different sizes. But before you add it to Blogger posts, let’s see what you have to do first.

For those who don’t know about it yet, Pinterest allows you to organize and share your interests on a virtual pin board. It has become famous because not only this site is beautiful but also is very easy to share and manage your “pins”. You need to use it to believe it.

Step 1: Login, go to your blog’s dashboard > Template tab.

Step 2: Click “Edit HTML”, check “Expand Widget Templates” 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 on both places) add the following code after generating it.

Button options

Layout:
Horizontal
Vertical
No Count

Image Source: (?)

---

Float:
None
Left
right

Show for:
All pages except static pages
Post pages only
Every page

Preview and code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;">
<b:if cond='data:post.firstImageUrl'>
  <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.firstImageUrl + &quot;&amp;description=&quot; + data:post.title'><img border='0' src='//assets.pinterest.com/images/PinExt.png' 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'><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It' /></a>
</b:if>
</div>
</b:if>

Step 4: Preview your template whether it has been added correctly or not and then save it.

Attribution

• I have found out that the Pinterest share buttons will not work if the image file source is not mentioned. So to resolve this, you need to specify a default image source by changing http://your-image.jpg. It can be your blog’s logo or anything. If the button gets the image from the post then it’s good otherwise it will load the default one.
• Update - Now you can get the actual size of the images after clicking the Pin it button but there's a condition that it should be uploaded from Blogger post editor or should be hosted on Picasa/Google+ album.

Pinterest Follow Buttons

If you are a member of this famous site then you can add follow buttons to your blog to grow audience. It’s very simple, just visit Goodies page and select the type that you want to add, copy the code and paste it into a “HTML/JavaScript” gadget from Layout tab. Here’s an example.