2012年12月19日

部落格即時留言板──WYBOARD(安裝及使用說明)

A+
2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「部落格即時留言板 WYBOARD + 表情圖案


會寫這個「即時留言板」小工具,大概是逛別人部落格時,想留言卻找不到留言板;若隨便找篇文章留言,與主題無關又顯得唐突。如果在側邊欄醒目處能有個留言板的話,對訪客而言就很方便。

比較知名的即時留言板是 Cbox,而 Cbox 的缺點是無論你的網站是否熱門,都可能被留言機器人洗板,且 Cbox 免費版有留言數的限制。若想體驗這個輕爽方便的中文留言板,以下點大標題可直接跳到對應區塊。







一、特色

1. 資料庫放在 google 試算表,相信 google 的壽命應該會比其他軟體公司來的久。

2. Cbox 免費版有 100 則留言的上限,這個小工具沒有留言數的限制

3. 每則留言有五種情境可選,包含了 PTT 常用的 "推"、"噓" 等,也有回覆選項

4. 留言板大部分的版面配置及功能設定都開放出來修改,源碼也公開,客製化方便。

5. 站長只要設定 email,有留言時立即能收到留言通知。

6. 使用動態載入,不影響網頁效能。

7. 支援 javascript 的部落格即可安裝。

8. 安裝過「推文系統」的話,可充當「最新推文」小工具使用。



二、安裝程式碼

1. 安裝步驟:

◎ 非 Blogger 請將下面程式碼貼在支援 javascript 的區塊。

◎ Blogger 請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及下面的程式碼──



2. 重要參數修改:以上標示紅字的為重要參數──

非 Blogger 的部落格,最重要的是在 BR 行的雙引號內填入含 http 開頭的部落格首頁網址,其餘參數請參照 Blogger 說明。

◎ Blogger:

H:紅字 200 可改為自訂的留言區高度像素值,超過高度時會自動產生捲軸。

BQ:紅字 YourEmail@gmail.com 可改為自己的 email,那麼只要一有留言,系統會立刻寄出通知。

BS:可自訂要顯示的留言數目

BT:可自訂每則留言的長度

存檔後即可,想先看效果可參考右邊側邊欄的「最新推文」,不過版面配置不完全一樣;想看一模一樣的效果請參考放在 Xuite 的這個「測試網站

如果還想自訂版面的話,可繼續看下一點;覺得效果滿意的話,可直接看「三、使用說明」。

3. 其他參數:

js 的參數設定其實已經寫在雙斜線 // 註釋的後面,就不另作說明了;但 CSS 的參數很奇怪,若使用註釋的話在 blogger 下會出錯,以下只好一區一區說明了,如果對照困難的話,請下載前面提供的原始檔網址,該原始檔含 CSS 的註釋。

E~K:留言區的 CSS,可改外框顏色、形式,及高度等等。

X~AA:情境符號的 CSS,可改字型大小。

AB~AG:可改日期的顏色、大小等等。

AH~AK:留言區除了情境符號以外的區塊,可改距離左邊界的寬度。

AL~AN:可改暱稱的顏色、字體大小。

AP~AR:可改留言內容的上下邊界值

AS~AV:如果裝過「推文系統」的話,這個區塊可顯示最新推文的文章標題,這裡可以改標題的大小。

BC~BH:可改重新整理小圖示的 CSS

BJ~BM:可改 WYBOARD 輸入框的 CSS,例如外框顏色、形式。


三、使用說明

2012.12.24 補充

這個小工具的寬度太小的話,會讓版面不好看(例如暱稱長一點的話,整行都會擠到下一行去),因此建議到後台設定,讓側邊欄的寬度至少 250px 以上,版面看起來會比較順眼。


1. 操作上其實都會跳出提示,還算直覺化,若超過留言限制字數、或超過多少字也都會提示,因此操作步驟的說明就省略了。

2. 一次最多只能留兩次言,防止用程式洗版面;超過兩次需要重新整理頁面才能再留言。

3. 當超過顯示的留言則數時,例如設定顯示 10 個留言,當有第 11 個留言時才會顯示「按此看所有留言」及「重新整理」小圖示。

4. 留言內容可輸入 http 開頭的網址、圖片等,會自動產生超連結

5. 輸入暱稱、聯絡資料後會自動儲存到 cookie,以後不必再輸入。


四、補充說明

這個小工具的留言資料儲存在「google 試算表」,所有使用這個小工具的網站將共用某一個試算表,而一個試算表最多可儲存 40 萬筆資料。

不過我想 2012/12/21 快到了,所以是不用擔心 40 萬筆何時會爆滿;而要說明如何客製試算表格式、以及如何安裝自動寄信功能又太麻煩,所以暫時先不考慮客製試算表。不過如果發現特定網站的留言數量較多時,我也會主動讓資料量比較大的網站有獨立的試算表,因此可以不用擔心試算表容量的問題。

最後特別感謝「A Casual Place」的協助支援,在製作的過程提供許多這個小工具的點子及測試!如果在使用這個小工具上面有任何問題,歡迎在本頁面提出。


更多實用工具:

40 則留言:

  1. 對啊! 我遇過訪客問留言版的事, 好像大部分的BSP都另有留言版. 目前還想不到加裝的需要, 等您改成可私密留言版本吧!

    *2012/12/21只剩兩三天藉口了!

    回覆刪除
  2. <4266718650514440119>(以上內容請勿刪除,從括號之後開始留言)
    為了留言板debug得好累...
    私密留言...沒力氣再debug了...
    我要平平靜靜地度過到 2012/12/22 之前的時光...XD

    回覆刪除
  3. 這功能好用
    話說請問格主這留言板留言者
    更改為需登入帳號才可使用的可能性?

    回覆刪除
  4. <156017127118895356>(以上內容請勿刪除,從括號之後開始留言)
    你是指登入google帳號嗎?我的能力做不到這一點..

    回覆刪除
  5. 我剛安裝了這個小工具 ^______^

    回覆刪除
  6. <5048996544801013937>(以上內容請勿刪除,從括號之後開始留言)
    果然還是得細調 CSS,請在原程式碼 U 與 V 行之間插入以下程式碼:

    padding: 0px;
    background-image: none;
    display: inline-block;

    這樣版面應該可以了。

    回覆刪除
  7. 我試著安裝完成了,但圖案好像切一半了,可以請教如何改善嗎?謝謝^^

    回覆刪除
  8. <6171012646182544016>(以上內容請勿刪除,從括號之後開始留言)
    請在 L 與 M 行之間插入:
    margin: 0px;
    應該就可以了。

    不過由於你是三欄式的版面,造成小工具的寬度太窄,可能還是會有一些版面問題:
    1. 暱稱比較長時,跟日期無法顯示在同一行。
    2. 用Chrome看時,「表示」那一區的下拉按鈕太窄,變成用直行顯示,就像──



    看看要不要考慮用兩欄式版面,讓側邊欄寬一點比較好看囉~

    回覆刪除
  9. <6857634426589617135>(以上內容請勿刪除,從括號之後開始留言)謝謝你^^我會修正一下的。

    回覆刪除
  10. 今天趁有空在自己的私人網誌安裝了(公開的沒裝^^;)
    很好用的留言板,謝謝~

    回覆刪除
  11. <1224513821952401599>(以上內容請勿刪除,從括號之後開始留言)
    不客氣,感覺上這個留言板比推文系統還受歡迎~

    回覆刪除
  12. 你好~我想請問一下表單資料庫可以用自己的嗎?

    請問一下您的表單資料庫是怎麼做的?

    另外現在新版google表單的form key 找不到是否有辦法找到?

    謝謝

    回覆刪除
  13. <1125952116044078783>(以上內容請勿刪除,從括號之後開始留言)
    [quote]請問一下表單資料庫可以用自己的嗎?請問一下您的表單資料庫是怎麼做的?[/quote]
    可以用自己的,只要有舊版的表單檔案就行,但如何設定、如何裝email回覆功能,都是很麻煩的,我得另外弄一篇教學,因此這個功能要等下一版再說了。

    [quote]新版google表單的form key 找不到是否有辦法找到?[/quote]請參考「利用 Google 問卷(試算表)當小型資料庫__更新版」系列文,以及文章開頭的公告,請按照公告的指示留下聯絡資料。

    回覆刪除
  14. 感覺很棒,但又捨不得放棄Cbox的表情圖示
    之後的版本會不會開放自訂表情圖示啊>////<

    回覆刪除
  15. WFU 大大,我已經裝了 XD

    還有,如果大大能夠快一點推出怎樣才能 delete 留言就好啦~
    (也就是管理留言)

    因為如果萬一有些人專利用這個留言版來'做壞事',
    那站長沒辦法控制他,站長就會很頭疼,最後不得不關了這個小工具...

    回覆刪除
  16. <9196060510675839948>(以上內容請勿刪除,從括號之後開始留言)「自訂表情圖示」是個很棒的 idea,要做到也不難,但是最大的問題是,我不會畫圖,以及要如何提供沒有版權爭議的圖示。

    如果你能提供能公開使用的圖示是最好的了,那下一版加進這個功能應該沒問題。

    回覆刪除
  17. <5160971481653985902>(以上內容請勿刪除,從括號之後開始留言)要管理留言最快的方法就是──「贊助WFU BLOG」→「四、贊助的小禮物」→ 第 4 點

    其實也不用贊助啦, 真的要 delete,留個言跟我講一聲,就會幫你 delete 啦!

    回覆刪除
  18. <4922347588604544956>(以上內容請勿刪除,從括號之後開始留言)恩!
    只怕那些壞分子會不斷洗版,最終要麻煩你 XD

    回覆刪除
  19. <8408937215180135089>(以上內容請勿刪除,從括號之後開始留言)http://messenger.msn.com/resource/Emoticons.aspx?mkt=zh-tw
    這些算是能公開使用的表情圖示嗎XD
    其實我滿喜歡MSN的內建表情耶XDD

    回覆刪除
  20. <4807207072752491489>(以上內容請勿刪除,從括號之後開始留言)謝謝提供資訊,看來表情圖案的功能很搶手呢~我想呢,雖然 MSN 已經關閉了,不過不代表微軟自動開放這些圖案公開使用吧~所以我不敢貿然借用..><

    如果能有無版權爭議的圖案,我會想辦法弄進這個功能的~

    回覆刪除
  21. 請問會有個人版本的留言版嘛?因為用在同一個辜狗帳號上好像有點不妥,像是很快就塞爆這種情況,外加上要麻煩WF大幫忙刪留言實在有點不好意思,比起自訂表情,我更希望有這個代碼呢><,還有能夠改變留言時文字的顏色也很不錯!

    回覆刪除
  22. <2768492866714370716>(以上內容請勿刪除,從括號之後開始留言)[quote]會有個人版本的留言版嘛?[/quote]請見【留言 #08】、【留言 #10】的回答
    [quote]在同一個辜狗帳號上好像有點不妥,像是很快就塞爆這種情況,外加上要麻煩WF大幫忙刪留言實在有點不好意思[/quote]這一點真的不用擔心,40萬筆資料,以目前的使用速度,可遠遠超過 50 年~~而需要刪留言的狀況,其實遠比想像中還少,因此在 Wyboard 出名之前,是不用擔心這個問題的。(萬一 Wyboard 出名了,才會有垃圾留言的問題!)
    [quote]能夠改變留言時文字的顏色也很不錯[/quote]你是要問怎麼改文字顏色嗎?請見本文,所有的 CSS 都開放出來改了,如果不知道怎麼改再詢問好了。

    回覆刪除
  23. <4182309363335854389>(以上內容請勿刪除,從括號之後開始留言)
    嗚喔,看到那兩個回應了。那我就等下一版出來的時候再研究研究!主要是想說,如果說了些什麼不想讓人看到的留言時可以刪除這樣XD!至於文字顏色,就像使用網誌時能夠變更顏色那樣。(好像說得有點抽象...)

    回覆刪除
  24. <2237317298183556577>(以上內容請勿刪除,從括號之後開始留言)改哪裡的文字顏色、怎麼改,要請你詳細描述了,否則還是不太理解你的意思...

    回覆刪除
  25. <3346791391329874526>(以上內容請勿刪除,以下引言請自行刪減) [quote]改哪裡的文字顏色、怎麼改,要請你詳細描述了,否則還是不太理解你的意思...[/quote]

    [IMG]http://i.imgur.com/tQNjKsm.png[/IMG]
    還是用截圖比較清楚,用文字說明實在是難以想用詞XDDDD

    回覆刪除
  26. <4665072594711805945>(以上內容請勿刪除,從括號之後開始留言)天哪~這個功能會要我的命...XD

    只是小小的留言板,弄文字編輯器的功能實在太複雜了,哈哈~~

    對了,文末發了個公告,請見「2013.7.3 公告」的部分。

    回覆刪除
  27. <8811451235479206734>(以上內容請勿刪除,以下引言請自行刪減) [quote]天哪~這個功能會要我的命...XD只是小小的留言板,弄文字編輯器的功能實在太複雜了,哈哈~~對了,文末發了個公告,請見「2013.7.3公告」的部分。[/quote]

    果然太複雜了><,那我還是等下一版的WYBOARD耶!CBOX最近好像關了,所以不斷在找新留言版呢,恰好記起這邊有這個功能XDDD!先暫時用著公開版(?)的,等個人版出來再換!

    回覆刪除
  28. <6528123335166402926>(以上內容請勿刪除,從括號之後開始留言)測了一下, Cbox 真的進不去, google 了一下沒看到要關閉的消息. 這是快取畫面:http://webcache.googleusercontent.com/search?q=cache:http://www.cbox.ws/
    應該只是暫時維修中, 可以不用擔心啦~

    不過也讓我再度覺得,還是少用外部伺服器比較穩妥,使用 Google 自家的資料庫還是比較安心。

    回覆刪除
  29. 請問 '按此看所有留言' 要如何修改?

    回覆刪除
  30. <3445736909004562131>(以上內容請勿刪除,以下引言請自行刪減) [quote]請問'按此看所有留言'要如何修改?[/quote]先改好所有文章內的 js吧~ 沒有催促的意思,不急的 ^^

    回覆刪除
  31. <3445736909004562131>(以上內容請勿刪除,從括號之後開始留言)CC行的 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WYB-share-121217-min.js ,搜尋字串可找到 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WYB-list-121218.js"。

    編輯你的 js 檔, 把原本放在 google code 空間的 WYB-list-121218.js,換成以上 Google Drive 的連結 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WYB-list-121218.js,這樣應該就行了。

    回覆刪除
  32. <353523494653622937>(以上內容請勿刪除,從括號之後開始留言)OK了,謝謝 ^^

    回覆刪除
  33. 謝謝wayne 我裝好了! 這樣部落格親民多了
    應該會多比較多不想登入的訪客留言了吧 (快來快來...陌生人XD)

    回覆刪除
  34. <3634685348105026713>(以上內容請勿刪除,從括號之後開始留言)我留言測試了,從我的瀏覽器看發現版面距離不太正確(因為每個人的範本 CSS 設定都不一樣),你試試把程式碼 R 行的內容(padding: 5px 2px;)去除,應該就能正常了。

    回覆刪除
  35. <7803064431809358637>(以上內容請勿刪除,從括號之後開始留言)
    我照你說的改了設定似乎OK了! 推文的推字從之前的被切一半變正常了! 謝謝你^^

    回覆刪除
  36. <7371768393403958176>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除
  37. 留言板突然倒著日期顯示留言(從舊的開始顯示)
    新的留言都看不到,必須點開"看所有留言"並拉到最底才能看到
    該怎麼辦?
    http://moonfly.blog112.fc2.com/

    回覆刪除
  38. <47122628249284580>(以上內容請勿刪除,從括號之後開始留言)請見文章開頭的公告,改安裝新版 wyboard 試試,記得先完整移除舊版程式碼。

    回覆刪除
  39. 感謝分享! 留言板非常好用呀! (拿走)

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。