Apa itu JSON-Feed?

Feed menghasilkan newsfeeds yang dapat dibaca oleh newsreaders, adalah file yang dibuat oleh server (dalam hal ini Blogger) yaitu berisi serangkaian label dengan informasi yang telah dipublikasikan dalam website. Yang membuat menarik adalah banyak format feed yang beredar dan untuk masing-masing flatform diantaranya terkadang memiliki perbedaan. Standar feed adalah RSS-feed (Rich Site Summary), menggunakan standar-XML dan Atom-feed.

Jika kita ingin menggunakan isi dari feed di aplikasi-web lain, kita memerlukan akses ke feed untuk membaca isinya dan menampilkannya pada halaman Web kita. XML-file yang berisi feed, terletak pada salah satu server Blogger, dalam domain blogger.com. Untuk alasan keamanan, browser tidak akan memungkinkan mengakses XML-file di domain lainnya. Jadi jika halaman Web kita tidak dalam domain blogger.com, bagaimana kita bisa mendapatkan akses ke sana?
Di sinilah JSON-feed sangat berguna.

JSON berarti: (Java Script Object Notation) adalah sebuah "file Khusus" yang diciptakan oleh server dan memiliki format yang berbeda, baca tentang JSon disini. Sebuah JSON-feed tidak diformat sebagai file XML, tetapi sebagai Javascript Object. Untuk membuatnya dapat diakses lintas domain, kita menggunakan fungsi panggilan kembali. Dalam bahasa Inggris yang sudah di translate: (kami meminta Blogger Server untuk menyerahkan JSON-objek ke fungsi yang kita tulis, dan fungsi ini mem-parsing JSON-object untuk mengambil feed). Dan karena sudah Javascript Object, parsing pun dapat dilakukan dengan mudah.

Ada banyak referensi Blogger feed yang bisa kita gunakan, seperti misalnya untuk menampilkan komentar terbaru (Recent Comments), posting terbaru (Recent Posts), posting yang berhubungan (Related Post), Random Posts, dan lain sebagainya.

Berikut ini salah satu contoh etri blog (Recent Post) yang diciptakan dengan JSon:

Seperti yang dikatakan Guru Besar Saya JMiur,bahwa untuk memahami hal tersebut tidaklah rumit, karena secara umum hanya memerlukan dua hal, yaitu memuat naskah yang menunjukkan bahwa kita ingin menjadikannya ke dalam format tersebut dan memiliki beberapa fungsi yang dapat menafsirkan dan memanipulasinya:

1. <script type="text/javascript">
function showfeedcontent(json) {
// Untuk melakukan sesuatu di sini
}
</script>
2. <script src="http://caprt3a.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showfeedcontent"></script>

Akan tetapi bagi saya hal tersebut tetap saja menjadi sesuatu hal yang rumit, abstrak dan tidak bisa diterjemahkan oleh nalar saya dan membuat saya menjadi pusing kepala. Jika teman-teman ingin lebih mengenal JSON-Feed, baca disini

Berikut ini contoh lain dari JSon-feed, untuk menampilkan enti blog berdasarkan Label tertentu, demonstrasi saya cloning dari halaman sumber:



Untuk membuatnya, silahkan gunakan data berikut ini:

<script language="JavaScript">
//<![CDATA[
imgr = new Array();
var contarlabels = 0;

//Yang harus kita tentukan
imgr[0] = "URL_image"; // Menentukan gambar standar
showRandomImg = true; //Tentukan false jika random gambar tidak diiginkan
summaryPost = 60; // Jumlah karakter yang akan ditampilkan
summaryTitle = 25; // Jumlah karakter dari judul
numposts = 5; // jumlah entri yang akan ditampilkan

// Daftar label yang ingin ditampilkan, di sini terdapat dua label dan bisa lebih jika diinginkan
// Letakan dalam tanda kutip dan dipisahkan dengan koma
labelname = new Array("CSS","JQuery"); // Nama label yang akan ditampilkan
labeltitle = new Array("CSS","JQuery"); // Judul label yang akan ditampilkan

// Ini adalah fungsi umum untuk menghapus tag HTML
function removeHtmlTagEtiquetas(strx,chop){
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }    
  }
  s =  s.join("");
  s = s.substring(0,chop-1);
  return s;
}

// Fungsi yang menganalisis dan menampilkan entri
function showrecentpostsetiquetas(json) {

  var salida = "";
  var salidainner= "";
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;

   // Judul posting
    var posttitle = entry.title.$t;

    // Mencari url posting
    var posturl;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == "alternate") {
        posturl = entry.link[k].href;
        break;
      }
    }

    // posting konten
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else
      if ("summary" in entry) { var postcontent = entry.summary.$t; }
    else var postcontent = "";

    // Mencari diantara gambar dan pilih lainya
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    // Selesai membaca setiap posting, kemudian membuat konten HTML
    var trtd = "";
    trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
    trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagEtiquetas(posttitle,summaryTitle) + '</a><br/>';
    trtd += removeHtmlTagEtiquetas(postcontent,summaryPost);
    trtd += ' ...<div class="botline"></div>';

   // Melanjutkan ke tahap berikutnya
    salidainner += trtd;
    j++;
  }

  // Setelah membaca jumlah posting dalam numposts kemudian menciptakan DIV HTML untuk ditampilkan
  salida += '<div class="featured">';
  salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
  salida += salidainner;
  salida += '<a class="morelabels" href="http://caprt3a.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">ver otras entradas de  '+ labelname[contarlabels] +'</a>';
  salida += '</div>';
  document.write(salida);
  contarlabels ++;

}
//]]>
</script>

<div id="MY_Demo">
  <script src="http://caprt3a.blogspot.com/feeds/posts/default/-/CSS?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <script src="http://caprt3a.blogspot.com/feeds/posts/default/-/JQuery?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
</div>
<div style="clear:both;"></div>