2010年10月6日 星期三

如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇


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&amp;width=400&amp;height=500&amp;via_url&amp;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='&quot;loading&quot; + 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後就能顯示。

9 則留言:

  1. 請問要怎將留言版放在 "另開分頁網頁" ?

    回覆刪除
  2. 你可以參考這篇http://01mistery.blogspot.com/2010/01/blogger-pages.html,然後在文章內容區將程式碼放入即可。

    回覆刪除
  3. 我的留言板居然無法顯示...抄怪的

    回覆刪除
  4. 在么?
    新建了个小站cmbtuan.com,打开主页后,在上方的标题栏点击“留言”页面。可是在留言页面的下面却找不到“留下评论”几个字,造成无法评论。
    是不是被什么代码给隐藏了?
    盼复。

    回覆刪除
  5. To 贺西楼,分頁功能的原始設定應該是不允許留言,你可以在"張貼選項"那裏,更改設定,設成"允許"即可

    回覆刪除
  6. 还有一个问题,我的cmbtuan.com在FF 或者Google浏览器都显示正常。但是IE下,却无法显示最上面头部的图片,这是怎么回事??求解。谢谢了

    回覆刪除
  7. hi~我好久沒來留言了~ ^^因為公司會檔FB,所以只好在這邊留言。
    今天看到一個部落客文章,想說您這邊好像沒有提過,提供給您。
    是在留言也能像Facebook回應一樣,按個"讚"
    我是在這邊看到
    http://blog.xuite.net/frank.hgs/GE/39428238
    但是教學在這邊
    http://ricebobo.pixnet.net/blog/post/19388920
    雖然有些看不懂~但是好像成功了?因為公司有檔,只好回家再確認。

    回覆刪除
  8. To 暗夜咆哮,謝謝你提供的資訊,這是新的Hack呢。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能