สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย
19 June 2010ดูตัวอย่าง และทดสอบการใช้ตามลิ้งค์ด้านล่าง
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?>"/>
http://www.ninenik.com/content.php?arti_id=402
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 การสร้างวันเวลาปัจจุบัน ด้วยฟังก์ชัน date() อ่าน 5183 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4706 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1041 25 Sep 08 ดึงข้อมูลจากฐานข้อมูลใส่ List Box อ่าน 5594 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1856 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7132 10 Feb 10 ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal อ่าน 1392 28 Oct 08 การ hilight form ฟอร์มด้วย javascript อย่างง่าย อ่าน 3604 02 Jun 09 แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta อ่าน 3376 19 Nov 09 สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery อ่าน 3688 30 Oct 08 ฟังก์ชันตรวจสอบอีเมลล์ ด้วย php ละเอียดมากขึ้น php check verify email อ่าน 4399 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24729 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6166 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 3222 04 Oct 08 การติดตั้ง MySQL บน Windows อ่าน 2954 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4671 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2078 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2280 19 Sep 10 DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map อ่าน 2978 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2154