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.

blogger feed grabber

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

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.




Related Artikel Mengambil Content Blogger Menggunakan Javascript

11 comments:

  1. bingung ane gan, mau ane praktekin dulu

    ReplyDelete
    Replies
    1. Silahkan di praktekin dulu gan, buat file index.html secara offline,
      BTW bingungnya dibagian mana gan..?

      Delete
  2. gan. kalau mau ngambil nama sama link author gimana contohnya?

    ReplyDelete
    Replies
    1. contohnya scriptnya seperti ini gan :

      <script type="text/javascript">
      function DataBlog(json){
      var NamaAuthor=json.feed.author[0].name.$t;
      var UrlAutor=json.feed.author[0].uri.$t;
      document.write('<p>Nama =' + NamaAuthor + '<br/>Url = '+UrlAutor+'</p>')
      }
      </script>

      NB : kalau pemilik blog menggunakan akun google+
      maka "url author" tidak akan muncul pada feed blogger.

      jadi code hanya bisa dipakai kalau pemilik blog tsb
      masih menggunakan akun default blogger,

      kalau untuk nama author tidak ada masalah ^_^

      Delete
  3. Replies
    1. Selamat mencoba gan,
      BTW ane sudah berkunjung ke blog agan
      sepertinya web developer juga ya
      salam otak atik code ya gan ^_^

      Delete
  4. Artikel diatas bagus sekali sobb izin copas ya ! TeknikKu-pedia
    Sangat membantu sekali .

    Mohon kunjungi balik web kami dan meninggalkan komentarnya di TeknikKu-pedia

    Ini juga bermanfaat loh
    Klasifikasi Kabel Fiber Optic


    Program Java
    Bisnis Online
    YouTube

    ReplyDelete
  5. jika ingin mengambil gambar di postingan gmna gan ?? ko ane coba hanya link gambarnya saja
    Tolong Pencerahannya Gan :D

    ReplyDelete
    Replies
    1. sudah benar itu gan,
      tinggal memproses link itu agar menjadi code gambar.

      contoh javascript mudahnya kayak gini :

      function AmbilContent(json) {
      for (var i = 0; i < json.feed.entry.length; i++) {
      var gambar = json.feed.entry[i].media$thumbnail.url;
      var hasilItem = '<img src="'+gambar+'"/>';
      document.write(hasilItem);
      }
      }

      Delete
    2. hehehe udh berhasil tapi cara mengambil link nya gmna yahh ? udh nyoba pke yg diatas ehh tetep error
      #LinkPostingan

      Delete
    3. OKe Sudah Berhasil Gan :D Makasih Bro Tutornya Semoga Sukses Selalu Ya :D

      Delete