Santafear Developer: สร้าง 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 ด้วย
แทนที่ตำแหน่งตรงแถบสีฟ้าอ่อน ตามรูปด้านล่าง

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>

<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>

<fb:comments width="800"></fb:comments>

กำหนดจำนวนแถวความคิดเห็นที่แสดง
numposts="10"

<fb:comments numposts="10" width="800"></fb:comments>

<fb:comments numposts="10"  width="800"></fb:comments>

กำหนด uniqe id กรณีใฃ้ mod rewrite และไม่สามารถโพสข้อความได้
จำเป็นต้องกำหนด uniqe id โดยใช้ php เข้ารหัส ด้วยคำสั่ง

<?=md5($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])?>

<?=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>

<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"/>

<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://santafear.orgfree.com/v4/comment.php

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

Santafear Developer

Sunday, November 14, 2010

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

No comments:

Post a Comment