Facebook SDK สำหรับ JavaScript ที่ใช้ jQuery
ในบทแนะนำการใช้งานนี้ คุณจะได้เรียนรู้วิธีการรวม Facebook JavaScript SDK เข้ากับแอพเว็บที่ใช้ jQuery ของคุณ ทั้ง jQuery และ JavaScript SDK มีโซลูชันของตัวเองที่เลื่อนการดำเนินการกับโค้ดออกไปจนกว่าไลบรารีจะโหลด และบทแนะนำนี้จะช่วยคุณรวมทั้งสองรายการเข้าด้วยกันและตรวจดูว่าทั้งสองรายการพร้อมใช้ก่อนจะกระตุ้น SDK
ตัวอย่างนี้ใช้ jQuery 2.0.0 ที่ได้รับบริการจาก CDN ไลบรารีที่โฮสต์ไว้ของ Google สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ jQuery โปรดดูที่ เอกสารประกอบ jQuery
การนำไปใช้
เพิ่ม jQuery ลงในส่วนหัวของเอกสารและนำวิธีการ $(document).ready() มาใช้ซึ่งจะดำเนินการเมื่อ DOM เสร็จสมบูรณ์แล้วและมีการสร้างอินสแตนซ์ของ jQuery แล้ว เพจของคุณจะมีลักษณะดังนี้:
<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>แทนที่จะนำเข้า Facebook JavaScript SDK ด้วยสคริปต์แบบอะซิงโครนัสตามค่าเริ่มต้น ให้ใช้วิธีการ getScript() ของ jQuery ในการนำเข้า SDK จาก URL ที่ถูกต้องสำหรับรูปแบบภาษาของผู้ใช้ของคุณ คุณสามารถกันโปรโตคอลนี้ออกไปตั้งแต่เริ่มต้น URL และการดำเนินการเช่นนี้จะให้บริการแก่โปรโตคอลที่ตรงกันสำหรับ URL ปัจจุบัน
ตามค่าเริ่มต้นแล้ว jQuery จะประทับเวลาคำขอแบบอะซิงโครนัสเพื่อหลีกเลี่ยงไม่ให้เบราว์เซอร์เก็บไว้เป็นแคช คุณจำเป็นจะต้องปิดใช้งานฟังก์ชั่นนี้โดยใช้วิธีการ ajaxSetup() เพื่อให้ SDK นี้ได้รับการแคชไว้ภายในเครื่องระหว่างเพจต่างๆ
วิธีการ getScript() ดังกล่าวเป็นแบบอะซิงโครนัส คุณจึงต้องส่งผ่านฟังก์ชั่นการเรียกกลับแบบไม่เปิดเผยตัวตนโดยคุณสามารถกำหนดโค้ดเริ่มต้น SDK ของคุณได้ตามปกติ เพิ่ม ID ของแอพสำหรับแอพของคุณจากแดชบอร์ดของแอพ
$(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);
});
});การแยกการขึ้นต่อกัน
การใส่ตรรกะการเรียก SDK ทั้งหมดของคุณในการเรียกกลับ getScript จะรับประกันว่ามีอ็อบเจ็กต์ของ FB อยู่ แต่ไม่ใช่ลักษณะการออกแบบที่ดีสำหรับแอพที่ซับซ้อน เนื่องจากอ็อบเจ็กต์ FB เป็นอ็อบเจ็กต์ทั่วไป คุณจึงสามารถวางตรรกะ SDK ไว้ด้านนอกการเรียกกลับ getScript ได้นานเท่าที่คุณได้ตรวจสอบแล้วว่ามีตรรกะดังกล่าวอยู่ก่อนการเรียกใช้ตรรกะนั้น อีกทางเลือกหนึ่ง คุณสามารถใช้กรอบการทำงานการขึ้นต่อกันของโมดูลได้ เช่น RequireJS เพื่อรับรองว่าอ็อบเจ็กต์ FB ดังกล่าวจะโหลดขึ้นมาเป็นส่วนหนึ่งของการตั้งค่าแอพพลิเคชั่น