วันพฤหัสบดีที่ 22 มีนาคม พ.ศ. 2555

Comment + Facebook กับ Blogspot.com

             หลังจากได้หาข้อมูลการเชื่อม ความคิดเห็นของ Facebook กับ Blogspot.com มาตั้งนานเลยเอามาแบ่งปันเพื่อนๆครับ เพื่อใครจะนำไปใช้นะครับ เป็นการเปลี่ยนความคิดเห็นมุมมองใหม่ของ Blogspot ส่วนขั้นตอน ผมใช้คำพูดของผมเองนะครับ อย่างไรก็ขออภัยด้วยยย 

1.ก่อนอื่นเราก็ซ่อนระบบ Comments เดิมก่อนเพื่อที่ใช้ระบบ Comments ของ Facebook ส่วนวิธีการซ่อน ดังนี้  
1.1 การตั้งค่า
1.2 โพสต์และความคิดเห็น
1.3 แก้ไข ตำแหน่งความคิดเห็นให้เป็น ซ่อน
1.4 แล้วก็บันทึกการตั้งค่า เสร็จขั้นตอนการซ่อนระบบความคิดเห็นเดิมใน Blogspot




2.การสมัครใช้ Application Facebook ให้เข้าไปตามนี้เลย https://developers.facebook.com/apps  ต้อง Login Facebook ของเราก่อนนะครับ 
2.1 คลิกสร้างแอฟใหม่จะแสดงหน้าต่างดังภาพ ให้ใส่ชื่อแอฟของเราแล้วดำเนินการต่อ ใส่ข้อความการตรวจสอบความปลอดภัย (ยืนยันว่าเป็นมนุษย์ อิๆๆๆ)








2.2.ให้กรอกข้อมูลตามภาพเลยครับ


  















 




แล้วก็บันทึกความเปลี่ยนแปลง
3.แก้ไขโค๊ตในแม่แบบ blogspot ที่เราใช้ โดยไปที่แม่แบบ แล้วแก้ไข HTML ตามภาพ













 




ค้นหา tag <meta  อยู่ส่วนบนสุดของหน้า
นำโค๊ตนี้ใส่ <meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>ก่อนหรือหลังของเดิมที่มีอยู่ก็ได้ YOUR_FACEBOOK_APPLICATION_ID คือ App ID ดังตัวอย่างคือ 3716xxxxxxxxxx แล้วกด บันทึกเทมเพลต





















4.เพิ่มความคิดเห็น facbook เข้า แม่แบบ ก่อนอื่นคลิกเครื่องหมายถูกที่ ขยายเทมเพลตวิลเจ็ต
ค้นหาคำนี้ <div class='post-footer-line post-footer-line-3'> หรือ <p class='post-footer-line post-footer-line-3'> หรือ  <data:post.body/> แล้วต่อด้วย

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

ส่วนสีแดง ความกว้าง ปรับแต่งตามความเหมาะสม

 















5. ประกาศชื่อแม่แบบ ให้ facebook (ไม่เข้าใจเหมือนกัน แต่ทำตามก็แล้วกัน 5 5)
ค้นหา  <html  แล้วแทนที่ด้วย <html xmlns:fb="https://www.facebook.com/2008/fbml" ตามภาพเลยย tag นี้อยู่บนสุดอยู่แล้วหาง่าย 






เสร็จขั้นตอนการเพิ่ม comment facebook บน blogspot.com แบบใหม่  ส่วนการตั้งค่าอะไรก็ลองปรับแก้ไขดูนะครับบ....... blogspot.com จงเจริญ......



อันนี้ไว้ตรวจสอบความคิดเห็น และปรับแต่งอื่นๆ http://developers.facebook.com/tools/comments