Mengambil Content Blogger Menggunakan Javascript

Pernah membuat autoblog..? atau mungkin membuat template blogger..?
Kali ini kita akan mempelajari cara untuk mengambil content blog dengan memanfaatkan feed/RSS. Dengan memahami code feed ini kita juga bisa membuat AutoBlog (Blog yang terisi content secara otomatis), karena autoblog pada dasarnya memiliki konsep dan teknik yang sama.

1. URL script penyimpan feed

Pada blogger mereka memakai code API  google untuk mengola array  feed, berikut contoh feed yang dipakai pada www.webjalanan.com

http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=3&alt=json-in-script&callback=AmbilContent

Penjelasan URL diatas :

• /feeds/posts/default? ==> Dipakai bila ingin memanggil isi standard feed blog
• orderby=published ==> Memanggil data postingan terbaru secara berurutan
• max-results=3 ==>  Angka 3 adalah banyaknya post yang mau diambil.
• alt=json-in-script ==> Kita memanggil code berupa array javascript
• callback=AmbilContent ==> Ini adalah nama fungsi yang akan kita bahas dibawah

Query lain silahkan lihat di Google Data API

Dari hasil URL diatas akan membuka javascript dengan array feed standard, berikut ini tabel object yang kita dapat dari URL diatas :

JavaScript Object	Fungsi Object
json.feed.id.$t	Melihat ID Blog
json.feed.updated.$t	Tanggal update terakhir
json.feed.category[]	Melihat semua kategori/label blog
json.feed.category[i].term	Melihat kategori tertentu
json.feed.title.$t	Nama blog
json.feed.subtitle.$t	Deskripsi blog
json.feed.author[]	Nama Pemilik Blog
json.feed.author[i].name.$t	Nama Admin Blog
json.feed.author[i].uri.$t	URL  Admin
json.feed.openSearch$totalResults.$t	Jumlah postingan
json.feed.entry[]	Array Dasar postingan blog
json.feed.entry[i].id.$t	Id postingan
json.feed.entry[i].title.$t	Judul postingan
json.feed.entry[i].published.$t	Waktu postingan di publikasikan
json.feed.entry[i].updated.$t	Waktu postingan di perbaiki (update)
json.feed.entry[i].category[]	Kategori/label Postingan
json.feed.entry[i].category[x].term	Melihat postingan pada label tertentu
json.feed.entry[i].summary.$t	Melihat Summary postingan
json.feed.entry[i].content.$t	Isi postingan lengkap
json.feed.entry[i].link[]	Link dari postingan
json.feed.entry[i].link[x].href	Link pada postingan tertentu
json.feed.entry[i].author[]	Array dari Author postingan (lebih dari 1 admin)
json.feed.entry[i].author[x].name.$t	Nama admin pembuat postingan
json.feed.entry[i].author[x].uri.$t	Melihat url admin pembuat postingan
json.feed.entry[i].author[x].gd$image.src	Melihat Image / Avatar admin pembuat postingan
json.feed.entry[i].media$thumbnail.url	Mengambil thumbnails url pada postingan
json.feed.entry[i].thr$total.$t	Melihat jumlah komentar pada postingan

2. Script Fungsi Pengelola Feed

Sekarang kita akan membuat simple javascript, yang berfungsi untuk merubah link diatas menjadi sebuah tampilan sesuai data yang kita inginkan, berikut contoh code yang akan kita pakai bila ingin memanggil title dan isi content pada 5 postingan terbaru :


<script type="text/javascript">
  function AmbilContent(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      var judulPost = json.feed.entry[i].title.$t;
      var isiPost = json.feed.entry[i].content.$t;
      var hasilItem = '<h1>' + judulPost + '</h1><p>' + isiPost + '</p>';
      document.write(hasilItem);
    }
  }
</script>

<script src="http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=5&alt=json-in-script&callback=AmbilContent"></script>



Untuk memanggil code yang lain sesuai kebutuhan, tinggal membuat variabel baru dan ambil fungsi sesuai dengan tabel diatas; contoh bila kita ingin memanggil kategori/label, maka kita bisa membuat variabel baru,  contoh:

var namaLabel = json.feed.category[i].term


Code standard diatas menggunakan fungsi loop  ( mengulangi suatu fungsi ), jadi secara otomatis dia akan membuat nomor urut, dengan demikian kita bisa memanggil post tertentu dengan memasukkan nomor urut dari post target, contoh bila kita akan memanggil nama kategori ke 6, maka kita gunakan code seperti ini :

var namaLabel6 = json.feed.category[6].term


Banyak trik javascript lain yang bisa kita pakai dengan memanfaatkan script feed dari blogger, kita juga bisa membuat autoblog dengan meggabungkan code javascript, HTML dan CSS sebagai tampilannya.

Contoh code simpel AutoBlog


<html>
<head>
<title>Blogger Feed Grabber</title>
<style>
.wrapper {
    background: #ccc none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 50px;
    padding: 20px;
}
.titleblog {
    background: #f7f7f7 none repeat scroll 0 0;
    color: #ccc;
    margin: 0 0 20px;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}
.contentblog {
    background: #ffffff none repeat scroll 0 0;
    padding: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
function AmbilContent(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
    var judul = json.feed.entry[i].title.$t;
    var isi = json.feed.entry[i].content.$t;
    var hasilItem = '<div class="wrapper"><h1 class="titleblog">'+judul+'</h1><div class="contentblog">'+isi+'</div></div>';               
    document.write(hasilItem);
     }
   }
</script>
<script src="http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=5&alt=json-in-script&callback=AmbilContent"></script>
</body>
</html>



Silahkan copy dan paste code diatas pada notepad, kemudian simpan dengan nama index.html, kemudian buka file index.html tersebut menggunakan browser, dan lihat hasilnya kemudian kembangkan sendiri codenya.

Code tersebut berfungsi untuk mengambil 5 postingan terbaru dari www.webjalanan.com, yang kemudian dibuat sebagai halaman baru.

---

---