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

1 nhận xét:

Unknown 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