Add Pinterest Pin it Button to Blogger

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

Step 4: Preview your template whether it has been added correctly or not and then save it.<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: none;'>
<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'><img border='0' src='//assets.pinterest.com/images/PinExt.png' 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=Related Posts Widget with Image Thumbnail for Blogger&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>

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.

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.