Post Tags

Blogger Customize

Pretty posts

By Rubel
Blogger JSON Feed API
Blogger JSON Feed API created by google developer for blogger custom template designer to make fancy unique  template as their wish. Sometimes we need a widget like recent post, random post, recent comment etc with creative design, but that widget are not available in blogger Gadget section.

By using JSON feed API, we can bring important data such as Title, Summary, Full content, Date, Comments Count, Thumbnail, Label List, Author info etc.

We have divided blogger JSON Feed Api between two section like "Blog Feed Api", "Post Feed Api" so that you can easily implement it on your code.

Blog Feed API


1. Show blog ID
json.feed.id.$t
Exmaple: tag:blogger.com,1999:blog-12345

2. Last post update of a blog
json.feed.updated.$t
Exmaple: 2013-07-08T18:21:57.051+07:00

3. Show category of a blog
json.feed.category[i].term
Exmaple: Game

4. Blog title
json.feed.title.$t
Exmaple: Codiblog

5. Blog description
json.feed.subtitle.$t
Exmaple: Codiblog Web Design Site

6. Blog Authors array
json.feed.author[]
Exmaple: Md Jillur Rahman, Matt Cutts

7. Show single blog author name
json.feed.author[i].name.$t
Exmaple: Md Jillur Rahman

8. Show blog author google plus url
json.feed.author[i].uri.$t
Exmaple: https://profiles.google.com/123456789

9. Total posts count
json.feed.openSearch$totalResults.$t
Exmaple: 850


Posts Feed API


1. Single post ID
json.feed.entry[i].id.$t
Exmaple: tag:blogger.com,1999:blog-8508.post-12345678

2. Single post title
json.feed.entry[i].title.$t
Exmaple: All of Blogger JSON Feed API List

3. Single post published date
json.feed.entry[i].published.$t
Exmaple: 2013-07-07T12:56:00.000+07:00

4. Single post updated date
json.feed.entry[i].updated.$t
Exmaple: 2013-07-07T12:56:47.089+07:00

6. Category / Label array of a post
json.feed.entry[i].category[]
Exmaple: Game, Digital, Blogger

7. Single post summary
json.feed.entry[i].summary.$t
Exmaple: Blogger JSON Feed API created by...

8. Single post content
json.feed.entry[i].content.$t
Exmaple: Blogger JSON Feed API created by google developer for blogger custom template designer to make fancy unique template...

9. Single post link
json.feed.entry[i].link[x].href
Exmaple: http://www.codiblog.com/2016/12/blogger-json-feed.html

10. Single post author name
json.feed.entry[i].author[x].name.$t
Exmaple: Md Jillur Rahman

11. Single post author profile url
json.feed.entry[i].author[x].uri.$t
Exmaple: https://profiles.google.com/123456789

12. Single post author profile image url
json.feed.entry[i].author[x].gd$image.src
Exmaple: //lh4.googleusercontent.com/photo.jpg

13. Single post first image url
json.feed.entry[i].media$thumbnail.url
Exmaple: http://3.bp.blogspot.com/codiblog.jpg

14. Show total threaded comment
json.feed.entry[i].thr$total.$t
Exmaple: 8

Now we will create a recent post widget by using above feed api that will display 5 latest posts according to date. This widget also display Post Title, Author Name, Post summary with 90 characters.
<script type="text/javascript">
  function cbfunction(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"><h2><a href=' + postUrl + '>' + postTitle + '</h2></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=cbfunction"></script>