2010年9月30日 星期四

如何利用FACEBOOK的Social plugins製作部落格的留言板--fb:comments篇


2011.3.18更新,
因為Facebook改版,此方法已不適用。

Facebook的官網前一陣子有宣布未來不再支援FBML語法,所以先前利用fbml語法製作的留言板及Social plugins的元件語法有些許的更動,目前及未來是以iFrame及XFBML語法為支援對象,舊的FBML目前還是可以使用,但還是以新語法為主。

跟之前一樣,還是要申請Facebook API的功能,可參考先前如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用),這篇的作法去申請,而如何在Blogger的部落格中安裝Facebook的留言板(Comments Box,意見箱)及Live Stream,其實方法大同小異,只是語法有些變更。

Facebook的Social plugins有很多元件,你可以試著自己裝看看。

以下的說明都以新的模版為說明對象,

首先申請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的語言。

另外加入這些Social plugins的元件,可以利用iFrame或是XFBML兩種程式碼,不過大部分都是支援XFBML程式嗎,iFrame的較少。


如果利用XFBML的程式碼是比較彈性,而且語法也較少,但是需要你的部落格可以配合放入JavaScript SDK程式碼才行,這在Google Blogger的部落格是可以做到的。
XFBML is more flexible than iframes, but requires you use the JavaScript SDK.

如果用iframe方式,只要在網頁元素→新增的小工具→選擇"HTML/JavaScript 新增",然後將程式碼放入即可。

但如果要用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>


【第三步】加入Facebook留言板小工具---fb:comments
官網說明:Comments

目前留言板(Comments Box)及即時動態流視窗(The Live Stream Box),這兩種小工具,都可拿來當留言板,這篇先說明Comments Box部分。

留言板(意見箱、Comments Box)

版面配置→網頁元素,新增小工具,然後放入以下程式碼即可,這個元件只能使用XFBML,官方沒有提供IFRAME程式碼。

<fb:comments xid="你的APPID"></fb:comments>


如果你想放在邊欄,就加上寬度設定即可, width="300",記得寬度不要太小,不然留言之後的安全驗證碼沒法完整出現,我是設300px,你可以看你的邊欄寬度多大再來調整,語法如下 。

<fb:comments xid="你的APPID" width="300"></fb:comments>

官方的設計是以白底為主,如果你跟我一樣都是暗色底的,則加上css的格式即可,這是我的語法,
<fb:comments xid="你的APPID" width='300' css="http://你的css檔名.css"></fb:comments>
css的參考來源,Dark Background Tutorial (Comments-Box & Like-Button) [下載檔案download]語法如下,

/* Like button text color */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}

/* Comemnts box text color */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}

可以下載後放在協作平台,再外連即可,上面css裡面的格式及顏色也可改成你自己需要的。

這個工具是可以開放非Facebook的朋友留言,按下下方的"管理員留言設定",就可以設定相關部分。只要輸入名稱及安全驗證碼,信箱沒填寫也可發言。

2010.12.18更新
目前似乎一定要登入Facebook才可留言。


所以沒有Facebook帳號的朋友,也可以留言。



測試過後,如果放在邊欄感覺還是350px比較適合,或是放在本文下方較寬的小工具,另外有時這個元件無法正常出現,可以參考這一連串的討論,
fb:comment is not working
不過通常重新載入或是清除Cookie後就能顯示。

其實這兩樣留言板,就視你自己部落格常來往的對象做設定,如果常來往的都是FB的朋友,就可以利用第二種Live Stream的方式,建議可以另開分頁網頁來安裝這個工具,例如我部落格上新增一個"Facebook留言板",


這樣一來也不會影響主頁的載入速度,而來留言空間也相對的擴大,看起來也比較舒服,也可以做一點稍微的設計。

14 則留言:

  1. 我昨天正好跟著步驟做到金鑰的部分,然後要做第二篇安裝篇的時候~ 因為你寫的.. 8/31的註釋 還有眼花撩亂的程式碼,我就放棄了。
    可是沒想到~~!! 睡一覺起來居然有新的耶!!
    好高興喔~~
    對了,這張貼意見的地方,在firefox會被蓋住喔。
    我是用chrome留言的。

    回覆刪除
  2. 新的還是一堆程式碼,其實facebook的apps對我來說也是很困難,要研究很久,尤其很多都是英文說明,要有耐心慢慢看,另外我用Firefox留言是沒有問題,用其他帳號也沒有,所以沒有發現你說的問題。

    回覆刪除
  3. 也許是申請的介面與版面設定都變了
    其實昨晚我再弄金鑰的部份的時候,教學與自己看到的並不太相同。
    所以可能操作上我少做了甚麼...

    導致我花了一個上午的時間還是沒有辦法把留言板弄出來..
    我是想要把它弄在分頁上。

    我只能先暫停一下,過陣子再來試試了

    回覆刪除
  4. 下午當我決定過陣子再來測試後,我把修改HTML裡面的程式碼都刪除了。
    結果留言板就出現了耶?!
    不過留言板上的語法是參考重灌狂人的那段javascript語法。

    可是不曉得是我這樣的做法有錯誤還是怎麼樣,就是有時候讀取留言板會很慢,可是有時候又很快,請了幾個朋友幫我測試,有些看得到,有些就看不到了...

    回覆刪除
  5. 我的也有這個問題,我在文章最後有列出相關的討論,
    fb:comment is not working

    回覆刪除
  6. 怎么把 留言上方的赞给去掉。。。

    回覆刪除
  7. 那是官方制定的規格,這部份我不會。

    回覆刪除
  8. 留言板部分有辦法與個人帳戶同步嗎??例如我在此網站留言,而我在FB自己的塗鴉牆可以看到別人留言給我!!!不須再回到原網站做觀看^^

    回覆刪除
  9. 之前測試過我自己的留言在個人fb頁面會出現,但他方的留言就不會出現,而且目前fb改版後這個功能也怪怪的,常跑不出來。

    回覆刪除
  10. 我之前網站就有在用,不過是舊版的~就差幾天FB就推出新版的
    舊版會有bug, 目前無解,狀況2比較常出現
    不知道各位有沒有碰過這樣的問題
    我用facebook social plugins comments來當網站留言版但有時候,臉書會秀逗.
    1.無法留言 錯誤訊息:"Database Down. Sorry, a temporary error has occurred. Please try again."
    2.之前留言內容會不見,按F5或Ctrl+F5都沒有用,重開瀏覽器才會出現(有時候還不行呢,真得很莫明奇妙)
    這是我的網站http://2011slim.fhma-taiwan.org/vote/profile002.html

    原本也想升級,但舊的參數是用xid,新版的參數是用url,升級後舊的資料會不見
    昨天晚上終於google到無痛升級方式(保留舊的資料,用新介面)

    If you already have the original Comments Box installed, include the parameter migrated="1" to keep existing comments:


    不用要測試個幾天,不曉得會不會有問題
    不用轉換新版,有點怪,就是留言不是按照發言時間排序,亂成一團
    這是我先將其中一個頁面升級 http://2011slim.fhma-taiwan.org/vote/profile001.html

    回覆刪除
  11. 因為FB常常變動,不穩定,所以就不再測試了。

    回覆刪除
  12. 2011〔更新〕在Blogger文章加上Facebook留言功能
    你好..我又來打擾了..請問我參考上面那個網址做的fb留言版..該怎樣才能讓它不在按"繼續閱讀"前出現..只會出現在個別文章裡頭呢..謝謝..
    另外,因為fb最近真的太夯了..如果可以的話是否有機會再閱讀到您多寫幾篇關於fb的文章..網路我看的每個做法都不太一樣..看得我眼花..還是你的文章最詳細..謝謝..

    回覆刪除
  13. 2011〔更新〕在Blogger文章加上Facebook留言功能
    你好..我又來打擾了..請問我參考上面的文章做的fb留言..該怎樣才能把它不在首頁每篇文章按"繼續閱讀"前出現..只在個別的文章裡頭出現呢..謝謝..

    回覆刪除
  14. 我這篇是針對整個部落格的留言板,而非單篇文章的留言系統,很謝謝您的鼓勵,但是最近沒有時間研究這部份的東西,很抱歉。
    不過,要將某個元件在單篇文顯示,通常在其前後加上已下語法即可。
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    相關語法.....略
    </b:if>
    這部份可以參考Abin's的文章
    http://abintech.twidv.com/2007/02/sidebar.html
    你再配合工作達人的文章,自己在研究看看。

    回覆刪除

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