Friday 17 August 2012

Facebook - JavaScript SDK

JavaScript SDK ช่วยให้เราสามารถเรียกใช้งาน REST API, Graph API และ Dialogs และยังใช้ในการ render Social Plugins (ใน version ของ XFBML) นอกจากนั้นยังใช้ใน Canvas pages เพื่อ communicate กับ Facebook การใช้งาน JavaScript SDK เราจำเป็นต้องมี App ID เพื่อใช้ในการ initialize SDK สำหรับวิธีการ load JavaScript SDK ให้ดูตามตัวอย่างต่อไปนี้

ตัวอย่างวิธีการ load JavaScript SDK
ในการใช้งาน JavaScript นั้น เราจำเป็นต้องมี <div id="fb-root"><div> ซึ่งจะต้องไม่ถูกซ่อนโดยการใช้ display:none หรือ visibility:hidden จากนั้นเราจะต้องเรียก FB.init เพื่อ initialize SDK โดยใช้ App ID หลังจากนั้น JavaScript SDK จะเพิ่ม elements เข้าไปใน fb-root (ซึ่งควรจะมี position ที่ relative กับ body) fb-root ไม่ควรอยู่ภายใน element ที่มี position แบบ absolute หรือแบบ relative

จากตัวอย่างการ load JavaScript SDK ข้างต้นจะสังเกตุว่าใช้วิธี load JavaScript แบบ Asynchronous ซึ่งทำให้ไม่ block การ load element อื่นๆบน Web Page ส่วน function ที่ถูก assign ให้กับ window.fbAsyncInit จะถูกเรียกใช้งานทันทีที่ SDK ถูก load เรียบร้อย (ถ้าหากว่าเรามี code ที่ต้องการให้ run หลังจากที่ SDK ถูก load ก็ควรจะใส่ไว้ในบริเวณนี้)

ส่วน Channel File มีไว้สำหรับแก้ปัญหา cross domain ในบาง Browser สำหรับ content ใน Channel File มีเพียงแค่บรรทัดเดียว ดังต่อไปนี้


Channel File ควรจะถูก cache ไว้ให้นานที่สุด สำหรับตัวอย่างต่อไปนี้ เป็นตัวอย่างในการสร้าง Channel File โดยใช้ PHP มาช่วยในการทำ caching


แหล่งที่มา : http://developers.facebook.com/docs/reference/javascript/

1 comment:

  1. activity feed จาก facebook มาใส่ใน blogger แล้วไม่แสดงครับ JavaScript SDK ผมเอาไปวางใน template ของ blogger แล้วครับ แนะนำยังไงดีครับ

    ReplyDelete