Hampir semua pengguna internet tidak asing lagi dengan Facebook, bahkan sudah memiliki akun Facebook. Bagi pemilik website hal ini dapat mambantu untuk mendapatkan informasi pengguna atau user yang berkunjung di situsnya. Terinspirasi dari tutorial yang saya baca, maka saya ingin membagikan sedikit tutorial untuk membuat register button yang terhubung dengan Facebook App dengan menggunakan Javascript.

Sebelumnya kita memerlukan domain untuk didaftarkan di Facebook Developers. Untuk domain localhost sampai saat tulisan ini dibuat saya masih belum yakin apa bisa dijalankan dengan menggunakan port" tertentu atau dengan mengubah settingan" lainnya. Mungkin ada yang lebih paham bisa membahas tentang hal ini. :D

Selanjutnya daftar di Facebook Developers pilih menu Apps > Create a New App untuk membuat app baru. Maka akan muncul box untuk membuat app baru. Isi field-field yang ada, pilih kategori aplikasi, kemudian klik Create App. Selanjutnya akan muncul Security Check, kita cukup mengisi kode captcha yang ada kemudian klik Submit.

App yang kita buat sudah jadi. App ID dan App Secret sudah tersedia pada dashboard. Pada tutorial kali ini, kita hanya memerlukan App ID saja. Namun jika kita perhatikan ternyata ada keterangan "This app is in development mode" dan ada lingkaran dengan garis hijau di samping judul app yang kita buat. Jika lingkaran tersebut disorot maka akan muncul tooltip dengan pesan "Not available to all users because your app is not live". Artinya app yang kita buat masih belum aktif dan belum bisa diakses secara umum.

Sebelum mengaktifkan app kita perlu menambahkan beberapa detail app di menu Setting pada tab Basic. Di sini yang perlu kita isi untuk mengaktifkan app kita adalah Contact Email, isi dengan email kita yang aktif. Kemudian untuk mengintegrasikan app dengan website kita klik button Add Platform kemudian pilih Website. Maka akan muncul section baru bernama Website dengan 2 field yaitu Site URL dan Mobile Site URL. Ketikkan nama domain website kita pada kedua field tersebut. Kemudian klik Save Changes untuk menyimpan perubahan.

Untuk mengaktifkannya pilih menu Status & Review kemudian klik button switch yang bertuliskan No untuk mengaktifkannya. Kemudian akan muncul dialog box untuk konfirmasi, klik Confirm. App yang kita buat sudah aktif dan bisa diakses secara umum.

Setelah app selesai, sekarang kita kembali ke website kita. Buat halaman index.html dan home.html, index.html untuk menampilkan button register dan home.html untuk landing page jika register berhasil. Pada halaman index, letakkan script Javascript sebagai berikut:

window.fbAsyncInit = function() {
	FB.init({
		appId: '869318509764280',
		cookie: true,
		xfbml: true,
		oauth: true
	});
};

(function() {
	var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol +
	'//connect.facebook.net/en_US/all.js';
	document.getElementById('fb-root').appendChild(e);
}());

function fblogin() {
	FB.login(function(response) {
		if (response.authResponse) {
			window.location = 'home.html';
		} else{
			window.location.reload();
		}
	}, {scope:'email'});
};

Kita lihat pada FB.init ada parameter appId, masukkan App ID yang telah kita dapat saat membuat facebook app. Selanjutnya pada fungsi fblogin yang akan dipanggil saat button register diklik ada 2 kondisi, yaitu jika response.authResponse bernilai true yang berarti app kita sudah mendapat permission dari user, maka web akan diarahkan ke home.html, dan jika app kita tidak mendapat permission yang akan menjalankan fungsi reload untuk me-reload halaman index.html. Berikut kode HTML untuk register button:

<a href="#" onclick="fblogin(); return false;">Register with Facebook</a>
<div id="fb-root"></div>

Mungkin ada yang bertanya untuk apa div dengan id fb-root tersebut. Div tersebut digunakan untuk memanggil dialog box yang akan ditampilkan jika button register diklik. Mari kita perhatikan kembali kode javascript di atas, 3 baris sebelum fungsi fblogin, ada baris berikut:

document.getElementById('fb-root').appendChild(e);

Sehingga jika kita klik tombol register maka akan muncul dialog box seperti berikut:

Klik okay untuk memberikan permission pada app yang kita buat, setelah itu web akan menuju ke halaman home.html. Selesai..
Untuk pengembangannya bisa disesuaikan dengan keperluan masing-masing pengembang. Berikut ini script lengkap untuk halaman index.html yang saya buat:

<!doctype html>
<html lang="en">
<head>
	<style>
		body{ padding: 30px; }
		a{
			padding: 20px;
			color: #fff;
			background-color: #428bca;
			border-color: #357ebd;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<a href="#" onclick="fblogin();return false;">Register with Facebook</a>
	<div id="fb-root"></div>
</body>
<script>
	window.fbAsyncInit = function() {
		FB.init({
			appId: '869318509764280',
			cookie: true,
			xfbml: true,
			oauth: true
		});
	};

	(function() {
		var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol +
		'//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());

	function fblogin() {
		FB.login(function(response) {
			if (response.authResponse) {
				window.location = 'home.html';
			} else{
				window.location.reload();
			}
		}, {scope:'email'});
	};
</script>
</html>

Sekian tutorial singkat dari saya. Semoga membantu.