2010年1月28日 星期四

如何利用Facebook帳號製作部落格的留言板---安裝篇


2011.3.18更新,
因為Facebook改版,此方法已不適用。
2010.8.21更新,
未來Facebook已經不再支援FBML語法,所以此篇教學內容已沒有作用,未來是以iFrame語法為支援對象,等綸太郎研究過後再跟大家分享。

2010.10.6更新,新的留言板製作方式,
如何利用FACEBOOK的Social plugins製作部落格的留言板--fb:comments篇
如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇


Google Blogger的好處就是修改的彈性度很大,又不用付錢負擔主機的費用,所以沒有自架網站的朋友也可以不用透過驗證,就可以使用Facebook API的功能,繼上篇如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用),這篇要講到如何在Blogger的部落格中安裝Facebook的留言板(Comments Box,意見箱),看倌們繼續看下去唄。

綸太郎介紹的有兩種留言板,你可以看自己的部落格屬性,或是留言的狀態,決定你要用哪一種。

首先申請Facebook API金鑰,請參考
【第一步】:如何申請你的FACEBOOK 應用程式API金鑰


【第二步】部落格模板的修改

1、首先需先修改html的內容,要放入兩段程式碼,來宣告你的模板要套用Facebook的特殊程式碼規格

版面配置→修改Html,在模版最上方可以找到以下這段語法
<html 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 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'>
然後再加入以下程式碼,這裡API金鑰就可以應用了,

在</body>前(把滑鼠拉到模版html的最底端就可看見)放下以下程式碼
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW" type="text/javascript"></script><script type="text/javascript">FB.init("你的API金鑰");</script>

【第三步】加入Facebook留言板小工具Widget

目前留言板(Comments Box)及即時動態流視窗(The Live Stream Box),這兩種小工具,都可拿來當留言板,分別使用API金鑰及應用程式ID。

留言板(意見箱、Comments Box)
這個工具是可以開放非Facebook的朋友留言,只要輸入名稱及安全驗證碼,信箱沒填寫也可發言。
目前限定Facebook帳號才可留言‧
版面配置→網頁元素,新增小工具,然後放入以下程式碼即可
<fb:comments></fb:comments>
這是原先的規格,適合放在文章區下方,如果你想放在邊欄,就加上寬度設定即可, width="350",記得寬度不要太小,不然留言之後的安全驗證碼沒法完整出現,我是設350px,超出的部份再利用scrolling捲動軸來控制,你可以看你的邊欄寬度多大再來調整,語法如下 。
<fb:comments width="350"></fb:comments>


另外上一篇有談到,最好是讓他只在首頁出現,如何做呢?
版面配置→修改Html,展開小裝置範本

找到你的Facebook的區塊,利用關鍵字,例如我取名為'Facebook留言板',就找這區塊
<b:widget id='HTML9' locked='false' title='Facebook留言板' type='HTML'>
然後在
<b:includable id='main'>
下面加上這行語法
<b:if cond='data:blog.url == data:blog.homepageUrl'>

然後再下方一點,找到</b:includable>
在這行上方加上</b:if>

類似以下這張圖這樣,這個元件就只會出現在首頁而已,如果你有其他的元件也想這樣,如法泡製即可。


注意:如果你已經申請了粉絲專頁,或是相關的Facebook小工具有用到API金鑰的,都要改成你新申請的才可以用,不然你的部落格上同一個頁面有兩個金鑰,WIDGET小工具是無法正常顯示的。

例如以下粉絲專頁的程式碼,紅色的就是API金鑰的部份,
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW"></script><script type="text/javascript">FB.init("aeb637XXXXXXda32c880";);</script><fb:fan profile_id="168040726587" stream="0" connections="10" logobar="1" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/tokyoplayfans">東京封印</a> on Facebook</div>
你要將新的API金鑰取代紅色這個舊的API金鑰。

即時動態流視窗(The Live Stream Box)
版面配置→網頁元素,新增小工具,然後輸入以下程式碼即可
<fb:live-stream event_app_id="你的應用程式id" xid="YOUR_EVENT_XID" width="300" height="500"></fb:live-stream>
這和Comments Box留言版最大的不同,
1、限定只有Facebook的帳號可留言,不開放其他系統留言。
2、留言會顯示在個人帳號的近況更新上(目前只有版主及朋友的留言會出現,其他人的不會出現在近況更新上,另外版主的部份會顯示在自己帳號的塗鴉牆上),登入後即可在部落格這個元件中看到其他朋友的近況更新。
3、他在Facebook塗鴉牆上的超連結會直接連結到你的部落格首頁(聯外通網址)
4、在不同文章頁面留言,出現的留言內容都一樣,沒有整合的問題。
5、xid,還沒有研究出來是什麼,好像如果有多個動態流的話,可以用來加以區別的東西。


另外它有分所有觀眾朋友兩個頁面,朋友部份要登入Facebook帳號後才能看到其他人最新近況,而所有觀眾頁面則是你在部落格上的這個工具留言就會顯示出來。


在個人Facebook塗鴉牆出現的畫面也不同,


其實綸太郎覺得部落格的留言數目很多的話,利用這個工具是很有幫助的,不佔自己空間(可以利用scrolling來控制),目前Google Blogger也沒有提供Facebook帳號的留言,也可以鼓勵Facebook上的朋友來留言,另外如果你的部落格讀者都是來自Facebook上的好友的話,即時動態流視窗就很適合,只是我很討厭安全驗證這項設施,常常都看不清楚他的文字,用聽的更是霧沙沙了,有人知道怎樣取消嗎?

這兩個留言板各有優劣,有需要的朋友可以自己試著玩看看,但目前的情況下,綸太郎應該不久之後會刪除,或是改版,不然目前的模板真的負擔太大,Firefox瀏覽沒問題,但是IE跑得很慢也有停滯的狀況,正在想辦法修正中,元件真的裝太多了。

41 則留言:

  1. 不過很可惜的是大部份的台灣企業都把facebook擋掉,能見度會有影響

    回覆刪除
  2. 說的也是,Facebook應該不是只能用來玩遊戲的。

    回覆刪除
  3. 我也想知道那個驗證要怎樣拿掉!!

    (連我自己都不想用的東西, 怎麼奢望讀者會用呢?)

    回覆刪除
  4. 是啊,像Facebook的遊戲,我也不玩,愛玩的人還是一堆,其實我也知道常介紹冷門的東西,但是既然自己有實際操作,知道優缺點在哪,就把心得跟大家分享囉,讀者要不要用,就隨緣吧。

    回覆刪除
  5. 文章裡,提到〔注意:如果你已經申請了粉絲專頁,或是相關的Facebook小工具有用到API金鑰的,都要改成你新申請的才可以用,不然你的部落格上同一個頁面有兩個金鑰,WIDGET小工具是無法正常顯示的。〕
    如果張貼其他粉絲團的資訊在自己的blogger頁面,也會相互影響?

    像我的頁面http://ytnetpu.blogspot.com

    回覆刪除
  6. 應該是針對這個部落格申請的API金鑰吧,其他的應該不會影響,我剛才測試了一下,是沒有影響的。

    回覆刪除
  7. 原來要改金鑰啊!
    難怪我都用不成功,
    顯示了留言板,
    就不顯示加入粉絲團!!

    感謝教學^^

    回覆刪除
  8. 其實最先我跟你一樣,後來也是看了英文說明頁,自己弄很久才成功的。

    回覆刪除
  9. 你好!請問文章中怎麼放CODE代碼 像你上面的那種 還有我吧sitebro的代碼放在blog上 照片沒法顯示 這是什麼問題? sitebar圖片就是 “今天的幸運文章,看看是誰?”下面那種!

    回覆刪除
  10. code可以參考這篇http://klcintw4.blogspot.com/2006/11/blog-post_03.html
    sitebro代碼,你是說圖片吧,他有一種是有顯示圖的,一種不顯示的,你可能點選到不顯示的語法。

    回覆刪除
  11. 我點顯示的
    但是沒圖片,就× 好像找不到圖片的那種

    回覆刪除
  12. 我看了他現在的程式碼有改變,你找到
    <img src="/img/b/stick_sitebro.png"
    把它改成
    <img src="http://zh.sitebro.com/img/b/stick_sitebro.png"
    應該就能顯示圖了,可能是太多人連結他的圖,圖庫撐不了,才這樣做吧。

    回覆刪除
  13. 我覺得認證碼有點麻煩..能去掉嗎~@@?

    回覆刪除
  14. 沒有認真看文章歐,我還等著高人給我答案呢。

    回覆刪除
  15. 怎樣刪除過舊的留言呢?

    回覆刪除
  16. 登入FB之後,可以看到每則留言下面都有刪除的選項,目前我只有5則,如果多一點,例如100則,我就不知道了。

    回覆刪除
  17. 請問版主有興趣當家教嗎?
    我要在短時間內學習
    不想上補習班(太慢也不一定符合需求)
    如果可以請回給我
    謝謝

    回覆刪除
  18. 抱歉,沒有這方面的能力,謝謝你。

    回覆刪除
  19. 您好,感謝您的教學文章
    我採用的是第一個"留言板(意見箱、Comments Box)"方式
    但我遇到以下兩個困難:
    1.加入"xmlns:fb='http://www.facebook.com/2008/fbml'"語法後,這行字竟然很詭異的出現在blog的頁面最頂端?
    2.隨著留言越來越多,畫面也越拉越長,請問有什麼辦法可以解決呢?(除了刪留言外...)

    回覆刪除
  20. 1.你的部落格網址???我幫你看看,通常是用單引號
    2.試著在語法裡加上height="???",看看是否有效,不然就和我一樣把元件縮短http://01mistery.blogspot.com/2009/02/sidebar-scrollbar.html

    回覆刪除
  21. 你好,我在WordPress博客系統中添加commentbox,代碼寫在文章模板上,問題是:文章A的留言,同樣能出現在文章B下面,請問這個該怎麼解決呢?謝謝

    回覆刪除
  22. 我這篇是針對blogger的邊欄小工具,不是文章部份,WP目前沒有研究,沒法幫你解決。

    回覆刪除
  23. 您好
    感謝您的指導
    又有問題想請教您了

    1.請問這個留言版的字體顏色有辦法變換嗎,因為預設的字體顏色似乎和我的網頁底色太接近。
    2.我是以原FB個人帳號去申請這個應用程式,在我網頁上的留言理所當然會同步出現在那個FB的個人帳號塗鴉牆上,請問是否有辦法同步出現在該應用程式的塗鴉牆上呢?或是說,因為我主要是希望大家在FB上面聚焦的是那個應用程式,而不是我個人的帳號呀...

    煩請您指導了~

    回覆刪除
  24. 請問一下,我的部落格也加上了Facebook Comments Box,
    但是有個問題,如果有人用Facebook Comments Box寫了回應,我不會收到通知,也沒辦法看到所有的回應,簡單說就是有人寫了回應但是我不知道,
    有沒有辦法可以讓我收到通知,或是可以看到所有的回應?謝謝。

    回覆刪除
  25. 為什麼會看不到,他貼在部落格上的Comments Box你就可以在部落格上看到了。

    回覆刪除
  26. 版面配置→修改Html,在模版最上方可以找到以下這段語法
    所謂的模板 在哪丫

    回覆刪除
  27. 模板就是你在後台看到設計→修改 HTML,範本裡的那些程式碼。

    回覆刪除
  28. 現在的頁面和你貼的都不一樣了
    紫比較笨 可以在敎一次嗎

    回覆刪除
  29. 因為現在facebook未來不再支援fbml語法,所以現在是要用iframe語法才能使用,所以這篇就失效了,而原先已經申請的還適用。

    回覆刪除
  30. 請問為什麼我用出來的即時動態流視窗版面是英文的 = =

    回覆刪除
  31. 我有加耶 還是一樣我是照上面貼的,不過都是英文 = =

    回覆刪除
  32. 其實你可以直接利用網頁說明的程式碼,應該可以顯示中文 http://developers.facebook.com/docs/reference/plugins/live-stream

    回覆刪除
  33. 程式碼的後面
    http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW
    不過33樓回應加了沒用。

    回覆刪除
  34. 請問live stream box要如何才能保持全部的留言,而不是頁面重新整理後,只剩下10則呢?

    回覆刪除
  35. 這是Facebook的官方設計,找了官網也沒有說明這部份。

    回覆刪除
  36. COMMENTS BOX 不登入 FACEBOOK 不能留言?
    請問有解嗎。。。。

    回覆刪除
  37. 我是不知道有無解決方法 或許你可到facebook 討論區問看看

    回覆刪除

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