Facebook SDK untuk JavaScript
Versi Graph API

SDK Facebook untuk JavaScript dengan jQuery

Dalam tutorial ini, Anda akan mempelajari cara menggabungkan SDK JavaScript Facebook ke dalam aplikasi web berbasis jQuery. Baik jQuery maupun SDK JavaScript memberikan solusinya masing-masing SDK untuk menunda eksekusi kode hingga perpustakaan sudah dimuat, dan tutorial ini akan membantu Anda menggabungkan keduanya dan memastikan bahwa keduanya siap digunakan sebelum Anda mengaktifkan SDK.

Contoh ini menggunakan jQuery 2.0.0 yang dikelola dari CDN Perpustakaan yang Dihosting oleh Google. Untuk menemukan informasi selengkapnya tentang jQuery, lihat Dokumentasi jQuery

Penerapan

Tambahkan jQuery ke kepala dokumen Anda, dan implementasikan metode $(document).ready(), yang akan dieksekusi saat DOM selesai dan jQuery diinisialisasi. Halaman Anda akan terlihat seperti ini:

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>jQuery Example</title>
  <script>
    $(document).ready(function() {
      // Execute some code here
    });
  </script>
</head>

Alih-alih mengimpor SDK JavaScript Facebook dengan skrip asinkron default, gunakan metode getScript() untuk mengimpor SDK dari URL yang benar untuk bahasa pengguna Anda. Anda dapat menghapus protokol dari awal URL, dan ini akan melayani protokol yang cocok untuk URL saat ini.

Secara default, jQuery menandai waktu permintaan asinkron untuk menghindarinya disinggahkan oleh browser. Anda akan diminta untuk menonaktifkan fungsi ini dengan menggunakan metode ajaxSetup(), sehingga SDK tersebut disinggahkan secara lokal antar halaman.

Metode getScript() bersifat asinkron, sehingga Anda akan meneruskan fungsi callback anonim seperti yang biasanya dapat Anda lakukan pada kode inisialisasi SDK Anda. Tambahkan ID Aplikasi untuk aplikasi Anda dari Dasbor Aplikasi.

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
    FB.init({
      appId: '{your-app-id}',
      version: 'v2.7' // or v2.1, v2.2, v2.3, ...
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

Decoupling Dependensi

Menempatkan semua logika invokasi SDK Anda di callback getScript akan memberikan jaminan bahwa objek FB sudah ada, tetapi tidak menjadi pola desain yang bagus untuk aplikasi yang kompleks. Karena objek FB bersifat global, Anda dapat memasukkan logika SDK di luar callback getScript sejauh Anda memastikan bahwa logika ini sudah ada sebelum memanggilnya. Atau, Anda dapat menggunakan kerangka kerja dependensi modul seperti RequireJS untuk memastikan bahwa objek FB dimuat sebagai bagian dari penyiapan aplikasi.

Lihat Juga