Membuat fb login atau fbconnect

FB login atau login facebook atau juga lebih dikenal sebagai fbconnect adalah aplikasi dimana kita bisa membuat website yang kita miliki menjadi lebih interaktif dengan facebook. Misal kita bisa membuat koneksi antara facebook dengan wordpress ataupun facebook dengan blogspot. Cotoh paling sedehana dan sering kita jumpai adalah di sebuah situs berita,jika kita mengirim komentar pada berita tersebut. selain kita posting komentar, fb connect bisa otomatis mengirimkan feed dari berita yang terkomentari pada wall kita.

Tutorial kali ini, kita akan belajar bagaimana membuat login facebook sendiri. Tentu untuk yang pertama-tama kita bikin yang remeh-temh dulu namun menyenangkan. Aplikasi yang kita buat adalah membuat update status via blackberry,update status via iphone,update status via xxx dll dah. Sebnernya saya cukup bosan dengan tutorial update status via xxx, namun cuma ini yang paling sedehana dan paling mudah dimengerti untuk dipelajari. Juga nantinya akan saya tunjukan di tutorial berikutnya bagaimana mengembangkan aplikasi ini, untuk menajadi aplikasi yang lebih rumit lagi (stay tuned!!)

Tenntu kawan masih ingat, sarat membuat aplikasi facebook adalah mengambil API Key dan Secret. Caranya bagamana? males jawab. baca aja di tutorial facebook bagian I. Jadi kita langsung ke intinya saja OK

Langkah 1.
Yang agak berbeda disini adalah, pada saat set aplikasi facebook pertama kali kita harus mendefinisikan dulu dima kita meletakan (hosting) file2 kita. klo masih bingung, mungkin kawan bisa lihat gambar dibawah ini.

http://testappfacebook.iframe.web.id adalah tempat dimana saya meletakan aplikasi.

Langkah 2

Buatlah file xd_receiver.htm, kenapa harus? jawabnya= saya tidak tahu, saya cuma disuruh gitu ama si facebook wkwkwkwkwk!!!. isi dari xd_receiver.htm adalah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>

Langkah 3
Buat file utama ex:index.html. yang fungsinnya mengadate status atau wall kita

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
function publish() {
 FB_RequireFeatures(["Connect"], function() {
   FB.init('ddddddddddddddddd', 'xd_receiver.htm');  //ddddddddddddd adala API key
   FB.ensureInit(function() {
     FB.Connect.streamPublish();
   });
 });
}
</script>
<p>Stream Publish Test</p>
<a href="#" onclick="publish(); return false;">Post a story</a>
</body>
</html>

Hasilnya

jika mau coba silakan klik http://testappfacebook.iframe.web.id/

Anak berbakti

Apr 27, 2010

Membuat fb login atau fbconnect

2 comments: