Blogger JSON Feed API

Kadang mungkin kita memerlukan widget untuk fitur tertentu, akan tetap widget tersebut tidak disediakan oleh Blogger ataupun para widget developer (platform Blogger). Pihak Blogger sendiri sudah menyediakan API untuk mengatasi ini, jadi kita bisa membuat widget kita sendiri dengan membaca feed blog menggunakan JSON dan JavaScript.

Berikut adalah kode-kode Blogger JSON Feed API tersebut:

ObjekDeskripsiContoh
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 nameDanlogs
json.feed.subtitle.$tShow description of a blogDan'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 summaryBerikut adalah berbagai macam ...
json.feed.entry[i].content.$tShow post contentBerikut adalah berbagai macam Blogger JSON Feed API ...
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.danlogs.com/2013/07/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

Berikut adalah contoh implementasi dari kode di atas:

Misal saya memerlukan 5 postingan terakhir berdasarkan label tertentu, label yang ingin ditampilkan adalah "Blogger". Saya mengambil title serta summary dari postingan-postingan tersebut.

<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://www.danlogs.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>

Catatan: perlu kita pahami kalau json.feed.entry[i].summary.$t hanya akan tersedia jika URL feed yang kita ambil menggunakan http://www.danlogs.com/feeds/posts/summary dan bukan http://www.danlogs.com/feeds/posts/default

Sekarang bagaimana kita bisa membuat widget recent post tanpa disortir oleh label tertentu? widget ini juga hanya menampilkan 90 karakter pada summary. berikut contoh codenya:

<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.danlogs.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

Author: Danang Probo Sayekti

A self-proclaimed geek, business owner, and part-time blogger.

Comments on “Blogger JSON Feed API”