การเริ่มต้นใช้งานอย่างง่าย: Facebook SDK สำหรับ JavaScript

Facebook SDK สำหรับ JavaScript มาพร้อมชุดฟังก์ชั่นการทำงานฝั่งไคลเอ็นต์ที่ครบครันซึ่งมีคุณสมบัติต่างๆ ดังต่อไปนี้

ช่วยให้คุณสามารถใช้ปุ่มถูกใจและโซเชียลปลั๊กอินอื่นๆ บนเว็บไซต์ของคุณได้
ช่วยให้คุณสามารถใช้การเข้าสู่ระบบด้วย Facebook เพื่อทำให้ผู้คนสมัครใช้งานบนเว็บไซต์ของคุณได้สะดวกขึ้น
ทำให้การเรียกใช้ไปยัง API กราฟของ Facebook เป็นไปโดยง่าย
เปิดใช้กล่องโต้ตอบที่ช่วยให้ผู้ใช้สามารถดำเนินการต่างๆ ได้ เช่น การแชร์สตอรี่
ช่วยให้สื่อสารได้สะดวกยิ่งขึ้น เมื่อคุณสร้างเกมหรือแท็บแอพบน Facebook

การเริ่มต้นใช้งานอย่างง่ายนี้จะแสดงให้คุณเห็นวิธีการตั้งค่า SDK และนำมาใช้ในการเรียกใช้ API กราฟแบบพื้นฐานบางรายการ หากคุณยังไม่ต้องการตั้งค่าในตอนนี้ คุณสามารถใช้คอนโซลทดสอบ JavaScript ของเรา เพื่อใช้เมธอด SDK ทั้งหมดและสำรวจตัวอย่างบางรายการได้ (คุณสามารถข้ามขั้นตอนการตั้งค่าได้ แต่การเริ่มต้นใช้งานอย่างง่ายนี้ในส่วนที่เหลือจะสามารถทดสอบได้ในคอนโซล)

เบราว์เซอร์ที่รองรับ

Facebook SDK สำหรับ JavaScript รองรับสองเวอร์ชั่นล่าสุดของเบราว์เซอร์ที่ได้รับความนิยมมากที่สุด ได้แก่ Chrome, Firefox, Edge, Safari (รวมถึง iOS) และ Internet Explorer (เวอร์ชั่น 11 เท่านั้น)

การตั้งค่าพื้นฐาน

Facebook SDK สำหรับ JavaScript ไม่มีไฟล์แบบสแตนด์อโลนใดๆ ที่จำเป็นต้องดาวน์โหลดหรือติดตั้ง คุณเพียงจำเป็นต้องใส่ JavaScript ปกติแบบสั้นๆ ลงใน HTML ของคุณแทน ซึ่งจะโหลด SDK ลงในหน้าของคุณแบบอะซิงโครนัส การโหลดแบบอะซิงโครนัสดังกล่าวหมายความว่าการดำเนินการนี้จะไม่บล็อกการโหลดองค์ประกอบอื่นๆ ในหน้าของคุณ

ส่วนย่อยของโค้ดต่อไปนี้จะทำให้ได้ SDK เวอร์ชั่นพื้นฐาน โดยระบบจะตั้งค่าตัวเลือกต่างๆ ไว้เป็นค่าเริ่มต้นแบบทั่วไปที่สุด โดยคุณควรแทรกส่วนย่อยของโค้ดนี้ไว้โดยตรงที่ด้านท้ายแท็กเปิด <body> ในแต่ละหน้าที่คุณต้องการโหลด SDK

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      xfbml            : true,
      version          : 'v21.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

โค้ดนี้จะโหลดและเริ่มต้นการทำงานของ SDK คุณจะต้องแทนที่ค่าใน your-app-id ด้วย ID ของแอพ Facebook ของคุณเอง ซึ่งคุณสามารถหา ID นี้ได้โดยใช้แดชบอร์ดของแอพ

ขั้นตอนถัดไป

การตั้งค่าขั้นสูง ตัวอย่างการใช้งาน