Tuesday, October 5, 2010

[Facebook] Social plugins - Comments 介紹

這次來介紹另外一個算是熱門的Facebook Social plugins - Comments,也就是評論功能,這個功能對於不少人來說算是蠻有吸引力的吧。這個Comments功能在Social plugins裡算是比較進階一點的功能(個人認為),所以沒有iframe的語法只有XFBML語法,也就是一定要有裝Facebook的Javascript SDK才能跑,雖然前幾篇介紹的時候有順便提過,不過這邊還是再仔細說一次。




安裝 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>

11 comments:

  1. 昨晚才在我自己架的網站上使用了這個功能,不過目前也正為了無法統一看留言的這個問題煩惱中,不知道SDK中是否有提供?查問了G大神許久....還是沒有找到Orz

    ReplyDelete
  2. 試出來了,可以把留言都整合在一個區塊中顯示,但這個方法要用到fb所提供FQL去直接查詢相關的資料表,再用後製程式去顯示資料及排版。

    ReplyDelete
  3. 跟我想的一樣,只不過這樣就不適合一般人使用了,要這樣自己寫code去query不如直接自己弄更好用的留言XD

    ReplyDelete
  4. 是啊,這方法真的不適合一般人使用~~~等看看有沒有機會FB出來新的插件功能吧

    ReplyDelete
  5. 今天突然發現一個算是不太理想的缺點,雖然用FQL查詢的方式可以將最新留言統一到一個區塊中顯示,但卻也因要跟FB連線的原因,反而拖延了網頁整體顯示的時間....平均增加了1.7秒左右Orz..

    ReplyDelete
  6. 如果用非同步的方式去拉資料的話,應該是沒差那兩三秒啦XD

    ReplyDelete
  7. 是啊~用非同步的方式就沒差了....

    ReplyDelete
  8. 有辦法在每個回覆留言上加讚嗎

    ReplyDelete
  9. 請問是在facebook的comment上加,還是在blogger上面加 ?

    ReplyDelete
  10. comment上呢? 因為公司作活動需要我做這個,要讓每個評論者都可以被按讚

    ReplyDelete
  11. 現在新版的comment直接可以按讚,所以就直接用吧。

    ReplyDelete