安裝 Facebook JavaScript SDK
Facebook上說得蠻複雜的，我找了一個簡單的方法，不必註冊、登記，只需剪下貼上即可。
在<html>內加上這段xmlns:fb='http://www.facebook.com/2008/fbml'
然後在<head></head>內加入下面這段，如果需要將英文改成繁體中文的話，請將紅色部分的en_US改成zh_TW
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true, xfbml: true});
};
</script>
加入這兩段後，你的網站就可以使用XFBML語法了。
參數介紹
Comments沒什麼參數可以設定，只有三個。
xid - Unique ID，Facebook用來辨別Comments的唯一值，xid值同樣的留言會列在同一個Comments內，建議使用UrlEncode過的Url去當xid。
width - 寬度。
numposts - 顯示則數，預設為10。
以網站為xid的語法
若整個網站共用這個Comments的話，語法相當簡單，只要在你要放Facebook Comments的地方，加入下面的語法，然後將紅色部分改成你的網址就好。
<fb:comments xid='www.died.tw' ></fb:comments>
以網頁為xid的語法
若要每一頁的Comments都是獨立的話，就要用點小伎倆了，我是使用jquery去做的，先來說在Blogger上的方式。
在<head></head>內加入下面這段
<script type='text/javascript'>
$(function() {
$('#fb_comments').attr('xid',encodeURIComponent($('#fb_comments').attr('xid')));
});
</script>
如果沒裝jquery的話記得先加這段
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script>
然後在你要放Facebook Comments的地方，加入下面的語法即可。
<fb:comments expr:xid='data:post.url' id='fb_comments'></fb:comments>
若是在其他的頁面上，則可以使用萬用版語法，在<head></head>內加入下面這段。
<script type='text/javascript'>
$(function() {
$('#fb_comments').attr('xid',encodeURIComponent(location.href)));
});
</script>
然後放Comments的地方，加入下面的語法。
<fb:comments xid='' id='fb_comments'></fb:comments>
這樣就完成了，當然這是比較簡單的做法，所以不適用於網址有帶參數的頁面，如果遇到這種情況就要看情況去修改了，而我所介紹的萬用語法是適用於一般頁面的狀況。
最後出來的結果就像下面這樣
如果有任何問題或指教還請各位告知:)
2011/05/19 update
Facebook後來有加強了功能，一般的Comments內就可以按讚了，語法也差不多，就像這樣。 不過我的留言字好像看不太到，大概是Facebook 的CSS跟我blog上的有衝到。
<fb:comments href="http://www.died.tw" num_posts="5" width="500" ></fb:comments>
昨晚才在我自己架的網站上使用了這個功能，不過目前也正為了無法統一看留言的這個問題煩惱中，不知道SDK中是否有提供？查問了G大神許久....還是沒有找到Orz
ReplyDelete試出來了，可以把留言都整合在一個區塊中顯示，但這個方法要用到fb所提供FQL去直接查詢相關的資料表，再用後製程式去顯示資料及排版。
ReplyDelete跟我想的一樣，只不過這樣就不適合一般人使用了，要這樣自己寫code去query不如直接自己弄更好用的留言XD
ReplyDelete是啊，這方法真的不適合一般人使用~~~等看看有沒有機會FB出來新的插件功能吧
ReplyDelete今天突然發現一個算是不太理想的缺點，雖然用FQL查詢的方式可以將最新留言統一到一個區塊中顯示，但卻也因要跟FB連線的原因，反而拖延了網頁整體顯示的時間....平均增加了1.7秒左右Orz..
ReplyDelete如果用非同步的方式去拉資料的話，應該是沒差那兩三秒啦XD
ReplyDelete是啊~用非同步的方式就沒差了....
ReplyDelete有辦法在每個回覆留言上加讚嗎
ReplyDelete請問是在facebook的comment上加，還是在blogger上面加 ?
ReplyDeletecomment上呢? 因為公司作活動需要我做這個，要讓每個評論者都可以被按讚
ReplyDelete現在新版的comment直接可以按讚，所以就直接用吧。
ReplyDelete