หลายคนก็อาจจะสงสัยว่าทำไม อยากมีคอมเม้นใน blogspot ได้ และมันทำยัง มาเลยทางนี้เลย มาถูกทางแระ ครับผม
หลายท่านอยากมี comment facebook in blogspot เป็นของตัวเองบ้าง
อัพเดทเมื่อวันที่ 29 พฤษภาคม 2554
การสร้าง comments Facebook ใน Blogspot
1. ขั้นตอนรกเลยไปที่ : http://www.facebook.com/developers
2. คลิกปุ่ม Set Up New Application button ครับอยู่ทางด้านซ้ายมือ
3. ตั้งชื่อแอพพลิเคชั่น Application Name ตัวอย่างเช่น
และยอมรับข้อตกลงเงื่อนไข แอพ select Agree > ยอมรับเสร็จแล้ว สร้างแอพพลิเคชั่นเรียบร้อยแล้ว Create Application
4. ไปที่แท็บเว็บ Web Site แท็บนี้จะอยู่ทางด้านซ้ายของรายการ ในที่นี้ผมตั้งชื่อแอพใหม่ เป็น MrWangFunChao (คลิกภาพเพื่อซูมดู)
5. กำหนดไซต์ใน Site URL ใน blogspot คุณ เช่น ของผมเป็น http://wangfunchao.blogspot.com
6. คุณจะต้องกำหนด Site Domain field: blogspot.com , หรือ site url คุณเอง เช่น http://wangfunchao.blogspot.com ในที่นี้ผมใส่เป็น site url มาใส่ site domain ด้วย จากนั้นก็ เซฟซะ –> Save Changes
7. เมื่อเซฟเสร็จแล้วคุณจะเห็น แอพพลิเคชั่นไอดี (Application ID) เป็นตัวเลขมาด้านล่างของ app API & Secret
8. เมื่อเสร็จแล้วระหว่างนั้น มันจะใช้เวลา 2-20 นาที เพื่อเตรียมความพร้อมไปยังเว็บไซต์ของคุณ
จากนั้นก็ใช้คุณไปเปิด blogger.com หลังบ้านเพื่อแก้ไขโค๊ดอะไรบางเพิ่มเติมลงไป
ไปที่ แผงควบคุม—>ออกแบบ(Design)—>แก้ไข HTML(Edit HTML)
เพื่อที่จะวาง SDK script + Open Graph protocol tags + xmlns attribute
หรือ 
นำโค๊ดไปวางต่อโค๊ดใน widget ตัวเตัวที่ระบายสีแดงไปวางต่อท้าย xmlns attribute
<html expr:dir='data:blog..............2005/gml/expr' mlns:og='http://ogp.me/ns#' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
<meta content='WangFunChao' property='og:site_name'/>
<meta content='url image direction’ property='og:image'/>
<meta content=’123456789’ property='fb:admins'/>
<meta content=’1234567890’ property='fb:app_id'/>
<meta content='blog' property='og:type'/>
<meta property='og:latitude' content='13.75'/>
<meta property='og:longitude' content='100.52'/>
<meta property='og:street-address' content='Bangkok'/>
<meta property='og:locality' content='Thailand'/>
<meta property='og:region' content='THAI'/>
<meta property='og:postal-code' content='10220'/>
<meta property='og:country-name' content='Thailand'/>
<meta property='og:email' content=’wangfunchao@gmail.com'/>
<meta property='og:phone_number' content=''/>
<meta property='og:fax_number' content=''/>
นำโค๊ดเหล่านี้มามาด้านใต้ของ tag เปิดของ <head> ก๊อบโค๊ดด้านบนไปวาง และแก้ไขนิดหน่อยในส่วน attribute ที่ตัวหนา remark ไว้ที่จำเป็น (* blogspot เข้มงวดในเรื่อง ‘ and “ ไม่อนุญาตให้ใช้ ให้ใช้ได้แต่ ‘ ครับ )
og:site_name เป็นชื่อ เป็นชื่อเล่นสั้นของเว็บไซต์ของคุณ เช่น WangFunChao หวังฟันเจ้าไงล่ะฮ่ะ
og:image ภาพไอคอนโลโก้เว้บไซต์
fb:admins คือ Profile ID ของคุณ หรือใส่เป็น ชื่อโดนเนมเฟชบุ๊คของคุณก็ได้ แต่แนะ ใส่เป็นแบบตัวเลขดีกว่าครับ
fb:app_id ก็ดูมาจาก Web Site นั้นล่ะครับคุณจะเห็น Application ID เอาตัวนั้นล่ะมาใส่
ในที่นี้ผมใส่เป็นตัวอย่าง 1234567890 นะครับ
เมื่อเสร็จเรียบร้อยสมบรูณ์ก็อย่าลืมเช็คความถูกต้องด้วยนะครับ
ที่ http://developers.facebook.com/tools/lint/
อ่านคู่มือเพิ่มเติมเกี่ยวกับ open graph
เช่นของผม
เมื่อเช็คถูกต้องเรียบร้อยแล้ว
เริ่มต้นด้วยโค๊ดง่ายก่อนเลย เมื่อเสร็จเรียบร้อยจากการตั้งค่าแล้ว (โห่ !! ยังมีต่ออีกหรอเนี่ย จริงๆมันสั้นนะครับ แต่เขียนให้มันยาว ไม่รู้เป็นเพราะอะไร ตอนนั้นกำลังมันมั่ง)
นำโค๊ดนี่ไปวางหลัง tag เปิด body
<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>
code ไม่มีอะไรมากนำเปลี่ยนแค่ตรง application id ของคุณ ถ้าเป็นของผม ยกตัวอย่างเช่น '1234567890’,
หลังจากนั้นเราจะทำมา comment facebook กันง่าย อ่านคู่มือประกอบคงทำได้เนอะ ไม่ยาก
<b:if cond='data:blog.pageType == "item"'>
<div>
<fb:like expr:href='data:post.url' send='true' show_faces='false'/>
<fb:comments candelete='true' expr:href='data:post.url' message='true' migrated='1' num_posts='10' width='470' xid='data:post.url'/></div>
</b:if>
อ่านคู่มือ attribute คอมเม้นเพิ่มเติม
กำหนดคุณสมบัติอะไรนั้นแล้วแต่คุณจะกำหนดเองนะครับ แต่ผมเอาโค๊ดพร้อมใช้ได้เท่าที่จำเป็นยังมี แอตทริบิวต์ที่มากว่านี้อีกครับ
นำโค๊ด comments like and send นี้ไปวางหลังท้ายคอมเม้นของบทความ เครื่องมือที่จะช่วยให้ท่านหาโค๊ดง่าย ctrl+f and add on firebug
แนะนำถ้าหาโค๊ดในการแก้ไขหรือเพิ่มคอมเม้นท์ลงไป ctrl+f หา tag html ที่เป็น
<div id=’comments’ class=’comments’> นำโค๊ดวางหลังตรงนั้นดู ถ้าไม่เจอยังไง ก็ใช้ firebug ตรวจสอบดูครับ เพราะ แต่ละเทมเพล็ตคน design ย่อมแตกต่างกัน
แค่นี้ก็ได้แล้วครับ
และสามารถดูได้จากเฟชบุ๊คคุณว่ามีใคร comments ในเว้บไซต์คุณบ้าง
http://developers.facebook.com/tools/comments ดังภาพนี้ครับ
มีความต้องการอะไรตรงไหนบอกมาได้ครับ ยินดี =(^_^)=
เหตุผลดึงที่ผม สร้าง comments in blogspot นั้น ทำให้ ผู้ใช้งาน or user นั้นมี Interactive กับเว็บไซต์ได้มากขึ้นครับ…
1 ความคิดเห็น:
ขอบคุณมาก
แสดงความคิดเห็น