Facebook SDK สำหรับ JavaScript โดยใช้ RequireJS
ในบทแนะนำการใช้งานนี้ คุณจะได้เรียนรู้วิธีการรวม Facebook SDK สำหรับ JavaScript เข้ากับโมดูล JavaScript อื่นๆ โดยใช้ RequireJS โดยทั่วไปแล้ว JavaScript SDK ไม่สามารถทำงานร่วมกับลักษณะการออกแบบ Asynchronous Module Definition (AMD) ได้ ดังนั้นบทแนะนำการใช้งานนี้จึงครอบคลุมถึงการเขียนชิ้นข้อมูลเพื่อให้มีอ็อบเจ็กต์ FB ที่สร้างขึ้นโดย SDK นี้
บทแนะนำการใช้งานนี้ตั้งอยู่บนสมมติฐานที่ว่าคุณคุ้นเคยกับโมดูล RequireJS และ JavaScript อยู่แล้ว ทำความเข้าใจเพิ่มเติมเกี่ยวกับ RequireJS
การกำหนดค่า
กำหนดค่าสคริปต์ RequireJS อื่นๆ ตามปกติ แล้วเพิ่มไฟล์ .js ใหม่สำหรับการโต้ตอบกับ Facebook SDK โปรเจ็กต์นี้สมมติให้โครงสร้างของไดเรกทอรีมีลักษณะคล้ายกับโครงสร้างด้านล่างนี้
- project/
- index.html
- scripts/
- main.js
- require.jsเพิ่มไฟล์ใหม่สำหรับการกำหนดค่าและการโต้ตอบกับ SDK ดังนี้
- project/
- index.html
- scripts/
- main.js
- require.js
- fb.jsคุณควรนำเข้าสคริปต์ requirejs และแสดง main.js เป็น data-main ของคุณดังต่อไปนี้:
<script data-main="scripts/main" src="scripts/require.js"></script>
การเพิ่มชิ้นข้อมูลลงใน Facebook SDK
ในสคริปต์โปรเจ็กต์หลักของคุณ ให้เพิ่มการแสดงชิ้นข้อมูลลงใน require.config ดังที่แสดงไว้:
require.config({
shim: {
'facebook' : {
exports: 'FB'
}
},
paths: {
'facebook': 'https://connect.facebook.net/en_US/sdk.js'
}
})
require(['fb']);การดำเนินการนี้จะสร้างโมดูล facebook โดยใช้ URL ของ JavaScript SDK และทำเครื่องหมายอ็อบเจ็กต์ FB เป็นสิ่งที่ส่งออกสำหรับโมดูลนั้น
ใน fb.js ที่คุณเพิ่งสร้างขึ้นใหม่ คุณสามารถสร้างอินสแตนซ์และใช้อ็อบเจ็กต์ของ FB ได้ตามปกติ เพิ่ม ID ของแอพสำหรับแอพของคุณจากแดชบอร์ดของแอพ
คุณแค่กำหนดเขตของโค้ดไว้ในบล็อกกำหนดค่า โดยส่งผ่านโมดูลของชิ้นข้อมูล facebook ในรูปแบบของลักษณะการขึ้นต่อกันที่กำหนดไว้
define(['facebook'], function(){
FB.init({
appId : '{your-app-id}',
version : 'v19.0'
});
FB.getLoginStatus(function(response) {
console.log(response);
});
});