ใส่ Facebook comment box ในบล็อก

โพสต์2 พ.ย. 2553 03:47โดยJit Thep

สำหรับใครที่ต้องการนำ social plugin ของ Facebook ไปใส่ในเว็บหรือบล็อก วันนี้มีตัวอย่างการนำ comment box ไปใส่ในบล็อกครับ

1. login facebook

2. go to http://developers.facebook.com/setup/

add facebook comment to your blog – ใส่ Site name – ใส่ Site URL
- เลือกภาษา
- คลิก Create application จากนั้น จะได้ข้อมูลเกี่ยวกับ application ที่สร้างขึ้น

ตั้งค่า ส่วนที่เป็นสีเหลือง คือ app id ที่ไว้ใช้งานสำหรับ social plugin ต่างๆ
add facebook comment to your blog

โค้ดตัวอย่าง โค้ดมีส่วนสำคัญ 2 ส่วน คือ

ส่วนที่ 1 คัดลอกและนำไปวางในส่วนของ <html>
ส่วนที่ 2 ใช้คู่กับ social plugin ตัวอื่นๆ คัดลอกและนำไปวาง ถ้าจะให้ดีก็คัดลอกเก็บโค้ดนี้ไว้ใช้งานครั้งต่อไป หรือไม่ก็จด appId ไว้

facebook social plugins code

3.  ต่อไป วิธีการรับโค้ด  Facebook comment box มาใช้ ไปที่ http://developers.facebook.com/plugins

4. เลือก Comment

5. ระบุค่า comments

facebook comment box

- Unique ID จะใส่หรือว่างไว้ก็ได้ ถ้าคุณวาง comment box หนึ่ง box ต่อหนึ่งหน้า ไม่จำเป็นต้องใส่ ถ้าหนึ่งหน้าใส่มากกว่า 1 comment box ระบุ Unique ID ให้แต่ละคอมเม้นบ็อกซ์ด้วย (เช่น comment box อันที่ 1 ใส่ Unique ID เป็น commentbox1 ตัวที่สอง เป็น commentbox2 เป็นต้น)
- ใส่จำนวนคอมเม้น – ระบุความกว้างของ comment box
- แล้ว คลิก Get Code – คัดลอกโค้ดที่ได้ไว้

<fb:comments numposts=”10″ width=”550″></fb:comments>

6. ได้โค้ดทั้งหมดแล้ว นำโค้ดไปวางดังนี้ ใส่โค้ดนี้ไว้ในส่วนของ <html>

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” xml:lang=”en” lang=”en”>

และ เอาโค้ดนี้ใส่ใน (คือโค้ดส่วนที่2 ในข้อ 2 ) <body>

<div id=”fb-root“></div> <script> window.fbAsyncInit = function() { FB.init({ appId  : ‘YOUR APP ID‘, status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml  : true  // parse XFBML }); }; (function() { var e = document.createElement(‘script’); e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’; e.async = true; document.getElementById(‘fb-root‘).appendChild(e); }()); </script>

สุดท้าย เอาโค้ด comment box  ไปวางตำแหน่งที่ต้องการ

<fb:comments   numposts=”10″ width=”550″></fb:comments>

หากต้องการ plugin ตัวอื่น ก็ทำทำนองเดียวกัน

วิธีใส่ Like button

คลิก http://developers.facebook.com/docs/reference/plugins/like-box

facebook like button

- URL to like ปล่อยว่างไว้ – นอกนั้นปรับตามต้องการ – คลิก Get Code

add facebook like button

มีโค้ด 2 ส่วน เลือกเอาอย่างใดอย่างหนึ่ง จะเอา iframe หรือแบบ xfbml เลือก xfbml

เอาโค้ดนี้ไปวางในตำแหน่งที่ต้องการ อย่าลืมเอาโค้ดส่วนที่ 2 (ในข้อ 2 มาด้วย) มาวางด้วย



Credit: วิธีใส่ Facebook comment box ในบล็อก | kruSAK 
Under Creative Commons License: Attribution

Comments