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


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

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

Related Posts Plugin for WordPress, Blogger...