Recent posts with thumbnails

Show all posts or label specific posts from a blogger blog in a HTML/Javascript widget.

By default Blogger doesn't provide any recent posts or list of posts tagged under certain labels widget. There are many third party widgets - but personally I don't like using them as most of them are not much customizable to fit into my Blogger template. So I tried to figure-out how things happen and learn't a bit Javascript and Blogger JSON api. They are all needed to implement something like Popular Posts widget or Blogroll widget for Blogger.

Here in this small code I am going to show you how you can list your recent posts or posts related to a specific label - even you can extend this script to show posts with more than one labels like posts tagged under 'Javascript' and 'Tutorial'. Let's see how this can be done.

Obviously we are going to put everything inside a HTML/Javascript widget. From your Blogger layout add a HTML/Javascript widget where you want the list of posts should be displayed. Then inside the code editor paste the following code.
<div id='listemup'>Loading...</div>
<script type="text/javascript">
function listemall(json){
 var listhis='<ul>';
 for(var i=0; i<json.feed.entry.length; i++){
  var posttitle=json.feed.entry[i].title.$t;
  var thumburl=json.feed.entry[i].media$thumbnail.url;
  var content=json.feed.entry[i].content.$t;
  for(var k = 0; k < json.feed.entry[i].link.length; k++){
   if (json.feed.entry[i].link[k].rel == 'alternate') {
    var postlink = json.feed.entry[i].link[k].href;
   }
  }
  listhis+='<li></h2><a href="'+postlink+'" target="scorpydesign">'+posttitle+'</a></h2><img src="'+thumburl+'"  align="left"/>'+content+'</li>';
 }
 listhis+='</ul>';
 document.getElementById('listemup').innerHTML=listhis;
}
</script>
<script src="http://www.scorpydesign.com/feeds/posts/default
?max-results=8&alt=json&callback=listemall"></script>
From the code above replace www.scorpydesign.com with your blog address and replace 8 from max-results=8 with number of posts you want to show. If you want to show all posts of your Blogger blog on something like an index page, then you can set max-results with a large number like 500 - if your post count is less than 500.
Note : If you don't insert jump-breaks (read more) in your posts, then you might end up showing full posts in this widget. To prevent it you may try replacing 'default' with 'summary'
It is always better to insert jump-breaks in Blogger posts if you are showing large number of posts on the home page of your blog, and it is also healthy if you have long posts.

You can also customize this script to show label specific posts in your recent posts widget. Feed for posts with specific labels in a Blogger blog is requested like this -
blog-address/feeds/posts/default/-/label1/label2
for example, feed for all posts tagged under Photoshop and Tutorial in scorpydesign is retrieved from
http://www.scorpydesign.com/feeds/posts/default/-/Photoshop/Tutorial
Now we can implement this technique for this widget code replacing the normal feed with this label specific feed. Replacing the <script> tag for Blogger JSON request in the main widget code with the code below will show recent Photoshop, Tutorial posts from scorpydesign.
<script src="http://www.scorpydesign.com/feeds/posts/default/-/Photoshop/Tutorial?max-results=8&alt=json&callback=listemall"></script>
If you have space within your label names, you will have to URL encode it with %20F - for example if you have a certain label with name 'Facebook Page Tutorial' then you will need to pass this label to blogger JSON feed api like 'Facebook%20FPage%20FTutorial'

There is also many possibilities to customize the output of this script. The JSON data returned from Blogger contains other meta information like categories, author, timestamp etc. So you can develop this script to show when a post was published, who is the author of a post (if you are writting to a group blog) and labels related to a post etc.

While redesigning my design studio website on Blogger, I found many nifty tricks and techniques and I would like to thank members of Blogger Help Forum for the wonderful discussions which made me more curious towards learning learning about Blogger JSON feed and Javascript. If you find this tutorial and this script useful, won't you share what you are doing with it? Please comment below and tell me what do you think about it.

Comments

  1. But it will not work if blogger user set not public.

    ReplyDelete
  2. @Puri - yes, nobody can pull content from a blog that has limited access. Everybody should respect the privacy of an individual.

    ReplyDelete
  3. Thanks for the tips! Design plays a crucial role for any website's success. I'm glad our dental web designer is skillful in Blogger and most blog platforms.

    ReplyDelete
  4. I'm so dependent on Blogger for my sites. Thanks for sharing this tip. That thumbnail idea can really boost up my site useability.

    Greets website design services consultant

    ReplyDelete
  5. You are most welcome Villette, scorpydesign runs on google's blogger infrastructure for most reliability and scalability. While I was started this design blog/portfolio - I found this is the best platform for running a free and fully customizable cms based website.

    You can also check another post on scorpydesign - limitations of a blogger blog to know what are the constraints when designing and developing on blogger/blogspot platform.

    ReplyDelete
  6. Why is it that the html is not working in my blogger template?

    ReplyDelete
  7. @saturday update : could you please share your blog address and the list you want to add? i could take a look inside it and could tell you what is wrong with it.

    ReplyDelete
  8. Hi Scorpy,

    very fine job ... but your script doesn't work with this line:

    var thumburl=json.feed.entry[i].media$thumbnail.url;

    When i delete this line, your script works well - any idea, how to fix it?

    Another Question: I'm looking vor the meta information about 'Date of Post', 'Author of Post' and 'Number of Comments'. What would be the variables?

    var content=json.feed.entry[i].date.$t; doesn't work. Is there a list of Blogger meta information? It would be very helpfull ...

    Thanks for your support, sorry for my bad English,

    Greetings

    ReplyDelete
  9. @oliver : this script is ok, actually there are 2 forced newlines after line#14 starting with listthis+=, omitting them will make it work perfect.

    the line should be like this...

    listhis+='<li></h2><a href="'+postlink+'"target="scorpydesign">'+posttitle+'</a></h2><img src="'+thumburl+'"align="left"/>'+content+'</li>';

    and Oliver i also created a list of all blogger feed json variables, please check this out, hope you may find your answer there.

    thanks for writing.

    ReplyDelete
  10. Hi Sumit Roy,

    thanks for your fast feedback - you're right, the bug were the 2 forced newlines. Now, Script works fine :=).

    Your list of blogger json variables is very usefull, i'm looking for such a list a long time.

    God bless you and your family,

    Oliver

    ReplyDelete
  11. Pleasure is mine Oliver and thank you very much for your good wishes.

    ReplyDelete
  12. The tips and well-explained tips you provided in this post is very helpful for aspiring Los Angeles web designers like me. Thanks for sharing!

    ReplyDelete
  13. @daniel - it's always been a pleasure for me to share what i discover. best wishes from an Indian graphic and web designer.

    ReplyDelete
  14. Nice codes for blogger with thumbnail this will help be on my blogs. Thanks for the share dude

    ReplyDelete
  15. My Pleasure SEO RESELLER

    ReplyDelete
  16. This is just working great. I love blogger, but when it comes to coding am too lazy. Thanks dude! Lisa All Web Design Info

    ReplyDelete
  17. Mine still says loading... never has worked

    ReplyDelete
  18. According to my web designer in Perth, thumbnails play a huge part in attracting readers to your blog. Humans are very visual creatures.

    ReplyDelete
  19. Dear Sumit,
    Mine is also says loading..........not working.

    ReplyDelete
  20. there are two forced newlines in the listhis+=... line, get rid of them and everything will be fine.

    ReplyDelete
  21. I just tried this code on my wingsoflyra.blogspot.com blog and it
    also says "loading". I delete the lines you stated and still the same. I have yet to actually see it in action as of 8/27/12.

    I didn't see anything in the code that would prevent it from loading on the blog. I'm not a JS programmer so I have spend time reading
    through posts and websites to try and figure it out.

    I was looking for a workable alternative to the well known widget
    over at bloggerplugins that is called 'Recent Posts for Blogger with Thumbnails'. That actually worked incredibly well most of the time but it appears that site isn't working properly, server needs to be re-booted or whatever; it's code isn't being accepted by Blogger over this past weekend and even Blogger is calling it a broken program in the text editor and recommending deleting the gadget. I see the same result on other blogs that also use that specific widget. Blogger can't get the specs for the code reliably on each reload of the blog. It took me about 12 reloads, but I could get it up and going just for that session. I have no idea what happened and why it's broken. It may or may not get fixed.

    This has given me the incentive to re-look at other alternatives.

    This is where I came across your site and I've been looking at other sites but I have yet to find any of them that do as good of a job at a customizable 'Recent Posts with Thumbnails' as the one at bloggerplugins. I think it's really important to have a good contextual and visual component to offer to readers for your postings.

    I have to say I'm a bit surprised that Blogger hasn't actually taken the direct initiative itself to offer a similar widget.

    ReplyDelete
  22. sorry for the inconvenience - i checked my code today - but for some reason it's not working here either. i thought it might be due to any changes on blogger feed structure - but it's same! i ll check again later and tell you about the fix.

    i am not a javascript programmer either - all i learnt is some basics and that's for my own site (scorpydesign) only - and yes initially i got codes from bp, but i remember the credit link was much annoying - ha ha - for that i came up with my own code. for the time being same code is working on my tutorial page - and it's working perfectly - but while checking it on stand alone mode (that's for widgets) there might be some problem - let me check and fix.

    ReplyDelete
  23. I think you can get some idea from some templates of http://www.logo-design.in. They do great designs and experts in the field of web design and logo design.

    ReplyDelete
  24. This is what am looking for. Is this working for Tumblr? But will try. Ill try this. Thanks!

    ReplyDelete
  25. It's not working when i change
    This
    src="http://www.scorpydesign.com/feeds/posts/default
    ?max-results=8&alt=json&callback=listemall"
    Into
    src="http://blugaamusic.blogspot.com/feeds/posts/default/-/Punjabi?max-results=12&alt=json&callback=listemall"

    ReplyDelete
  26. I truly like to reading your post. Thank you so much for taking the time to share such a nice information. I'll definitely add this great post in my article section.
    website design

    ReplyDelete
  27. Very useful Script, it's as I was looking for my site. thank you for the great work. This is a wonderful theme :).
    Orange county web design

    ReplyDelete
  28. PHP provides the best option to build the website where we can design our website in a very interactive manner that provides better functioning in data management.
    PHP Training in Chennai | PHP course in Chennai

    ReplyDelete

Post a Comment