Basic Blogger JSON Feed Api

We have discussed before about how to read blogger xml feed using JavaScript. That way is not always work on several browsers, especially Internet Explorer. It must someone that expert to make it works on all browsers. Fortunately, JSON feed is available by blogger, this feed is more easy than before. Although when this post is published for the first time, JSON feed is readable only. Actually, JSON feed is an xml feed that has changed to JSON format. Because data feed of blogger is an xml. To get this JSON feed you just add parameter “alt=json” or “alt=json-in-script” in your data feed. Watch the example below

http://www.example.com/feeds/posts/default?alt=json

http://www.example.com/feeds/posts/default?alt=json-in-script

The second url is more demand. Remember, this url is only show 25 posts for maximum. So if you want more, you need add parameter “max-results=NUMBER_POST”. As practice, access your blog JSON feed on your browser, so that it will look like follow

Code

From the code above, we can take several conclusions

Object	Description	Example
json.feed.id.$t	Show blog ID	tag:blogger.com,1999:blog-85047
json.feed.updated.$t	Last update of a blog	2012-02-08T18:21:57.051+07:00
json.feed.category[]	Categories / label array of a blog
json.feed.category[i].term	Show the i-th category	Blogger and widget
json.feed.title.$t	Show blog name	Threelas
json.feed.subtitle.$t	Show description of a blog	Threelas is a good site in the world
json.feed.author[]	Array of blog authors	Putri Arisnawati, Ibnu Syuhada
json.feed.author[i].name.$t	Show the i-th blog author name	Putri Arisnawati
json.feed.author[i].uri.$t	Show the i-th profile author uri	https://profiles.google.com/116848xxx
json.feed.openSearch$totalResults.$t	Show total posts	222
json.feed.entry[]	Posts array of a blog
json.feed.entry[i].id.$t	Show the i-th post ID	tag:blogger.com,1999:blog-8508.post-578455349
json.feed.entry[i].title.$t	Show the i-th post title	Basic Blogger JSON Feed API
json.feed.entry[i].published.$t	Show time published of the i-th post	2012-02-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t	Show when the i-th post is updated	2012-02-07T12:56:47.089+07:00
json.feed.entry[i].category[]	Show array of post categories
json.feed.entry[i].category[j].term	Show the j-th category of the i-th post	Blogger Api
json.feed.entry[i].content.$t	Show post content	This post is explain about using JSON feed ...
json.feed.entry[i].link[]	Links array of a post
json.feed.entry[i].link[j].href	Show the j-th link of the i-th post	http://www.example.com/2012/02/does.html
json.feed.entry[i].author[]	Array of post authors
json.feed.entry[i].author[j].name.$t	Name of the j-th authro on the i-th post	Putri Arisnawati
json.feed.entry[i].author[j].uri.$t	Show uri author profile	https://profiles.google.com/116848xxx
json.feed.entry[i].author[j].gd$image.src	Image uri of the j-th author profile on the i-th post	//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url	Show image on the i-th post	http://3.bp.blogspot.com/Allen+Mills.jpg
json.feed.entry[i].thr$total.$t	Show total threaded comments	5

Retrieve a list of posts

To do this, you must read our previous post. That is only link tag with attribute “rel=alternate” will show the right url of your post. So, stat your code with the following code

// Get rel=alternate for truly post url
    for (var j=0; j < json.feed.entry[i].link.length; j++)
    {
      if (json.feed.entry[i].link[j].rel == 'alternate')
      {
        posturl = json.feed.entry[i].link[j].href;
        break;
      }
    }

Next step, choose what parameters you want to retrieve. See the example below

// 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 json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].content.$t;}
    else
    if ("summary" in json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].summary.$t;}
    else var postcontent = "";
    // strip off all html-tags
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
    // reduce postcontent to 200 characters
    if (postcontent.length > 200) postcontent = postcontent.substring(0,200);
    // Get posts title
    var poststitle = json.feed.entry[i].title.$t;
    document.write("Post Title = "+poststitle);
    document.write('<br/>');
    document.write("Post Url = "+posturl);
    document.write('<br/>');
    document.write("Post Content :"+'<br/>');
    document.write(postcontent);
    document.write('<br/>'+'<br/>');
  }

To see the result, you must use callback function. See complete code below

    <script type="text/javascript">
function recentposts(json) {
  // Get total posts
  var totalposts = json.feed.openSearch$totalResults.$t;
  document.write(totalposts);
  document.write('<br/>');
  // Get five recent posts
  for (var i = 0; i < 5; i++)
  {
    var posturl;  
    // Get rel=alternate for truly post url
    for (var j=0; j < json.feed.entry[i].link.length; j++)
    {
      if (json.feed.entry[i].link[j].rel == 'alternate')
      {
        posturl = json.feed.entry[i].link[j].href;
        break;
      }
    }
    // 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 json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].content.$t;}
    else
    if ("summary" in json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].summary.$t;}
    else var postcontent = "";
    // strip off all html-tags
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
    // reduce postcontent to 200 characters
    if (postcontent.length > 200) postcontent = postcontent.substring(0,200);
    // Get posts title
    var poststitle = json.feed.entry[i].title.$t;
    document.write("Post Title = "+poststitle);
    document.write('<br/>');
    document.write("Post Url = "+posturl);
    document.write('<br/>');
    document.write("Post Content :"+'<br/>');
    document.write(postcontent);
    document.write('<br/>'+'<br/>');
  }
    }    
    </script>
    <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default?alt=json-in-script&callback=recentposts"></script>

Easy, isn’t it? Each free widget from us is always using JSON feed. Now, you start making a widget.