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


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

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

Related Posts Plugin for WordPress, Blogger...