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

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


更多實用工具：

• 本站使用的 Blogger hack 及工具整理