Purpose of this page
This page explains the structure and workings of the Blogger JSON Feed.
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:
<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showfeedcontent"></script>
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.
<html>
<head>
<script type='text/javascript'>
function listkeys(feedobj,depth) {
for (key in feedobj) {
for (var i=0; i<depth; i++) document.write('- ');
document.write(key+' = '+feedobj[key]+'<br/>');
listkeys(feedobj[key],depth+1);
}
}
function showfeedcontent(json) {
listkeys(json,0);
}
</script>
</head>
<body>
JSON FEED PARSER
<br/><br/>
<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showfeedcontent"></script>
</body>
</html>
Example JSON-feed
In the block below you will find the JSON-feed structure for the http://beautifulbeta.blogspot.com feed, for one post. A standard Blogger JSON-feed contains 25 post-entries. In the example below only the first entry is shown.
{
"version" : "1.0",
"encoding" : "UTF-8",
"feed" : {
"xmlns" : "http://www.w3.org/2005/Atom",
"xmlns$openSearch" : "http://a9.com/-/spec/opensearchrss/1.0/",
"id" : { "$t" : "tag:blogger.com,1999:blog-934829683866516411" },
"updated" : { "$t" : "2007-03-18T20:43:19.434+01:00" },
"title" : {
"type" : "text",
"$t" : "Beautiful Beta"
},
"link" : [ {
"rel" : "alternate",
"type" : "text/html",
"href" : "http://beautifulbeta.blogspot.com/index.html"
},{
"rel" : "next",
"type" : "application/atom+xml",
"href" : "http://beautifulbeta.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=26&max-results=25"
},{
"rel" : "http://schemas.google.com/g/2005#feed",
"type" : "application/atom+xml",
"href" : "http://beautifulbeta.blogspot.com/feeds/posts/default"
},{
"rel" : "self",
"type" : "application/atom+xml",
"href" : "http://beautifulbeta.blogspot.com/feeds/posts/default?alt=json-in-script"
} ],
"author" : [ {
"name" : { "$t" : "Beta Bloke" }
} ],
"generator" : {
"version" : "7.00",
"uri" : "http://www2.blogger.com",
"$t" : "Blogger"
},
"openSearch$totalResults" : { "$t" : "74" },
"openSearch$startIndex" : { "$t" : "1" },
"entry" : [ {
"id" : { "$t" : "tag:blogger.com,1999:blog-934829683866516411.post-8097606299472435819" },
"published" : { "$t" : "2007-03-18T12:27:00.000+01:00" },
"updated" : { "$t" : "2007-03-18T12:35:19.236+01:00" },
"category" : [ {
"scheme" : "http://www.blogger.com/atom/ns#",
"term" : "tools"
} ],
"title" : {
"type" : "text",
"$t" : "What's Up Here"
},
"content" : {
"type" : "html",
"$t" : "It has been very quiet on ....."
},
"link" : [ {
"rel" : "alternate",
"type" : "text/html",
"href" : "http://beautifulbeta.blogspot.com/2007/03/whats-up-here.html"
},{
"rel" : "self",
"type" : "application/atom+xml",
"href" : "http://beautifulbeta.blogspot.com/feeds/posts/default/8097606299472435819"
},{
"rel" : "edit",
"type" : "application/atom+xml",
"href" : "http://www.blogger.com/feeds/934829683866516411/posts/default/8097606299472435819"
} ],
"author" : [ {
"name" : { "$t" : "Beta Bloke" }
} ]
} ]
}}
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.
<html>
<head>
<script style="text/javascript">
function showrecentposts(json) {
// start a loop
// in this loop we get the entry from the feed and parse it
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
// check all links for the link with rel = alternate
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the postdate, take only the first 10 characters
var postdate = entry.published.$t.substring(0,10);
// get the post author
var postauthor = entry.author[0].name.$t;
// get the postcontent
// if the Blogger-feed is set to FULL, then the content is in the content-field
// if the Blogger-feed is set to SHORT, then the content is in the summary-field
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters
if (postcontent.length > numchars) postcontent = postcontent.substring(0,numchars);
// display the results
document.write('<br>');
document.write('Entry #' + i + '<br>');
document.write('Post title : '+ posttitle + '<br>');
document.write('Post url : '+ posturl + '<br>');
document.write('Post author : '+ postauthor + '<br>');
document.write('Postdate : '+ postdate + '<br>');
document.write('Postcontent : '+ postcontent + '<br>');
document.write('<br>');
}
}
</script>
</head>
<body>
RECENT POSTS
<script style="text/javascript">
var numposts=5;
var numchars=100;
</script>
<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showrecentposts"></script>
</body>
</html>
