I recently updated my home page to include summary of the latest posts for this blog. Here is a screen shot of the summary section:
I am using dasBlog as my blog engine and I originally approached the solution by trying to pull the content directly from dasBlog using the blog API. However, I soon stumbled upon a clever jQuery plugin called jGFeed.
This plugin is an abstraction layer on top of Google Feeds API. This plugin can get any RSS on any host and converts the RSS feed data into JSON to make it easier to use.
Using jGFeed allows you to create a summary of latest posts for ANY blog by using the RSS feed. RSS feed data is a standardized XML file format. The JSON that jGFeed provides has all the information you need to create a summary. Here is a nice blog post about the JSON content.
One of the best ways to see the request / response and sniff JSON responses is using the Firebug plugin for FireFox. Here is some data that I acquired using Firebug.
First off here is the HTTP GET request headers.
GET /ajax/services/feed/load?v=1.0&callback=jsonp1272684908103&q=http://feeds.feedburner.com/bobcravens/AoEN&num=3&_=1272684908114 HTTP/1.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:18.104.22.168) Gecko/20100401 Firefox/3.6.3 GTB7.0 (.NET CLR 3.5.30729)
As already mentioned, the plugin is using the feeds api at http://ajax.googleapis.com. Notice the ‘jasonp’ callback in the query string parameters. JSONP is being used to get around the “same orgin policy” of the XHR object. Here is the HTTP response headers:
HTTP/1.1 200 OK
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Date: Sat, 01 May 2010 03:35:12 GMT
X-XSS-Protection: 1; mode=block
Using Firebug, you can determine the JSON variable names that correspond to the content that you want to publish.
Not really too much HTML going on in this example. The HTML is mostly generated by jQuery calls as we build up DOM elements for each RSS element. We really just need a placeholder:
alert('there was an error');
var entry = feeds.entries[i];
var title = entry.title;
var link = entry.link;
var description = entry.contentSnippet;
var pubDate = entry.publishedDate;
var html = "<div class='entry'><h4 class='postTitle'><a class='fancy block' href='" + link + "' target='_blank'>" + title + "</a></h4>";
html += "<em class='date'>" + pubDate + "</em>";
html += "<p class='description'>" + description + "</p></div>";
To use the ‘jGFeed’ plugin, you need to add a script reference in your HTML after you load jQuery. Notice that ‘jGFeed’ takes three parameters:
- url – This is the url of the RSS feed source.
- callback – This is the function that is called after the data is returned.
- number – This is the number of RSS elements you want to return.
The rest of the script uses the JSON data to build HTML DOM elements and append them to our placeholder.
Adding an RSS feed reader to a web page using the jGFeed plugin for jQuery is simple and straight-forward. This solution allows feeds from various sources (not necessarily your blog) to be aggregated into a single page.