วิธีการใช้ Facebook SDK ด้วย Javascript สำหรับเพิ่ม Social Plugins บน Website

วิธีการใช้ Facebook SDK ด้วย Javascript เริ่มต้นด้วยการติดตั้ง Javascript SDK 

      การติดตั้งทำได้โดยการ Copy ตัว Source code ด้านล่างไปแปะหน้า ที่ต้องการใช้ Social plugins 

<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=7268793240xxxxx";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ตัวแปรต่างๆ ภายใน Source code ที่สำคัญประกอบด้วย

1. en_US

- ภาษาของ Social Plugin ตัวอย่างเช่น

• en_US - ภาษาอังกฤษ
• th_TH  - ภาษาไทย
• ภาษาอื่นๆ สามารถดูได้ที่ https://developers.facebook.com/docs/internationalization/

js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1&appId=7268793240xxxxx";

2. all.js

- ชื่อไฟล์ Javascript SDK ของ Facebook โดยทั่วไปใช้ all.js ซึ่งเป็น version ที่ถูกบีบอัดและย่อขนาด เพื่อให้สามารถทำงานได้เร็วขึ้น แต่ Facebook ยังมีให้เราใช้อีก version นึง เพื่อตรวจสอบความถูกต้องของการทำงาน วิธีใช้ให้ทำการเปลี่ยนจาก all.js เป็น all/debug.js ดังนี้

js.src = "//connect.facebook.net/en_US/all/debug.js#xfbml=1&appId=7268793240xxxxx";

เราเรียก version นี้ว่า debug ซึ่งจะมีการ log ข้อมูลให้เราสามารถตรวจสอบได้ง่ายขึ้น และตัวไฟล์จะไม่ถูกบีบอัด สามารถตรวจสอบตัว Source code ของ Javascript SDK ได้

3. appId=7268793240xxxxx

- รหัส App Id ของ Facebook App - วิธีสร้าง Facebook App คลิ๊ก

Social Plugins ของ Facebook ประกอบด้วย

Like Button

Share Button

Send Button

Follow Button

Comments

Like Box

ยังมี Social Plugins อีกหลายอัน ผู้เขียนแนะนำตัวที่เป็นยอดนิยม ถ้าผู้อ่านสนใจสามารถอ่านรายละเอียดเพิ่มเติมและวิธีปรับแต่งได้ที่ https://developers.facebook.com/docs/plugins/