Kaewmunmun: วิธีทำ 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 ของเราครับ

-กด 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 นี้:

-แล้วเอา 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 ล่างนี้ไปใส่ไว้ข้างบน

อย่าลืมเปลี่ยน APP_ID นะครับ

6. กด Ctrl + F หา Code <data:post.body/>

- แล้วนำ Code ด้านล่างนี้ใส่ไว้ด้านล่าง:

<b:if cond='data:blog.pageType == "item"'>
<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 ที่เราเล่นประจำ

#### จบกระบวนการครับ

.

Pages

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

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