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

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

Facebook ได้ทำตัว SDK ให้นักพัฒนานำไปใช้งาน เพื่อเพิ่ม ดึงข้อมูล และติดต่อกับ Facebook โดยบทความนี้จะแนะนำการใช้ Javascript สำหรับเพิ่ม Social Plugins ต่างๆ บน Website

Feb 18, 2018

แก้ไขล่าสุด มีผู้อ่าน 3,957  |  FACEBOOK

วิธีการใช้ 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 ตัวอย่างเช่น

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/


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย