How To Create Blogger JSON Feed Api On Blogger (Blogspot) Blog
  • Default Language
  • Nepali
  • Arabic
  • Basque
  • Bengali
  • Bulgaria
  • Catalan
  • Croatian
  • Czech
  • Chinese
  • Danish
  • Dutch
  • English (UK)
  • English (US)
  • Estonian
  • Filipino
  • Finnish
  • French
  • German
  • Greek
  • Hindi
  • Hungarian
  • Icelandic
  • Indonesian
  • Italian
  • Japanese
  • Kannada
  • Korean
  • Latvian
  • Lithuanian
  • Malay
  • Norwegian
  • Polish
  • Portugal
  • Romanian
  • Russian
  • Serbian
  • Taiwan
  • Slovak
  • Slovenian
  • liish
  • Swahili
  • Swedish
  • Tamil
  • Thailand
  • Ukrainian
  • Urdu
  • Vietnamese
  • Welsh

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

Blogger Feed, Uses of Blogger Feed, How to use Blogger Feed, Blogger Feed Rules,How to Use Blogger Feed for blogger blog, Blogger Feed for Blogspot,

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>

Mero Blogging Tips

Mero Blogging Tips Share Blogger Tutorials, HTML, JavaScript, CSS, Widget, SEO, jQuery, Web Tool and General Helpful Stuff for Newbie Bloggers and Readers.

Post a Comment

First of all, thank you for taking the time to read my blog. It's much appreciated! If you would like to leave a comment, please do, I'd love to hear what you think!. Suggestions and/or questions are always welcome, either post them in the comment form.

However, comments are always reviewed and it may take some time to appear. Also, Comments without NAME will not be published. Always keep in mind "URL without nofollow tag" will consider as a spam.

Previous Post Next Post

Contact Form