Facebook App Dengan Javascript

26 views

Hampir semua pengguna internet tidak gila lagi dengan Facebook, bahkan sudah mempunyai akun Facebook. Bagi pemilik website hal ini sanggup mambantu untuk mendapat gosip pengguna atau user yang berkunjung di situsnya. Terinspirasi dari tutorial yang saya baca, maka saya ingin membagikan sedikit tutorial untuk menciptakan register button yang terhubung dengan Facebook App dengan memakai Javascript.

Sebelumnya kita memerlukan domain untuk didaftarkan di Facebook Developers. Untuk domain localhost hingga ketika goresan pena ini dibentuk saya masih belum yakin apa sanggup dijalankan dengan memakai port” tertentu atau dengan mengubah settingan” lainnya. Mungkin ada yang lebih paham sanggup membahas wacana hal ini. 😀

Selanjutnya daftar di Facebook Developers pilih hidangan Apps > Create a New App untuk menciptakan app baru. Maka akan muncul box untuk menciptakan app baru. Isi field-field yang ada, pilih kategori aplikasi, lalu klik Create App. Selanjutnya akan muncul Security Check, kita cukup mengisi instruksi captcha yang ada lalu 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 kalau kita perhatikan ternyata ada keterangan “This app is in development mode” dan ada bulat dengan garis hijau di samping judul app yang kita buat. Jika bulat 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 sanggup diakses secara umum.

Sebelum mengaktifkan app kita perlu menambahkan beberapa detail app di hidangan Setting pada tab Basic. Di sini yang perlu kita isi untuk mengaktifkan app kita yaitu Contact Email, isi dengan email kita yang aktif. Kemudian untuk mengintegrasikan app dengan website kita klik button Add Platform lalu pilih Website. Maka akan muncul section gres berjulukan 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 hidangan Status & Review lalu klik button switch yang bertuliskan No untuk mengaktifkannya. Kemudian akan muncul obrolan box untuk konfirmasi, klik Confirm. App yang kita buat sudah aktif dan sanggup diakses secara umum.

Setelah app selesai, kini kita kembali ke website kita. Buat halaman index.html dan home.html, index.html untuk menampilkan button register dan home.html untuk landing page kalau 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 sanggup ketika menciptakan facebook app. Selanjutnya pada fungsi fblogin yang akan dipanggil ketika button register diklik ada 2 kondisi, yaitu kalau response.authResponse bernilai true yang berarti app kita sudah mendapat permission dari user, maka web akan diarahkan ke home.html, dan kalau app kita tidak mendapat permission yang akan menjalankan fungsi reload untuk me-reload halaman index.html. Berikut instruksi 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 dipakai untuk memanggil obrolan box yang akan ditampilkan kalau button register diklik. Mari kita perhatikan kembali instruksi javascript di atas, 3 baris sebelum fungsi fblogin, ada baris berikut:

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

Sehingga kalau kita klik tombol register maka akan muncul obrolan box ibarat berikut:

Klik okay untuk menawarkan permission pada app yang kita buat, sesudah itu web akan menuju ke halaman home.html. Selesai..
Untuk pengembangannya sanggup diadaptasi 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.

Author: 
    author
    No related post!