2012年12月19日

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

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

Wayne Fu 0 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」的協助支援,在製作的過程提供許多這個小工具的點子及測試!如果在使用這個小工具上面有任何問題,歡迎在本頁面提出。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

23 則留言:

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

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

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

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

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

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

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

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

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

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

    謝謝

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP