ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery

เนื้อหาต่อเนื่อง จากหัวข้อ

http://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.html

หากใคร ต้องการเพิ่มขีดความสามารถของ facebook comment สามารถศึกษารายละเอียด ตามคำแนะนำต่อไปนี้

เหตุผล หรือความต้องการ เช่น
- ต้องการ บันทึกรายการ 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 เป็นต้น..

หมายเหตุ  การใช้ โฟลเดอร์ คำว่า facebook ในเว็บไซต์ เมื่อมีการเรียกใช้ facebook api จะมี popup แจ้งเตือน ปัจจุบัน  มีใน IE แล้ว จึงควรหลักเลี่ยง
การใช้ชื่อ facebook ใน path url เช่น www.example.com/facebook/comment_facebook.php ใช้เป็นชื่ออื่นแทน เช่น www.example.com/fb/comment_facebook.php ส่วนในชื่อไฟล์ สามารถใช้งานได้ เช่น comment_facebook.php