How To Create Blogger JSON Feed Api On Blogger (Blogspot) Blog

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.

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

Here is the JSON feed API:

Object	Description	Example
json.feed.id.$t	Show blog ID	tag:blogger.com,1999:blog-12345
json.feed.updated.$t	Last update of a blog	2013-07-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
json.feed.title.$t	Show blog name	Merobloggingtips
json.feed.subtitle.$t	Show description of a blog	Blogger Tips and Tricks
json.feed.author[]	Array of blog authors	Merobloggingtips, Blog Owner
json.feed.author[i].name.$t	Show the i-th blog author name	Merobloggingtips
json.feed.author[i].uri.$t	Show the i-th profile author uri	https://profiles.google.com/0123456789
json.feed.openSearch$totalResults.$t	Show total posts	777
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-0123456789
json.feed.entry[i].title.$t	Show the i-th post title	Blogger JSON Feed API
json.feed.entry[i].published.$t	Show time published of the i-th post	2022-03-20T12:56:00.000+07:00
json.feed.entry[i].updated.$t	Show when the i-th post is updated	2022-03-20T12:56:47.089+07:00
json.feed.entry[i].category[]	Show array of post categories
json.feed.entry[i].category[x].term	Show the x-th category of the i-th post	Blogger API
json.feed.entry[i].summary.$t	Show post summary	Maybe sometimes we need a widget ...
json.feed.entry[i].content.$t	Show post content	Maybe 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].href	Show the x-th link of the i-th post	https://www.merobloggingtips.com/2022/03/how-to-create-json-feeds-and-implement-json-api-on-blogger-blog.html
json.feed.entry[i].author[]	Array of post authors
json.feed.entry[i].author[x].name.$t	Name of the x-th author on the i-th post	Merobloggingtips
json.feed.entry[i].author[x].uri.$t	Show uri author profile	https://profiles.google.com/0123456789
json.feed.entry[i].author[x].gd$image.src	Image uri of the x-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/merobloggingtips.jpg
json.feed.entry[i].thr$total.$t	Show total threaded comments	7

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="https://www.merobloggingtips.com/feeds/posts/summary/-/Blogger?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 https://www.merobloggingtips.com/feeds/posts/summary instead of using https://www.merobloggingtips.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://www.merobloggingtips.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>