2011.3.18更新，
因為Facebook改版，此方法已不適用。
Facebook的官網前一陣子有宣布未來不再支援FBML語法，所以先前利用fbml語法製作的留言板及Social plugins的元件語法有些許的更動，目前及未來是以iFrame及XFBML語法為支援對象，舊的FBML目前還是可以使用，但還是以新語法為主。
跟之前一樣，還是要申請Facebook API的功能，可參考先前如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)，這篇的作法去申請，而如何在Blogger的部落格中安裝Facebook的留言板(Comments Box,意見箱)及Live Stream，其實方法大同小異，只是語法有些變更。
Facebook的Social plugins有很多元件，你可以試著自己裝看看。
以下的說明都以新的模版為說明對象，
首先申請Facebook API金鑰，請參考
【第一步】：如何申請你的FACEBOOK 應用程式API金鑰
【第二步】部落格模板的修改
1、首先需先修改html的內容，要放入兩段程式碼，來宣告你的模板要套用Facebook的特殊程式碼規格
設計→修改Html，在模版最上方可以找到以下這段語法
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>加入一行
xmlns:fb='http://www.facebook.com/2008/fbml'
變成
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>這是宣告這個模版要用fbml的語言。
另外加入這些Social plugins的元件，可以利用iFrame或是XFBML兩種程式碼，不過大部分都是支援XFBML程式嗎，iFrame的較少。
如果利用XFBML的程式碼是比較彈性，而且語法也較少，但是需要你的部落格可以配合放入JavaScript SDK程式碼才行，這在Google Blogger的部落格是可以做到的。
XFBML is more flexible than iframes, but requires you use the JavaScript SDK.
如果用iframe方式，只要在網頁元素→新增的小工具→選擇"HTML/JavaScript 新增"，然後將程式碼放入即可。
但如果要用XFBML方式，則在後台→設計→修改 HTML，找到
<body>這行的程式碼，
以我的模版為例就是在
<body expr:class='"loading" + data:blog.mobileClass'>這行的下方放下以下程式碼，
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '你的APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/zh_TW/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
【第三步】加入Facebook留言板小工具---fb:comments
官網說明：Comments
目前留言板(Comments Box)及即時動態流視窗(The Live Stream Box)，這兩種小工具，都可拿來當留言板，這篇先說明Comments Box部分。
● 留言板(意見箱、Comments Box)
版面配置→網頁元素，新增小工具，然後放入以下程式碼即可，這個元件只能使用XFBML，官方沒有提供IFRAME程式碼。
<fb:comments xid="你的APPID"></fb:comments>
如果你想放在邊欄，就加上寬度設定即可， width="300"，記得寬度不要太小，不然留言之後的安全驗證碼沒法完整出現，我是設300px，你可以看你的邊欄寬度多大再來調整，語法如下 。
<fb:comments xid="你的APPID" width="300"></fb:comments>官方的設計是以白底為主，如果你跟我一樣都是暗色底的，則加上css的格式即可，這是我的語法，
<fb:comments xid="你的APPID" width='300' css="http://你的css檔名.css"></fb:comments>css的參考來源，Dark Background Tutorial (Comments-Box & Like-Button) [下載檔案download]語法如下，
/* Like button text color */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}
/* Comemnts box text color */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}可以下載後放在協作平台，再外連即可，上面css裡面的格式及顏色也可改成你自己需要的。
2010.12.18更新
目前似乎一定要登入Facebook才可留言。
測試過後，如果放在邊欄感覺還是350px比較適合，或是放在本文下方較寬的小工具，另外有時這個元件無法正常出現，可以參考這一連串的討論，
fb:comment is not working
不過通常重新載入或是清除Cookie後就能顯示。
其實這兩樣留言板，就視你自己部落格常來往的對象做設定，如果常來往的都是FB的朋友，就可以利用第二種Live Stream的方式，建議可以另開分頁網頁來安裝這個工具，例如我部落格上新增一個"Facebook留言板"，
這樣一來也不會影響主頁的載入速度，而來留言空間也相對的擴大，看起來也比較舒服，也可以做一點稍微的設計。
延伸閱讀及參考來源：
如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)
如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇
如何利用Facebook帳號製作部落格的留言板---安裝篇
[Blogger] 淺談 Facebook Social Plugins 的安裝 | ZOG
Exclusive, Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ). | Blogger Templates and Tricks
如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)
如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇
如何利用Facebook帳號製作部落格的留言板---安裝篇
[Blogger] 淺談 Facebook Social Plugins 的安裝 | ZOG
Exclusive, Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ). | Blogger Templates and Tricks
我昨天正好跟著步驟做到金鑰的部分，然後要做第二篇安裝篇的時候~ 因為你寫的.. 8/31的註釋 還有眼花撩亂的程式碼，我就放棄了。
回覆刪除可是沒想到~~!! 睡一覺起來居然有新的耶！！
好高興喔~~
對了，這張貼意見的地方，在firefox會被蓋住喔。
我是用chrome留言的。
新的還是一堆程式碼，其實facebook的apps對我來說也是很困難，要研究很久，尤其很多都是英文說明，要有耐心慢慢看，另外我用Firefox留言是沒有問題，用其他帳號也沒有，所以沒有發現你說的問題。
回覆刪除也許是申請的介面與版面設定都變了
回覆刪除其實昨晚我再弄金鑰的部份的時候，教學與自己看到的並不太相同。
所以可能操作上我少做了甚麼...
導致我花了一個上午的時間還是沒有辦法把留言板弄出來..
我是想要把它弄在分頁上。
我只能先暫停一下，過陣子再來試試了
下午當我決定過陣子再來測試後，我把修改HTML裡面的程式碼都刪除了。
回覆刪除結果留言板就出現了耶？！
不過留言板上的語法是參考重灌狂人的那段javascript語法。
可是不曉得是我這樣的做法有錯誤還是怎麼樣，就是有時候讀取留言板會很慢，可是有時候又很快，請了幾個朋友幫我測試，有些看得到，有些就看不到了...
我的也有這個問題，我在文章最後有列出相關的討論，
回覆刪除fb:comment is not working
怎么把 留言上方的赞给去掉。。。
回覆刪除那是官方制定的規格，這部份我不會。
回覆刪除留言板部分有辦法與個人帳戶同步嗎??例如我在此網站留言，而我在FB自己的塗鴉牆可以看到別人留言給我!!!不須再回到原網站做觀看^^
回覆刪除之前測試過我自己的留言在個人fb頁面會出現，但他方的留言就不會出現，而且目前fb改版後這個功能也怪怪的，常跑不出來。
回覆刪除我之前網站就有在用，不過是舊版的~就差幾天FB就推出新版的
回覆刪除舊版會有bug, 目前無解，狀況2比較常出現
不知道各位有沒有碰過這樣的問題
我用facebook social plugins comments來當網站留言版但有時候，臉書會秀逗.
1．無法留言 錯誤訊息："Database Down. Sorry, a temporary error has occurred. Please try again."
2．之前留言內容會不見，按F5或Ctrl+F5都沒有用，重開瀏覽器才會出現(有時候還不行呢，真得很莫明奇妙)
這是我的網站http://2011slim.fhma-taiwan.org/vote/profile002.html
原本也想升級，但舊的參數是用xid，新版的參數是用url，升級後舊的資料會不見
昨天晚上終於google到無痛升級方式(保留舊的資料，用新介面)
If you already have the original Comments Box installed, include the parameter migrated="1" to keep existing comments:
不用要測試個幾天，不曉得會不會有問題
不用轉換新版，有點怪，就是留言不是按照發言時間排序，亂成一團
這是我先將其中一個頁面升級 http://2011slim.fhma-taiwan.org/vote/profile001.html
因為FB常常變動，不穩定，所以就不再測試了。
回覆刪除2011〔更新〕在Blogger文章加上Facebook留言功能
回覆刪除你好..我又來打擾了..請問我參考上面那個網址做的fb留言版..該怎樣才能讓它不在按"繼續閱讀"前出現..只會出現在個別文章裡頭呢..謝謝..
另外,因為fb最近真的太夯了..如果可以的話是否有機會再閱讀到您多寫幾篇關於fb的文章..網路我看的每個做法都不太一樣..看得我眼花..還是你的文章最詳細..謝謝..
2011〔更新〕在Blogger文章加上Facebook留言功能
回覆刪除你好..我又來打擾了..請問我參考上面的文章做的fb留言..該怎樣才能把它不在首頁每篇文章按"繼續閱讀"前出現..只在個別的文章裡頭出現呢..謝謝..
我這篇是針對整個部落格的留言板，而非單篇文章的留言系統，很謝謝您的鼓勵，但是最近沒有時間研究這部份的東西，很抱歉。
回覆刪除不過，要將某個元件在單篇文顯示，通常在其前後加上已下語法即可。
<b:if cond='data:blog.pageType == "item"'>
相關語法.....略
</b:if>
這部份可以參考Abin's的文章
http://abintech.twidv.com/2007/02/sidebar.html
你再配合工作達人的文章，自己在研究看看。