Friday, 23 January 2009

My own Recent Posts Widget

UPDATE: The post has been abrogated by Blogger Recent Posts/Comments 2 in 1 Widget

I have been getting annoyed with the limited Feed widget in blogger. I wanted to have 10 items in my "Recent Post" list. I finally decided to code my own solution. It was quite simple and quick. It will show:
  • Immediate updates of latest posts
  • A variable number of posts
  • With or without the date
  • With or without the beginning of the post body
  • You can specify how many characters to show
  • You can also show the author if you have a group blog
  • No annoying blank lines
  • It is straightforward to change these settings (less than a minute till you are seeing your updated site)
  • The script is on your host, so there are no mysterious calls to other sites
  • It can also be used for any other feed that supports JSON except comments feeds which has a weird title format (I might add my own shortly for completeness).
The Instructions

1. Go to your blogger Layout and add a widget
2. Select the HTML/JavaScript Widget
3. Title it "Recent Posts"
4. Copy & Paste the script below

<script style="text/javascript">
// update these as needed 1=show, 0= do not show
var showdate=1;
var showcontent=0;
var showauthor=0;
// number of posts and number of content characters
var numposts=10;
var numcontent=100;
// check at bottom to have correct url
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <; k++) {
if ([k].rel == 'alternate') {
posturl =[k].href;
var postdate = entry.published.$t.substring(0,10);
var postauthor =[0].name.$t;
if ("content" in entry) {
var postcontent = entry.content.$t;}
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numcontent) postcontent = postcontent.substring(0,numcontent);
document.write('<a href="' + posturl + '">' + posttitle + '</a>');
if (showdate + showauthor > 0) document.write(' ');
if (showauthor) document.write('by ' + postauthor + ' ');
if (showdate) document.write('- ' + postdate);
if (showcontent) document.write('<br>' + postcontent);

document.write('<div style="font-size:75%; text-align:center"> <a href= "">Widget by faithlessgod</a></div>');
<script src=""></script>
<noscript>You need to enable JavaScript to read this.</noscript>

5. Update the URL a couple of lines from the bottom of the code - very important - from mine
to yours. That is just replace 'impartialism' with your blospot prefix.
6. Save, move the widget to where you want and load your page


At the top of the scrip there are some comments they start with
Just to help:
7. The default number of posts to display is 10: numposts=10, set numposts = x, where x is your preferred number of posts to display
8. The default is to display the date: showdate=1, set showdate=0 to stop displaying the date
9. The default is to not display the author: showauthor=0, if you have a group blog set showauthor=1
10. The default is to not show the beginning of the post body: showcontent=0, to display set showcontent=1

Other Feeds

It might work with other feeds provided they support JSON. [If in doubt just create another widget and replace the whole feed URL:
(up to but not including the '?'), save and see. - see Postscript 3]

That is it! Enjoy!

Postscript: Having problems with copy and paste: the code is correct, checking now

Postscript 2: Should be fine now

Postscript 3: The JSON calls of different feeds vries there may not be a simple substitution possible. Will investigate this in a future posts


Naviya Nair said...

I have read your blog its very attractive and impressive. I like it your blog.

Java Online Training Java EE Online Training Java EE Online Training Java 8 online training Core Java 8 online training

Java Online Training from India Java Online Training from India Core Java Training Online Core Java Training Online Java Training InstitutesJava Training Institutes

Naviya Nair said...

Wow. This really made my day. Thanks a lot!

Javascript Training in Chennai | HTML5 Online Training
JavaScript Training Courses | Javascript Online Training

JavaScript Training in CHennai