Homepage‎ > ‎

Gadget: Facebook Comment

posted Mar 19, 2012, 2:06 AM by YUEN WU   [ updated Mar 19, 2012, 2:09 AM ]

因為Google Sites裡面沒有留言的機制,因此想說透過Facebook的Plugin來實現這個功能。接著就上網查了一下到底要怎麼用Facebook這個plugin。找到了他們說明網址(如下)


查到了該plugin大致上運作的原理,簡單來說就是連結到fb所提供的jsapi去取得所需要的資源,然後又可以分為用HTM5的方式,或者是XML namespace的方式。比較建議會用XML namespace的方式去做,因為目前瀏覽器能夠支援HTML5的還不是說非常普及。

在FB的網頁上面可以取得大致上的code是這樣run的:
1.首先你要include他們的sdk
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
通常這段程式碼是貼在<body>裡面的,官方說建議貼在<body>的後面。

2.把你的<html>標籤指定namespace "fb"
<html xmlns:fb="http://ogp.me/ns/fb#">

3.將你想要擺放這個plugin的位置加上這行code
<fb:comments href="http://example.com" num_posts="2" width="470"></fb:comments>

哈!這樣就完成了,看起來很簡單吧,沒錯~在一般的網頁下方常的簡單,但是如果你是要在Google Site用,那就不好了...在Google Sites裡面,你不能輕易的插入一段有使用到Javascript的HTML code,必須要透過Google小工具 (Gadget)來實現。那麼Gadget又是一個怎樣的東西呢?剛入門的人可以從下面這個連結去看看。


簡單來說分成兩個部分,用XML描述的部分是給新增Gadget填資料用的,實際在用的是在後半段(被<Content Type>包起來的code)。被這個標籤包起來的code就可以是一段HTML程式碼,可以插入Javascript,當你編輯好之後就存成.XML檔案然後上傳至server,新增小工具的時候就透過這個網址就能新增自定小工具了。

這邊先來示範一下怎麼用(就以Google Sites為例子),首先先將Gadget上傳至server準備好,並且複製他的鏈結網址



接著去編輯頁面的地方按下「插入」->「更多小工具」->「依據網址新增小供去」,然後將剛剛的連結填入按下確定,



如果正確無誤的話應該會出現一個設定框,其中的網址可以留白,如果留白的話會取用當下的網址,第二個數量是顯示留言的數量,地三個則是寬度,第四個是選擇主題,選擇light的話自會是黑色的,如果選擇dark的話,則字會是白色的。然後下半部的「顯示」是Google自定小工具一定會跑出來的項目,寬度則必須比設定此Gadget還大,高度也是。可是Facebook comment plugin是利用AJAX的方式取得資料,所以高度一定不會是固定的,因此我加上了Interval for updating gadget's height,也就是說會定時更新此Gadget的高度,所以高度設定並不是那麼重要了。


最後,要注意的一點是,一個頁面只能有一個Fb comment Gadgets,因為我是定義unique的id,所以如果有重複出現的話就會發生問題,可望在下一個版本解決!就先這樣了~分享給大家!
ċ
YUEN WU,
Mar 19, 2012, 2:06 AM
Comments