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 domain. For security reasons, browsers will not allow accessing XML-files on other domains. So if your webpage is not inside the 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[] Array of Blog author names -[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[]-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

2 nhận xét:

SwimWriter on November 14, 2009 at 11:55 AM said...

hi there the information you provided has been very useful to me, but recently i tried browsers other than firefox it simply doenot work, it onlt works with firfox. let me explain

i created a .js file using JSON elements and saved it on server and called it from my blog. It works fine with firefox but nothing works on other browsers, am i doing something wrong. I found JSON works on other browsers, may it does not works blogger JSON does not work with others.

Muhammad Taqi on January 17, 2011 at 10:17 PM said...

love this, but i cant :(


Coding experience share Copyright © 2010 | Designed by Ipietoon for Free Blogger Template