ใครที่ต้องการนำ social plugin ของ Facebook ไปใส่ในเว็บหรือบล็อก วันนี้มีตัวอย่างการนำ comment box ไปใส่ในบล็อกครับ
1. login facebook
2. go to http://developers.facebook.com/setup/
– ใส่ Site name – ใส่ Site URL
- เลือกภาษา
- คลิก Create application จากนั้น จะได้ข้อมูลเกี่ยวกับ application ที่สร้างขึ้น
ตั้งค่า ส่วนที่เป็นสีเหลือง คือ app id ที่ไว้ใช้งานสำหรับ social plugin ต่างๆ
โค้ดตัวอย่าง โค้ดมีส่วนสำคัญ 2 ส่วนสำคัญ คือ หมายเลข 1 และ 2
fb-comment-box
ส่วนที่ 1 คัดลอกและนำไปวางในส่วนของ <html>
ตัวอย่างการวางใน Drupal
- Drupal 6.x เปิดไฟล์ page.tpl.php ของธีมใช้งาน แล้ววาง xmlns:fb=”http://www.facebook.com/2008/fbml” ในส่วนของ <html>
- Drupal 7.x เปิดไฟล์ maintenance-page.tpl.php แล้ววาง xmlns:fb=”http://www.facebook.com/2008/fbml” ในส่วนของ <html> ดังรูปด้านล่างนี้
fb-comment-box-drupal 7
ตัวอย่างการวางใน WordPress
- เปิดไฟล์ header.php ของธีมที่ใช้งาน
- วาง xmlns:fb=”http://www.facebook.com/2008/fbml” ในส่วนของ <html> ดังรูปด้านล่าง
fb-comment-box-wordpress
ส่วนที่ 2 คือ script ที่จะนำไปใช้คู่กับ social plugin ตัวอื่นๆ ไม่ว่าจะเป็น comment box, like button และอื่นๆ โดยคัดลอกและนำไปวางไว้ก่อน </body> แนะนำให้คัดลอกเก็บโค้ดนี้ไว้ใช้งานครั้งต่อไป หรือไม่ก็จด appId ไว้
< body >
…
< script >
window.fbAsyncInit = function() {
FB.init({appId: ‘appId‘, 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>
< /body>
3. ต่อไป คือไปรับโค้ด Facebook comment box มาใส่ในบล็อก ไปที่ http://developers.facebook.com/plugins
4. เลือก Comment
5. ระบุค่า comments
รับโค้ด fb-comment-box
- Unique ID จะใส่หรือว่างไว้ก็ได้ ถ้าคุณวาง comment box หนึ่ง box ต่อหนึ่งหน้า ไม่จำเป็นต้องใส่ ถ้าหนึ่งหน้าใส่มากกว่า 1 comment box ระบุ Unique ID ให้แต่ละคอมเม้นบ็อกซ์ด้วย (เช่น comment box อันที่ 1 ใส่ Unique ID เป็น commentbox1 ตัวที่สอง เป็น commentbox2 เป็นต้น)
- ใส่จำนวนคอมเม้น ที่จะให้แสดงต่อหนึ่งหน้า
- ระบุความกว้างของ comment box
- ต้องการ Publish feed ด้วยหรือไม่
- คลิก Get Code
- คัดลอกโค้ดที่ได้ไว้ ตัวอย่างโค้ดที่ผมได้ เป็นดังนี้
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=192623757414759&amp;xfbml=1″></script><fb:comments numposts=”10″ width=”425″ publish_feed=”true”></fb:comments>
ปล. อย่าคัดลอกโค้ดตัวอย่างจากผมไปใช้โดยไม่เปลี่ยน appId ล่ะ
นำโค้ด comment box ที่ได้ไปวางในหน้าและตำแหน่งที่ต้องการ
ตัวอย่างเช่น 
Drupal
วาง fb comment box ใน Drupal 7
เปิดไฟล์ node.tpl.php ของธีมที่ใช้งาน วางโค้ดนี้ไว้ก่อน </div> ตัวสุดท้าย
fb-comment-box-ใน Drupal 7
หากต้องการ plugin ตัวอื่น ก็ทำทำนองเดียวกัน ลองไปทำกันดูครับ
(เพิ่มเติม…)
is proudly powered by WordPress and