Next: Blogger JSON Feed API

Blogger JSON Feed API


Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.
Here is the JSON feed API:


ObjectDescriptionExample
json.feed.id.$tShow blog IDtag:blogger.com,1999:blog-12345
json.feed.updated.$tLast update of a blog2013-07-08T18:21:57.051+07:00
json.feed.category[]Categories / label array of a blog
json.feed.category[i].termShow the i-th categoryBlogger
json.feed.title.$tShow blog nameNext72
json.feed.subtitle.$tShow description of a blogMax's Weblog
json.feed.author[]Array of blog authorsDanang Probo Sayekti, Matt Cutts
json.feed.author[i].name.$tShow the i-th blog author nameDanang Pobo Sayekti
json.feed.author[i].uri.$tShow the i-th profile author urihttps://profiles.google.com/123456789
json.feed.openSearch$totalResults.$tShow total posts777
json.feed.entry[]Posts array of a blog
json.feed.entry[i].id.$tShow the i-th post IDtag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$tShow the i-th post titleBlogger JSON Feed API
json.feed.entry[i].published.$tShow time published of the i-th post2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$tShow when the i-th post is updated2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[]Show array of post categories
json.feed.entry[i].category[x].termShow the x-th category of the i-th postBlogger API
json.feed.entry[i].summary.$tShow post summaryMaybe sometimes we need a widget ...
json.feed.entry[i].content.$tShow post contentMaybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[]Links array of a post
json.feed.entry[i].link[x].hrefShow the x-th link of the i-th posthttp://www.danpros.com/2013/08/blogger-api.html
json.feed.entry[i].author[]Array of post authors
json.feed.entry[i].author[x].name.$tName of the x-th author on the i-th postDanang Probo Sayekti
json.feed.entry[i].author[x].uri.$tShow uri author profilehttps://profiles.google.com/123456789
json.feed.entry[i].author[x].gd$image.srcImage uri of the x-th author profile on the i-th post//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.urlShow image on the i-th posthttp://3.bp.blogspot.com/danlogs.jpg
json.feed.entry[i].thr$total.$tShow total threaded comments7
Here is an example implementation of the above code:
Suppose I need 5 recent posts by a certain label, the label I want to display is "Blogger". I took the title and summary of the post.
<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://next72.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=mycallback"></script>
Note: we need to understand that json.feed.entry[i].summary.$t only available if we grab the feed URL using http://next72.blogspot.com/feeds/posts/summary instead of using  http://next72.blogspot.com/feeds/posts/default.
Now how can we create a widget without unsorted recent post by a certain label? This widget also only displays 90 characters in the summary. The following is the example:
<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0, 90);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://next72.blogspot.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>