ความต้องการ คือ ต้องการ บันทึกรายการ comment ลงในฐานข้อมูล เพื่อนำมาเรียกใช้ในภายหลัง ต้องการนำไปประยุกต์ใช้ ว่าเนื้อหา หรือบทความใด มีการอัพเดทรายการ comment ใหม่บ้าง ต้องการแสดงรายการ comment ใน style หรือรูปแบบ ที่กำหนดเอง
ข้อมูลที่ได้รับเมื่อทำการ post ข้อความใน comment
"xid": "7ef517e0c77703c01b1897051da438ca", เป็นค่าเดียวกันกับตอนการส่งค่า ด้วยวิธี comments.get
"fromid": 1234998873, // id ของ facebook ของคนที่โพส สามารถนำไปใช้เพื่อดูรูปภาพ หรือข้อมูลบางส่วนได้
"time": 1282803813, // เวลา เป็น timestamp สามารถแปลงเป็นข้อความวันที่ ด้วย php
"text": "ข้อความที่โพส", // ข้อความที่ได้ทำการโพสไป
"id": 561987, // id ที่ไม่ซ้ำกัน สำหรับอ้างอิงของแต่ละ xid นั้นๆ
"username": "", // ชื่อผู้ใช้มีค่ากรณีให้บุคคลทั่วไป สามารถโพสได้ แต่ถ้าเป็นสมาชิก facebook จะเป็นค่าว่าง
// ข้อมูลด้านล่าง ใช้หรือไม่ใช้งานก็ได้ จะเป็นส่วนที่ใช้ร่วมกับ facebook ในหน้า wall กรณีตอนโพสให้ส่งค่าไปที่ wall
// หรือหน้าข้อมูลส่วนตัวของสมาชิกใน facebook
"reply_xid": "", // xid ของรายการที่ตอบใน wall หน้าข้อมูลส่วนตัวของสมาชิกใน facebook
"post_id": "", // id ที่แสดงใน wall หน้าข้อมูลส่วนตัวของสมาชิกใน facebook
"app_id": 134358299911812, // application id ของ facebook ที่ใช้งานอยู่
"object_id": "" }, // object id อ้างอิง ของ facebook
เริ่มต้นการใช้งาน
1. การใช้งานส่วนเพิ่มเติมนี้ จำเป็นต้องกำหนด xid ให้กับแท็ก fb:comments เสมอ โดยใช้วิธีการเข้ารหัส url ของหน้าที่แสดง comments นั้นๆ
โดยมีวิธีการกำหนด ดังนี้
xid="<?=md5("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" (แค่รูปแบบ ให้อ่านข้อต่อไปได้เลย)
2. สร้าง input type hidden สำหรับเก็บค่า xid ดังนี้
<input name="fb_xid" type="hidden" id="fb_xid" value="<?=md5("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
3. เพิ่ม attribute ชื่อ notify="true" เข้าไปในแท็ก fb:comments
4. จะได้รูปแบบ แท็ก fb:comments พร้อมใช้งานดังนี้
<input name="fb_xid" type="hidden" id="fb_xid" value="<?=md5("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
<fb:comments xid="<?=md5("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>"
notify="true" numposts="10" simple="true" width="400" publish_feed="true"></fb:comments>
<div id="fb-root"></div>
สามารถกำหนด xid ไว้ในตัวแปร php สำหรับใช้งานแทนได้ เช่น
<?php $pageXID=md5("http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?>
<input name="fb_xid" type="hidden" id="fb_xid" value="<?=$pageXID?>" />
<fb:comments xid="<?=$pageXID?>" notify="true" numposts="10" simple="true"
width="400" publish_feed="true"></fb:comments>
<div id="fb-root"></div>
5. ส่วนของ Javascript กำหนดดังนี้
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId:'123456', // กำหนด app id ตรงส่วนนี้
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('comments.add', function (resp) { // Event เมื่อมีการโพสข้อความ
FB.api(
{
method: 'comments.get', // เรียกใช้ method comments.get เพื่อดึงข้อมูล โดยส่ง xid ไป
xid: $("#fb_xid").val()
},
function(response) {
// สร้างตัวแปร fb_commentData ไว้รับค่า ข้อมูล สำหรับนำไปบันทึก
// สามารถเพิ่มตัวแปร เพิ่มเติม โดยกำหนด ต่อท้าย เช่น
// object_id:response[0].object_id,
// myvar:10
var fb_commentData={
xid:response[0].xid,
fromid:response[0].fromid,
time:response[0].time,
text:response[0].text,
id:response[0].id,
username:response[0].username,
reply_xid:response[0].reply_xid,
post_id:response[0].post_id,
app_id:response[0].app_id,
object_id:response[0].object_id
};
// ส่งค่าข้อมูลไปใช้งาน เช่นบันทึกลงฐานข้อมูลด้วย ajax ในที่นี้ส่งเป้นตัวแปร post
// ค่าที่รับจะเป็น $_POST['xid'] $_POST['text'] เป็นต้น
$.post("save_comment.php",fb_commentData,function(returnData){
// คำสั่งเมื่อบันทึกข้อมูลเรียบร้อยแล้ว
});
}
);
});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
6. ส่วนของไฟล์ สำหรับบันทึกข้อมูล หรือรับค่าจากตัวแปร POST ตามข้อ 5 ชื่อ save_comment.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// สร้างส่วนติดต่อฐานข้อมูล
// คำส่ง php ตามต้องการ
// ข้อมูลตัวแปรที่ส่งมาจะเป้น $_POST['ชื่อตัวแปร'] เช่น
// $_POST['text'] คือข้อความที่โพส เป็นต้น
?>
* จากตัวอย่างโค้ดข้าง ต้นมีรูปแบบ การใช้งาน คำสั่งที่สามารถนำไปประยุกต์ใช้งานได้มากมาย เช่น FB.api หรือ Event.subscribe เป็นต้น..