Terus terang, saya sudah lama sekali penasaran bagaimana caranya facebook bisa langsung melakukan update pada bagian feednya. Jadi ketika kita mengupdate status di facebook status tersebut langsung hadir didalam feed berita yang ada persis dibawahnya. Feed tersebut bergeser kebawah dan status yang baru muncul dengan mulusnya dibagian paling atas dari feed berita.

Sempet frustasi juga mikirin gimana caranya kok bisa bikin kayak begitu ya? Dan, tak disangka-sangka, pada saat saya sedang mengerjakan online application yang sedang saya buat, keinget kembali status facebook ini. Kemudian, dengan modal trial-and-error, alias coba-coba akhirnya cuhuy deh ketemu. Duh, bahagianyaa... :)

Kira-kira seperti ini teknik yang saya gunakan:

1. Membuat template-nya

   Untuk contoh yang sederhana ini saya akan menggunakan 2 template yaitu Template Form dan Template Feed

   Snippet Template Form adalah sebagai berikut

   <form action="javascript:void(0);">
  <textarea name="status"></textarea><br />
  <input type="button" name="update" value="update" />
</form>

   dan untuk Snippet Template Feed adalah sebagai berikut

   <div class="the-feed" style="height: 100px; width: 300px; border:1px solid black;">
  <ul>
    <li>Last Feed</li>
  </ul>
</div>

2. Include jQuery

   Sesuai dengan judulnya, saya menggunakan jQuery untuk membantu saya dengan feature ini. Karena masalah trust, saya lebih memilih untuk mengambil langsung jQuery yang berasal dari server Google

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

3. Bikin fungsi interactive update

   Fungsi ini yang nantinya akan membuat update status menjadi beranimasi seperti yang facebook miliki

   var interactiveUpdate = function(id,update) {
  var idparam = '.'+ id + ' ul li:first-child';

  // insert new list onto the first child of ul and hide it
  $(idparam).before('<li style="display:none;">'+update+'</li>');

  // display the hidden first child using jQuery's effect slideDown()
  $(idparam).slideDown("slow");
}

   Fungsi ini memiliki tiga parameter penting, yaitu: id, update, and ul.

   • id : adalah parameter yang mengacu kepada attribute class di dalam
     yang ada di Template Form. Dalam contoh ini saya menggunakan class "example-status-1422" (agak ribet supaya classnya unik dan tidak sama dengan class-class yang lainnya).
   • update : adalah string / kalimat yang ingin di tampilkan kedalam Template Feed
   • ul or ol : jika didalam Template Form kita menggunakan <ul> maka dalam fungsi diatas juga harus menggunakan ul. Demikian halnya jika di Tempate Form digunakan <ol>, maka pada fungsi diatas ol jugalah yang harus digunakan.

4. Mempersiapkan fungsi javascript untuk menghandle proses update status

   Fungsi ini akan bekerja setiap kali tombol "update" ditekan.

   $(function(){updateStatus();});

var updateStatus = function() {
   // Set the event if the button is clicked
  $('input[name="update"]').click(function() {

    // grab the status
    var stat = $('textarea[name="status"]').val();

    // call the interactiveUpdate snippet
    interactiveUpdate('the-feed',stat);
  });
}

5. Nah, tinggal menggabungkan semuanya dan.. SELESAI!

   Mari kita coba... (Ketikkan sesuatu pada isian Template Form dan tekan tombol "update", kemudian perhatikan bagian Template Feed)

   Template Form:

   Template Feed:

   • Last Feed

Tutorial ini sama sekali tidak melakukan koneksi dan menyimpan status yang baru kedalam database. Namun bukan berarti hal tersebut tidak mungkin. Dengan menggunakan konsep AJAX melalui aturan-aturan yang ada pada jQuery, koneksi ke database dapat dilakukan dengan cukup mudah. Sehingga dapat dibuat suatu kondisi ketika proses penyimpanan status yang baru kedalam database berhasil dengan sukses maka status yang baru akan muncul di list feed paling atas.

Download

Source code keseluruhannya dapat di download disini. Ini sudah saya paketkan beserta jquery, jadi tinggal dicoba-coba saja.

Compatibilitas

Feature ini sudah saya coba di beberapa browser, yaitu:

• Google Chrome 3.0.195.27
• Firefox 3.5.3
• Opera 10.00
• Safari 4.0.3
• IE 8.0.6001

Apabila pada poin ke 5 tersebut tidak berfungsi sebagaimana mestinya di browser tertentu, Kabar-kabari yak... :)