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 |
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
Beautiful Betabeautifulbeta.blogspot.com