Menggunakan Blogger JSON Feed API

June 18, 2018 - #blog #blog_tutorial

Menggunakan Blogger JSON Feed API

Blogger JSON Feed API merupakan hal penting dan inti bagi para blogger template developer untuk membuat widget-widget unik atau konten-konten tertentu yang tidak bisa dilakukan pada settingan blogger biasa. Dengan Blogger JSON Feed API, kita dibolehkan Retrieves informasi data setiap postingan di blogger. Layaknya, seperti database SQL yang di fetch dengan PHP.

Perlu pengetahuan dasar Javascript khususnya pengetahuan tentang looping rules agar dapat melakukan hal ini. Namun, cara belajar masing-masing orang berbeda-beda. Ada yang memahami dengan praktek, lalu teori dan sebaliknya.

Jika kamu familiar dengan retrieve data seperti dengan SQL dan PHP, rasanya ini sangat mudah. Yang perlu diketahui adalah cara pengambilan setiap data dan cara penyampaiannya dengan Javascript terhadap tulisan HTML yang akan ditulis nantinya.

Ada beberapa query untuk mendapatkan setiap informasi dari sebuah post

Objek	Deskripsi	Example
json.feed.id.$t	Blog ID	tag:blogger.com,1999:blog-12345
json.feed.updated.$t	Update blog terakhir	2013-07-08T18:21:57.051+07:00
json.feed.category[]	Label array semua postingan blog
json.feed.category[i].term	Label ke-i	Fun
json.feed.title.$t	Nama Blog	Audiralog
json.feed.subtitle.$t	Deskripsi Blog	Audiralog is my blog personal
json.feed.author[]	Array dari Author di Blog	Raka Audira, Matt Cutts
json.feed.author[i].name.$t	Nama author ke-i di Blog	Raka Audira
json.feed.author[i].uri.$t	URL Author ke-i di Blog	https://profiles.google.com/123456789
json.feed.openSearch$totalResults.$t	Jumlah total postingan	777
json.feed.entry[]	Array postingan dari Blog
json.feed.entry[i].id.$t	Post ID untuk post ke-i	tag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$t	Judul post untuk post ke-i	Blogger JSON Feed API
json.feed.entry[i].published.$t	Menunjukkan waktu published/diterbitkan untuk post ke-i	2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t	Menunjukkan waktu updated/terakhir disunting untuk post ke-i	2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[]	Label array dari sebuah post ke-i
json.feed.entry[i].category[x].term	Menunjukkan label ke-x dari sebuah post ke-i	Fun, Blog
json.feed.entry[i].summary.$t	Summary atau snippet post	Maybe sometimes we need a widget...
json.feed.entry[i].content.$t	Konten post (Termasuk markah HTML)	Maybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[]	Link Array dari sebuah post
json.feed.entry[i].link[x].href	Link post ke-x dari post ke-i	https://audiralog.blogspot.com/2018/06/myfirstpost.html
json.feed.entry[i].author[]	Array author dari post ke-i
json.feed.entry[i].author[x].name.$t	Nama author ke-x pada post ke-i	Raka Audira
json.feed.entry[i].author[x].uri.$t	Link profile author ke-x pada post ke-i	https://profiles.google.com/123456789
json.feed.entry[i].author[x].gd$image.src	Profil image URL dari author ke-x pada post ke-i	//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url	Image URL dari post ke-i (Gambar Pertama dari post)	http://3.bp.blogspot.com/danlogs.jpg
json.feed.entry[i].thr$total.$t	Jumlah thread komentar dari post ke-i	7

Untuk penggunaanya, kita memerlukan sebuah callback function,
Misalkan, saya ingin mengambil 5 judul post yang berlabel "fun"

<script type="text/javascript">//<![CDATA[
function dapatsemuajudul(json){
  var entry=json.feed.entry[i];
  for(var i=0;i<entry.length;i++){//looping i sebanyak jumlah post(entry.length)
   var posttitle=entry.title.$t;
    for(var j=0;j<entry.link.length;i++){
     if(entry.link[j].rel == "alternate"){
      var posturl=entry.link[j].href;//dapatkan link setiap post ke-i
     }
    }
   var posttag=[];var posttagwrite="";
   for(var k=0;k<entry.category.length;k++){
   //setiap post bisa ada beberapa label, jika diambil secara biasa hanya akan terambil satu label pertama saja setiap post
   //Maka perlu diambil semua label pada setiap index post atau post ke-i
    posttag.push(entry.category[k].term);//masukkan ke dalam array
   }
   for(var t=0;t<posttag.length;t++){
    posttagwrite+="<a href='../search/label/"+posttag[t]+"?max-results=5'>"+posttag[t]+"</a> ";
   }
   document.write('<li><a href="'+posturl+'">'+posturl+'</a><br/>'+posttagwrite+'</li>')//print sebanyak dan setiap post i
  }
}
//]]></script>

Lalu panggil function tersebut dengan callback di tempat yang diinginkan

<script src="/feeds/posts/summary/-/fun?max-results=5&alt=json-in-script&callback=dapatsemuajudul"></script>

atau

<script src="http://DOMAIN-BLOG.blogspot.com/feeds/posts/summary/-/fun?max-results=5&alt=json-in-script&callback=dapatsemuajudul"></script>

Perlu diketahui, bahwa /summary/ diperuntukkan untuk mengambil snippet/summary dengan

json.feed.entry[i].summary.$t

Jika ingin mengambil konten full termasuk markah HTML dengan

json.feed.entry[i].content.$t

maka summary diganti dengan default, misalkan

<script src="http://audiralog.blogspot.com/feeds/posts/default/-/fun?max-results=5&alt=json-in-script&callback=dapatsemuajudul"></script>

?max-results=5
Angka 5 menunjukkan jumlah informasi post yang di-retrieve

&callback=dapatsemuajudul
Callback yang sesuai dengan nama function

Setelah function dipanggil, maka hasil HTML markah dari "dapatsemuajudul" adalah mengulang dari document.write sebanyak i (sebanyak max-results)

Terlihat mudah?

Lalu bagaimana cara pengembang blogger template me-implementasikan penggunaan ini untuk membuat konten menarik atau widget-widget unik. Berikut implementasinya :
Membuat Slide Owl-Carousel2 dengan Blogger JSON Feed API

Mudah-mudahan, akan ada konten lainnya dengan Blogger JSON Feed API .