Blogging Ethics

MBT Tube

December 6, 2012

Thumbnail Image Fix For Pinterest Buttons in Blogger


thumbnail issues in pinterestPinterest 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 justhorizontal pin it

<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:

vertical pinterest counter

<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:

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:

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. :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

24 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. That's really a great post ....Thanks for a great tips..

    Akhil Abraham
    Blog:All Blogging Tools

    ReplyDelete
  2. There is a question Mustafa bro that why anyone needs to fix a image cuz every post has diffrent images..

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. That's really a great post ....Thanks for a great tips..
    Click Here For Free Stuff

    ReplyDelete
  5. Thanks for the Tutorial .!!
    I will surely implement this on my new blog on Blogger plateform:)
    TricksMe - The Technology Blog

    ReplyDelete
  6. Thanks for sharing this button Muhammad Mustafa
    i really appreciate your work.

    ReplyDelete
  7. Using Pinterest PinIt button with Blogger has always been difficult, this is a good improvisation though. Avoiding Pinterst from the social sharing menu is not a good idea as Pinterest has emerged to become one of the top most used social media platforms.

    ReplyDelete
  8. That's really a great post ....Thanks for a great tips..
    www.expressivehealth.com

    ReplyDelete
  9. @blogging-heaven.com

    That is true but we often add the best image inside the intro paragraph and this plugin will automatically pick that thumbnail. That simple :)

    ReplyDelete
  10. Finally found this, because my Thumbnail Image For Pinterest is broken..Thanks for sharing this..

    ReplyDelete
  11. Thank you for posting this! I am having an issue, though. My blog has a customized template and "" does not appear at all in it. How can I still add the code? Thanks!!

    ReplyDelete
  12. See Funny Stuff http://www.gagsea.com/

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. This isn't actually working correctly. It pins tiny AND shows up on pinterest super tiny.

    ReplyDelete
  15. Hi there, I couldn't get it to work on my blog, unfortunately. I deleted my current pin it button and followed your instructions, but I couldn't see the button anywhere.

    So I reverted back to my old pin it button, which doesn't seem to work for me (Invalid image_url parameter), but it does for some of my blog readers.

    Do you mind having a look and see what I can do to use your code? http://www.stirandwhisk.com

    Thanks so much

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup