วิธีทำ Facebook Comment Box for Blogger พร้อมแจ้งเตือนแบบละเอียด : และ Theme สีดำ

เหมือนที่เห็นใน Blog ของผมก็ทำตามวิธีด้านล่างนี้แหละครับแปลจาก Blogger ฝรั่งมาอีกที Credit  www.doncaprio.com
ส่วนวิธีอื่นๆ ที่โพสตามเว็บก็ได้เหมือนกันแต่ผมทำตามด้านล่างสมบูรณ์ที่สุดแล้วครับ มาพร้อมกับ Notification แบบสมบูรณ์แบบที่สุด มาพร้อมกับ Code theme สีดำ มาเริ่มกันเลยดีกว่า

1. Log in เข้าสู่ blogger และและปิด default comment.
ทำตามนี้เลยครับเข้า Settings > Comments เลือก Hide และก็จัดการ Save ให้เรียบร้อย
2. จัดการสร้าง facebook application. Click here  ข้อนี้แนะนำให้ไปหาวิธีสร้างใน Google ครับคนสอนเยอะ พอสร้างเสร็จก็ Copy App ID ไว้ใน Notepad ก่อนก็ได้
3. ต่อไปเข้าไปที่ Blogger ของเราครับ
Log in และวคลิก  Design > Edit HTML > Check Expand Widget Template
-กด Ctrl + F เพื่อ Search หาคำนี้
<html

- แล้วมองหาคำว่า xmlns:expr='http://www.google.com/2005/gml/expr' 

แล้วเอา Code ด้านล่างนี้ไปต่อท้ายเหมือนในรูป :
xmlns:fb='http://www.facebook.com/2008/fbml'>
4. จากนั้น Search  code นี้:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
-แล้วเอา Code ล่างนี้ไปต่อท้าย (อย่างลืมเปลี่ยน App ID)

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'ใส่ 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>
5. Search คำว่า
</head>
แล้วนำ Code ล่างนี้ไปใส่ไว้ข้างบน
<meta property="fb:app_id" content="ใส่ APP ID" />
อย่าลืมเปลี่ยน APP_ID นะครับ
6. กด Ctrl + F หา Code <data:post.body/>
- แล้วนำ Code ด้านล่างนี้ใส่ไว้ด้านล่าง:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 0px 0px 0px;
-moz-box-shadow: #B3B3B3 0px 0px 0px;
box-shadow: #B3B3B3 0px 0px 0px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Comment with Facebook!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='
450'/></div><div align='right'><a href='http://www.kaewmunmun.com/2012/10/how-to-facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>
เปลี่ยน 450 เป็นขนาดความกว้างที่ต้องกาีร
เท่านี้ก็เรียบร้อยแล้วครับ

**หมายเหตุ

 Code ด้านบนนี้คุณสามารถนำไปวางในส่วนที่แตกต่างจากผมก็ได้เช่นของผมเอาไปวางต่อท้าย
Code ด้านล่างมันก็จะไปอยู่ในกรอบอย่างสวยงามครับ
<div class='post-footer-line post-footer-line-2'/>
Update สำหรับใครที่ต้องการให้ Theme เป็นสีดำ
เพียงแค่เอา Code ล่างนี้ใส่แทน Code ตามขั้นตอนที่ 6 ครับ
<div style='border: 1px #000000; background-color: #000000;'><div align='center'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div><div align="right"><a href="http://www.kaewmunmun.com/2012/10/how-to-facebook-comment-box-for-blogger.html" target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>
</b:if>
</div>
</div>

5. ต่อไปเป็นการเปิดแจ้งเตือน (Notification) หากมีคนมา Comment บทความ

- เข้าที่ URL นี้ตามด้วย App ID ของคุณ: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- ด้านขวาบนมีปุ่ม Setting กดเลยครับสังเกตในช่อง moderator ให้เราใส่ชื่อ Facebook ID ที่เราเล่นประจำ
#### จบกระบวนการครับ