Facebook Stream Box (New Widget Embed)

Klik gambar di bawah untuk testing!

Facebook Stream Box adalah sebuah fasilitas (widget) seperti pendahulunya yaitu Facebook Connect dan Facebook Comments Box.

Nah apa keuntungan dan fungsi nya? Bagi yang punya account dan profile di Facebook dan kebetulan punya blog, widget ini sangat berguna sekali karena kita bisa melihat update dari temen - temen kita dan juga bisa update status tanpa harus login ke halaman depan Facebook nya. Saya akan coba menjelaskan bagaimana memasang Facebook Stream Box di Blog.

Bagaimana memasang Facebook Stream box di Blog kita.
Berikut ini adalah Screen Shoot nya:

Facebook Stream Box (widget) ini menggunakan API key yang membutuhkan validasi XHTML, bisa di lihat di sample kodenya:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Sedangkan di blogspot kita tidak bisa merubah kode xhtml nya karena blogspot sudah mempunyai xhtml sendiri, lihat sample kode dan perbedaan nya:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/data" xmlns:b="http://www.google.com/2005/gml/b">

Perlu di ingat, kebanyakan Platform yang menyediakan Connect Cross Site (untuk media open social) ini biasanya menggunakan API key untuk validasi account penggunanya. bisa di lihat di sini apa sih yang di maksud API key.
Klik di sini untuk melihat bagaimana cara mendapatkan API key (aplikasi Facebook).

Tapi jangan khawatir untuk pengguna blogspot kawan bisa mencoba widget ini menggunakan iFrame yang di berikan Facebook Developer sendiri.
Contoh aplikasi dengan iFrame bawaan Facebook Developer:

Klik ini! Lihat Facebook Stream iFrame

Berikut adalah sample kode nya:

*Huruf yang berwarna biru adalah sebagian kode yang bisa di ubah setting nya.

Lihat contoh Widget Embed nya melalui iFrame (sudah saya pasang di Menu Plus):

So, apabila kawan mau buat sendiri loader XHTML nya bisa di lihat di bagian kedua di sini!
Ini adalah kode untuk di embed langsung di Blog / Web yang menggunakan PHP atau HTML basic untuk page web / Blog nya.

Berikut adalah sample kode nya:
Buat xd_receiver.html terlebih dahulu untuk engine Cross Domain Receiver Page nya,

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>

Lalu buat main_page.html untuk front end widget embed nya,

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<div> KONTEN YANG AKAN DI TAMBAHKAN ATAU YANG SUDAH ADA (bisa juga di
hapus)</div>
<fb:live-stream width="400" height="500"></fb:live-stream>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript">
</script>
<script type="text/javascript">FB.init("API_KEY", "http://domain_yang_di_gunakan.com/xd_receiver.htm");
</script>
</body>
</html>

*Huruf yang berwarna biru adalah sebagian kode yang bisa di ubah setting nya.
Kawan juga bisa lihat Dokumentasi kode nya dari Halaman Facebook Developer langsung.

Update 28 Juli 2009:
Untuk mendapatkan API key kita harus membuat dulu halaman aplikasi nya di Facebook Developer.
Dan juga harus mengatur dengan benar setting tiap tab nya agar widget yg kita pasang bisa berjalan sempurna di blog.
Yang paling penting adalah setting connect URL dan Base Domain nya, Silahkan masukan alamat url blog kawan, lihat contoh:

Perbedaan antara load iFrame dengan Embed kode langsung adalah terletak pada penggunaan Authentication nya.
Jika pada iFrame menggunakan Aplication ID yang di dapat saat membuat halaman aplikasi di Facebook.
Dan jika pada embed code menggunakan API Key pada halaman aplikasi yang kawan buat di Facebook.

Kelebihan Facebook Stream Box adalah pastinya memberikan pengunjung blog kita sebuah fasilitas update status Facebook dan melihat recent activity dari teman kita tanpa harus masuk halaman front end Facebook, selain itu juga bisa di integrasikan dengan Facebook connect atau system Comments box seperti Intense Debate yang saya gunakan (history user juga bisa di lihat di halaman Fans blog ini di Facebook).

Kelemahan Facebook Stream Box adalah karena masih tergolong versi baru jadi menu dan fasilitas yang di sediakan alakadarnya, maksudnya tidak seperti di halaman Facebook sebenarnya (ada view Inbox, view Photo album, Poke friends, dsb).

OK, sekian dulu artikel dari anime7graphic, semoga memberikan manfaat.
Silahkan kalau mau sharing komentar aja ya.