สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย
หน้าแรก facebook app สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย
ดูตัวอย่าง และทดสอบการใช้ตามลิ้งค์ด้านล่าง
http://developers.facebook.com/docs/reference/plugins/comments
ใครที่ต้องการสร้างระบบ comment หรือการแสดงความคิดเห็นในเว็บไซต์ของตัวเอง โดยไม่ต้องสร้างฐานข้อมูล สามารถเข้าไปใช้บริการ facebook api ที่ชื่อ comment ตามขั้นตอนต่อไปนี้
1.ล็อกอินเข้าสู่ระบบ facebook ปกติ ถ้ายังไม่ได้เป็นสมาชิก
http://www.facebook.com/login.php
ต้องทำการสมัครสมาชิก facebook ก่อนถึงจะใช้งานได้
2.เข้าไปที่หน้า http://developers.facebook.com/setup/
กรอกรายละเอียดดังนี้
site name:--- กรอกเป็นชื่อ domain ตัวอย่าง ninenik
site url:------ กรอก http://www.youdomain.com/ ตัวอย่าง http://www.ninenik.com/
ควรกรอก / หลังชื่อโดเมนปัองกันปัญหา การแจ้งเตือน Invalid url
locale:------- เลือกภาษาไทย หรือภาษาอื่นตามต้องการ
3.คลิกปุ่ม Create Application ถ้าไม่เกิดข้อผิดพลาด ระบบจะสร้าง Application ซึ่งมีรายละเอียด
ดังรูปด้านล่าง ให้ทำการบันทึก ข้อมูลไว้ใช้งาน โดยเฉพาะ app id และ app secret
4.แทนที่ แท็กเปิด <html ... ในไฟล์ที่ต้องการ แสดง comment ด้วย
แสดงปกติพิมพ์โค้ดนี้?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
แทนที่ตำแหน่งตรงแถบสีฟ้าอ่อน ตามรูปด้านล่าง
5.แทรกโค้ด comment ด้านล่างในไฟล์ตามข้อ 4. ในตำแหน่งที่ต้องการแสดง
แสดงปกติพิมพ์โค้ดนี้?
<fb:comments numposts="10" width="800"></fb:comments>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'ใส่หมายเลข app id ตรงนี้', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/th_TH/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
6.ปรับแต่งคุณสมบัติของ comment ตามต้องการเช่น
กำหนดความกว้าง
width="800"
แสดงปกติพิมพ์โค้ดนี้?
<fb:comments width="800"></fb:comments>
กำหนดจำนวนแถวความคิดเห็นที่แสดง
numposts="10"
แสดงปกติพิมพ์โค้ดนี้?
<fb:comments numposts="10" width="800"></fb:comments>
กำหนด uniqe id กรณีใฃ้ mod rewrite และไม่สามารถโพสข้อความได้
จำเป็นต้องกำหนด uniqe id โดยใช้ php เข้ารหัส ด้วยคำสั่ง
แสดงปกติพิมพ์โค้ดนี้?
<?=md5($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])?>
ตัวอย่างผลลัพธ์ที่ได้ xid="91b95134d257f54425eb38b73d3df4b7"
แสดงปกติพิมพ์โค้ดนี้?
<fb:comments xid="<?=md5($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])?>" numposts="10" width="800"></fb:comments>
บรรทัดข้างล่างเป็นส่วน เพิ่มเติม แต่ไม่จำเป็น
นอกจากนี้ยังสามารถกำหนด meta tags ในส่วนของ <header> เพื่อให้ facebook นำค่าไปใช้งาน ตัวอย่าง
แสดงปกติพิมพ์โค้ดนี้?
<meta property="og:title" content="รู้จักกับ Ajax Events ใน jQuery"/>
<meta property="og:site_name" content="ninenik.com"/>
<meta property="og:image" content="http://www.ninenik.com/mages/logo_01_Sat.gif"/>
og:title ใช้กำหนดไดเติลที่ต้องการนำไปใฃ้ใน facebook ปกติ facebook จะดึงจาก tag title
og:site_name ใช้กำหนด ชื่อเว็บไซต์
og:image ใฃ้กำหนดรูปภาพ ปกติ facebook จะดึงจากรูปใน tag img ที่แสดงหน้านั้น
og:title ถ้าใช้ php สามารถดึงจากฐานข้อมูล หรือตัวแปรมาแสดง ตัวอย่าง
แสดงปกติพิมพ์โค้ดนี้?
<meta property="og:title" content="<?=$yourtitle?>"/>
ขึ้นไปด้านบน