Thumbnail Image Fix For Pinterest Buttons in Blogger

Pinterest as you all know is the new social media network introduced just this year that has slowly attracted fair amount of traffic and is grooming daily thanks to publishers and community members. We introduced various codes on how to add a Pinterest pin it button to your webpages but due to server side errors the JavaScript code introduced by pinterest for Firefox and Chrome is not functioning for the past one month. So We fetched a new code using AddThis servers and designed a custom Pinterest counter that works just like the original pinterest button. I also managed to write a simple XHTML code for the original pinterest button which will fetch the correct thumbnail image out of your BlogSpot blog and will work just fine without a description or blank thumbnail image problem. Lets check these fresh codes which works just fine. I will also update the old tutorials today.

Live Demo

 

The Original Pinterest Pin it button

The following code will work just fine on any blogger blog.

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title +  &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Here are some regions to give you an idea of how the code works:

• data:post.url will fetch the Page Link/URL - Retrieved using url variable
• data:post.title will fetch Blog post title - Retrieved using description variable
• data:post.thumbnailUrl will fetch a 72 x 72 image thumbnail of your post. The is the data attributed provided by blogger which is often used while displaying the Mobile version of your blog on smartphones or iPad or Samsung Galaxy Tablet. The image surely looks small but this is the only allowed attribute we can use at this moment. I tried a lot to write a script that may force increase the size but the codes were not accepted by strict xml rules of blogger editor. Therefore this method will only display a 72x72 pixel wide image unlike the second method which displays large thumbnails. - Retrieved using the media variable

Enough of code syntax and literature , time to add it to blogger. Kindly link back to this page if you wish to share the above code with your readers. This code is released first time, therefore an attribution link would be enough a favour.  Follow these steps:

1. Go To Blogger > Template
2. Backup/restore your template
3. Click the Edit HTML button
4. Click Proceed
5. Click the box "Expand Widget Templates"
6. Search for this code:

<data:post.body/>

  Now if you wish to add the pinterest button below blog post titles then paste the code in step#7 just above the code in step#6 else if you wish to display the button at the bottom of posts then add the code in step#7 just below step#6 code.

      7.  Choose the code for your preferred size button and paste it inside your template as guided in step#6

For horizontal counter Use this code:

Paste the code below just

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

</b:if>

For Vertical counter Use this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

</b:if>

     8.   Save your template and all done!

Custom Pin it Counter

For that kindly proceed to this tutorial:

• Read: Floating Social Media Sharing Widget

New to Pinterest?

If you have no idea what pinterest is and how to pull out traffic from it to your blog then please read the following delicious tutorials:

• Read: How to promote your blogs with Pinterest?
• Read: Pinterest Step by Step Guide

Need Help?

If you encountered any problem during installation of the codes then feel free to let me know. I just hope this code and the previous update may help you with the best pinterest experience ever. People will surely now repin your posts once they see fancy thumbnails appearing in your board. Peace and blessings buddies. :)