v 如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...