สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย

19 June 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

comment facebook

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ comment facebook

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

ดูตัวอย่าง และทดสอบการใช้ตามลิ้งค์ด้านล่าง
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?>"/>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags:: facebook comment

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน