Blogger JSON feed and a JSON recent posts widget

What is a JSON-Feed?

Your Blogger Blog generates newsfeeds that can be read by Newsreaders. The standard feeds are RSS-feeds, using the XML-standard, or Atom-feeds.
But if you want to use the contents of your feeds in another web-applications, you need access to the feed to read its contents and display them on your webpage. The XML-file that contains your feed is located on one of the servers of Blogger, inside the blogger.com domain. For security reasons, browsers will not allow accessing XML-files on other domains. So if your webpage is not inside the blogger.com domain, how can we get access to it?
This is where the JSON-feed comes in handy.
JSON means: JavaScript Object Notation. A JSON-feed is not formatted as an XML-file, but as a Javascript Object. To make it accessible cross-domain, we use a call-back function. In plain English: we ask the Blogger Server to hand over the JSON-object to a function that we have written, and this function parses the JSON-object to retrieve the feed. And because it is already a Javascript Object, parsing it is very easy.

Getting the JSON-feed

To get the JSON-feed, we need the following Javascript code on our Blog:

Replace yourblog with the name of your blog. You will also have to write a Javascript function showfeedcontent(json), that takes the JSON-object and parses it.

Examining the feed

Open Notepad, and copy the following code to a new document. Save the document as a HTML-document (e.g. parser.html). Again, replace yourblog with the name of your blog.
Then, open the document in your browser, and it will display the contents of your feed. In fact: it will display the contents of any JSON-object. Try it out with Google Calendar, and you will be able to see the contents of that feed too. This small and simple html-page is a powerfull tool to examine th structure of JSON-objects, so that you can write a parser for it.

How to parse a JSON-feed

In the table below the most important elements of the JSON object structure are explained.

Object	Meaning	Example content
json	The JSON-object	-
json.feed	The feed	-
json.feed.title.$t	Blog name	Beautiful Beta
json.feed.updated.$t	Date and time of last feed update	2007-03-18, 20:43
json.feed.author[]	Array of Blog author names	-
json.feed.author[0].name.$t	Name of first Blog author	Beta Bloke
json.feed.openSearch$totalResults	Number of posts in the Blog	74
json.feed.entry[]	Array of Blog entries	-
json.feed.entry[i].title.$t	Title of the ith post	What's up here?
json.feed.entry[i].category[]	Array of labels of ith post	-
json.feed.entry[i].category[j].term	jth label of ith post	tools
json.feed.entry[i].published.$t	Date and time ith post was published	2007-03-18, 12:27
json.feed.entry[i].updated.$t	Date and time ith post was updated	2007-03-18, 12:35
json.feed.entry[i].author[]	Array of ith post author names	-
json.feed.entry[i].author[0].name.$t	Name of first author of ith post	Beta Bloke
json.feed.entry[i].content.$t	The content of the ith post, as html	It has been very quiet on ….
json.feed.entry[i].link[]	Array of links of the ith post	Explained below

The feed contains links for each entry, in the array json.feed.entry[i].link[]. One of those links is the permalink to the post. Its "rel"-field is set to "alternate". Its "href"-field contains the url of the post-page.
Now let's take a look at the json.feed.link[]-array. This array contains some usefull links as well.
One of these links has its "rel"-field set to "alternate"; its "href"-field holds the url of your blog's main page. Another link has its "rel"-field set to "next"; its "href"-field holds the url for calling the next 25 feed entries.

A basic Recent Posts Widget

Now, with this knowledge, we can write a basic Recent Posts Widget, that has the following functionality:

• List 5 most recent posts
• Display post title
• Display link to the post
• Display post date
• Display post author
• Display first 100 characters of post content

You can copy the code below to a new Notepad-document, and save it as html. Replace yourblog with the name of your blog. Open the file in your browser to see your widget at work.

Beautiful Beta

beautifulbeta.blogspot.com