Blogger Trick: Using JSON APIs with Blogger to Include Recent Posts with your Template

My wife was designing a blogger template, and she wanted to include a section for recent posts.  There are plenty of Google widget code sections available for download on the Internet that allow a Blogger user to add a Recent Posts section to a blog.  However, the theme for the Blogger template required the feature to be included as an integral part of the template rather than being optional.  I’ll show you how we accomplished the task.

Blogger automatically generates an XML news feed for your blog.  The feed allows people to subscribe to your blog so they’ll receive notices when you publish new posts.  This automatically generated news feed is located at myblogname.blogspot.com/feeds/posts/default.  For your particular blog, substitute your actual Blogger sub-domain in place of myblogname.  If you enter your blogspot URL followed by /feeds/posts/default into a browser, you will see the feed for your blog in your browser window.

Accessing the feed
Accessing your blog’s feed is done by using a technology called JSON (JavaScript Object Notation) through a callback.  I’ll explain what I mean by that.  You need to do two things: 1) create a JavaScript function to process the feed data;  2)Access the feed data and initiate the callback process by using some query parameters.  Here are the technical details.

Inside the blogger template, I placed a piece of JavaScript code (which I borrowed from one of the widely available widgets I referred to earlier) inside the <head>  section of my wife’s template using the Blogger template editor, which is accessed from a Blogger account by going to Layout -> Edit HTML.   The script essentially accesses the feed through the json parameter, parses out the blog titles for the last numposts (this variable is specified in the callback mechanism explained later) blog entries, and writes them out to the web document (as links to to actual blog posts) at the point from which the function is called.  Here’s the function:

<script type=’text/javascript’>
//<![CDATA[
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 < entry.link.length; k++) {

      if (entry.link[k].rel == ‘alternate’) {

        posturl = entry.link[k].href;

        break;

      }

    }

    posttitle = posttitle.link(posturl);

    var readmorelink = “(more)”;

    readmorelink = readmorelink.link(posturl);

    var postdate = entry.published.$t;

    var cdyear = postdate.substring(0,4);

    var cdmonth = postdate.substring(5,7);

    var cdday = postdate.substring(8,10);

    var monthnames = new Array();

    monthnames[1] = “Jan”;

    monthnames[2] = “Feb”;

    monthnames[3] = “Mar”;

    monthnames[4] = “Apr”;

    monthnames[5] = “May”;

    monthnames[6] = “Jun”;

    monthnames[7] = “Jul”;

    monthnames[8] = “Aug”;

    monthnames[9] = “Sep”;

    monthnames[10] = “Oct”;

    monthnames[11] = “Nov”;

    monthnames[12] = “Dec”;

    if (“content” in entry) {

      var postcontent = entry.content.$t;}

    else

    if (“summary” in entry) {

      var postcontent = entry.summary.$t;}

    else var postcontent = “”;

    var re = /<\S[^>]*>/g;

    postcontent = postcontent.replace(re, “”);

    if (!standardstyling) document.write(‘<div class=”bbrecpost”>’);

    if (standardstyling) document.write(‘<br/>’);

    document.write(posttitle);

    if (showpostdate == true) document.write(‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdday);

    if (!standardstyling) document.write(‘</div><div class=”bbrecpostsum””>’);

    if (showpostsummary == true) {

      if (standardstyling) document.write(‘<br/>’);

      if (postcontent.length < numchars) {

         if (standardstyling) document.write(‘<i>’);

         document.write(postcontent);

         if (standardstyling) document.write(‘</i>’);}

      else {

         if (standardstyling) document.write(‘<i>’);

         postcontent = postcontent.substring(0, numchars);

         var quoteEnd = postcontent.lastIndexOf(” “);

         postcontent = postcontent.substring(0,quoteEnd);

         document.write(postcontent + ‘…’ + readmorelink);

         if (standardstyling) document.write(‘</i>’);}

}

    if (!standardstyling) document.write(‘</div>’);

    if (standardstyling) document.write(”);

}

if (!standardstyling) document.write(”);

if (standardstyling) document.write(”);

document.write(”);

if (!standardstyling) document.write(”);

 

}

//]]>

</script>

 

In order to have the above code executed, we need to insert some JavaScript code at the point in the blog template where we want to have the Recent Posts inserted.  The code will need to tell the Blogger system to run our JavaScript showrecentposts code when it’s called.  Here’s the JavaScript block of code to accomplish that.


<script style=’text/javascript’>var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 30;var standardstyling = false;</script>

<script src=’/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts’/>

 

This block of code first sets some JavaScript variables so that they’re available when our showrecentposts function is later called.  You’ll notice that numposts is among those variables listed.  numposts determines how many recent posts will be displayed.

 

The script block following the variables tells Blogger to access the news feed for the current blog (/feeds/posts/default), order the feed entries by the date they were published (orderby-published), set up a JSON callback (alt=json-in-script), and call our function to process the feeds (callback=showrecentposts).  The important query parameters to note in the process of using a JSON callback are 1) alt=json-in-script, which tells Blogger we want to access the feed with a JavaScript function; and 2) callback=showrecentposts, which tells Blogger to call our showrecentposts function.  It’s important to note that the name we use in the query parameter must match the name of our function.

 

To summarize, we were able to integrate a Recent Posts widget as part of a Blogger template by using the automatically generated Blogger feed and the JSON callback functionality to run a JavaScript function.  I hope you found at least some part of this explanation helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *