Facebook SDK untuk JavaScript
Versi Graph API

SDK Facebook untuk JavaScript dengan RequireJS

Dalam tutorial ini, Anda akan mempelajari cara menggabungkan SDK Facebook untuk JavaScript dengan modul JavaScript lain menggunakan RequireJS. Biasanya, SDK JavaScript tidak kompatibel dengan pola desain Asynchronous Module Definition (AMD), sehingga tutorial ini mencakup penulisan shim untuk menyediakan objek FB yang dibuat oleh SDK ini.

Tutorial ini berasumsi bahwa Anda sudah sangat mengenali modul RequireJS dan JavaScript. Temukan selengkapnya tentang RequireJS.

Konfigurasi

Konfigurasi skrip RequireJS seperti biasa, dan tambahkan file .js baru untuk interaksi dengan SDK Facebook. Proyek ini mengasumsikan struktur direktori seperti di bawah:

- project/
   - index.html
   - scripts/
      - main.js
      - require.js

Tambahkan file baru untuk mengonfigurasi dan berinteraksi dengan SDK, seperti di bawah:

- project/
    - index.html
    - scripts/
       - main.js
       - require.js
       - fb.js

Anda dapat mengimpor skrip requirejs dan mendeklarasikan main.js sebagai induk data Anda seperti berikut:

<script data-main="scripts/main" src="scripts/require.js"></script>

Menambahkan shim ke SDK Facebook

Di skrip proyek utama Anda, tambahkan deklarasi shim ke require.config, seperti di tunjukkan:

require.config({
  shim: {
    'facebook' : {
      exports: 'FB'
    }
  },
  paths: {
    'facebook': 'https://connect.facebook.net/en_US/sdk.js'
  }
})
require(['fb']);

Ini akan menciptakan modul facebook, yang menggunakan URL SDK Facebook JavaScript, dan menandai objek FB sebagai ekspor untuk modul tersebut.

Di fb.js yang baru Anda buat, Anda dapat memberi contoh dan menggunakan objek FB seperti biasa. Tambahkan ID Aplikasi untuk aplikasi Anda dari Dasbor Aplikasi.

Anda hanya perlu mengemas kode dalam blok tertentu, meneruskan modul shim facebook sebagai dependensi yang diperlukan.

define(['facebook'], function(){
  FB.init({
    appId      : '{your-app-id}',
    version    : 'v19.0'
  });
  FB.getLoginStatus(function(response) {
    console.log(response);
  });
});

Lihat Juga