2011.3.18更新，
因為Facebook改版，此方法已不適用。
上篇分享了如何利用FACEBOOK的Social plugins製作部落格的留言板--fb:comments篇，接下來介紹類似的工具---動態留言板(Live Stream)，這是針對擁有facebook帳號的朋友才可使用。
由於未來Facebook不再支援FBML語法，所以先前利用fbml語法製作的Social plugins的元件語法會有些許變更，目前及未來是以iFrame及XFBML語法為支援對象，舊的FBML目前還是可以使用，但還是以新語法為主。
跟之前一樣，還是要申請Facebook API的功能，可參考先前如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)，這篇的作法去申請。
以下的說明都以新的模版為說明對象，
首先申請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的語言。
連到Live Stream網頁設定，
設定好了按下，GET CODE，就會出現程式碼，
這項Social plugins的元件，可以利用iFrame或是XFBML兩種程式碼，
如果利用XFBML的程式碼是比較彈性，而且語法也較少，但是需要你的部落格可以配合放入JavaScript SDK程式碼才行，這在Google Blogger的部落格是可以做到的。
XFBML is more flexible than iframes, but requires you use the JavaScript SDK.
【第三步】加入Facebook留言板小工具---Live Stream
第一種：IFRAME模式
用iframe方式，只要在網頁元素→新增的小工具→選擇"HTML/JavaScript 新增"，然後將程式碼放入即可。
類似這樣的，
<iframe src="http://www.facebook.com/plugins/live_stream_box.php?app_id=你的APPID&width=400&height=500&via_url&always_post_to_friends=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:500px;" allowTransparency="true"></iframe>第二種：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>
然後，除了修改HTML新增程式碼後，在網頁元素→新增的小工具→選擇"HTML/JavaScript 新增"，然後將程式碼放入即可。
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:live-stream event_app_id="你的APPID" via_url="" always_post_to_friends="true"></fb:live-stream>所以即時動態流視窗(The Live Stream Box)，這小工具就完成了，可拿來當留言板，先前說明的Comments Box部分，也是可以當作留言板。
這是未登入之前，
這是登入後的模樣，
其實這兩樣留言板，就視你自己部落格常來往的對象做設定，如果常來往的都是FB的朋友，就可以利用第二種Live Stream的方式，建議可以另開分頁網頁來安裝這個工具，例如我部落格上新增一個"Facebook留言板"，
這樣一來也不會影響主頁的載入速度，而來留言空間也相對的擴大，看起來也比較舒服，也可以做一點稍微的設計。
測試過後，如果元件無法正常出現，可以參考這一連串的討論，
fb:comment is not working
不過通常重新載入或是清除Cookie後就能顯示。
請問要怎將留言版放在 "另開分頁網頁" ？
回覆刪除你可以參考這篇http://01mistery.blogspot.com/2010/01/blogger-pages.html，然後在文章內容區將程式碼放入即可。
回覆刪除我的留言板居然無法顯示...抄怪的
回覆刪除在么?
回覆刪除新建了个小站cmbtuan.com，打开主页后，在上方的标题栏点击“留言”页面。可是在留言页面的下面却找不到“留下评论”几个字，造成无法评论。
是不是被什么代码给隐藏了？
盼复。
To 贺西楼，分頁功能的原始設定應該是不允許留言，你可以在"張貼選項"那裏，更改設定，設成"允許"即可
回覆刪除还有一个问题，我的cmbtuan.com在FF 或者Google浏览器都显示正常。但是IE下，却无法显示最上面头部的图片，这是怎么回事？？求解。谢谢了
回覆刪除我用ie7看很正常。
回覆刪除hi~我好久沒來留言了~ ^^因為公司會檔FB，所以只好在這邊留言。
回覆刪除今天看到一個部落客文章，想說您這邊好像沒有提過，提供給您。
是在留言也能像Facebook回應一樣，按個"讚"
我是在這邊看到
http://blog.xuite.net/frank.hgs/GE/39428238
但是教學在這邊
http://ricebobo.pixnet.net/blog/post/19388920
雖然有些看不懂~但是好像成功了?因為公司有檔，只好回家再確認。
To 暗夜咆哮，謝謝你提供的資訊，這是新的Hack呢。
回覆刪除