2015年4月21日

自製簡易 Blogger 即時留言版

A+
blogger-comment-form原本 WFU BLOG 側邊欄有個「Wyboard 留言版」,因為比較花俏、耗資源,所以用「分頁功能」隱藏起來,當讀者需要留言、點擊分頁時才動態載入。

後來想想,隱藏在分頁的功能,八成讀者都不太會發現,留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋,開始尋找有沒有不耗資源的簡易型留言版。

最後發現了 Blogger 官方留言版,可以把它搬到側邊欄來使用,似乎就成了這個計畫的最佳選擇,以下就來看看如何安裝。想要先測試一下效果,可前往展示網頁:




一、各種即時留言版比較


簡單說明一下幾種可以放在側邊欄、作為即時留言版的工具:

1. 聯絡表單

這個官方工具的操作及使用情境,可參考「Blogger 私密留言的三種替代方案」→「三、聯絡表單」。放在側邊欄當留言版算是非常實用的工具,不過只能當私密留言(email)使用,無法在網站保存留言記錄。


2. Wyboard 留言版

最新的版本可以「使用表情符號」,功能類似 Cbox,不過限制比較少,不會被機器人洗版。

功能比較多的留言版可以吸引訪客目光,適合性質比較活潑的網站,需要使用多一點的系統資源。

wyboard-comment-box


3. Blogger 留言框

會使用官方留言框的話,大概是純功能性考量。跟「聯絡表單」一樣,都不太耗系統資源;不過比起「聯絡表單」,官方留言框至少能保存訪客的留言內容。



二、安裝程式碼


1. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。


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


以下參數修改請參照以上程式碼行號:

E:紅色網址請改為自己要當作留言板的那篇文章網址

F:留言板會依據版面配置而自適應高度,若覺得留言板部分內容沒有顯示出來,請調整藍色參數的數值,增加顯示的面積。

安裝完的效果,可前往展示網頁:




三、使用說明


1. 原理

這個留言板的原理為,抓取某篇文章的留言板,讓這個留言板能出現在每個頁面的側邊欄,而成為即時留言板。

因此就像本站的「留言板」,請新開一篇文章後,複製這篇文章的網址,貼入程式碼 E 行,這個小工具就能運作。


2. 運作流程

在這個小工具留言,其實就等於在充當留言板的那篇文章留言。當訪客留完言,畫面會自動跳轉到該篇文章、並前往最後一則留言的錨點位置,讓訪客看到剛剛自己的留言內容。


3. 設計構想

這個設計的好處是,當訪客想留言時,如果在不相干的文章留言很突兀。但對網站動線不熟的訪客,往往找不到留言板的連結,甚至很多網站根本沒設置專門用於留言的頁面,那更是找不到留言的地方。

使用這個工具後,留言框很大、很明顯,放在側邊欄顯目位置,訪客要找留言板就很容易了。


4. 搭配最新回應

就像「Wyboard 留言版」,如果留言板上方有最近幾則留言,這樣的留言板會比較有吸引力一些,想留言的訪客也會有興趣,其他人都在說些什麼。


wyboard-comment-box

因此這個官方留言板小工具,也許可以搭配「Blogger 最新回應+留言者頭像+文章標題」,在留言板的上方擺放最新回應程式碼,那麼就像是一個完整的留言工具了。


更多留言相關文章:

20 則留言:

  1. 來當第一個。我有點好奇,用網頁來當文章網址不知道可不可行呢?

    回覆刪除
    回覆
    1. "網頁" 要拿來留言並不適合,有 bug,例如「訪客無法追蹤留言」。除了把 "網頁" 當作「私密文章」以外,不建議使用 "網頁","網頁" 能做到的事,都可由開 "新文章" 來取代。

      刪除
  2. 你好!不好意思,又麻烦你了.我的博客有留言,我也回复了,可是不知道为什么不显示出来?http://winnipegcn.blogspot.ca/2014/09/daycare.html?showComment=1429153425888#c4299463239991556035, 是否安装你说的这个留言板更好?

    回覆刪除
    回覆
    1. 我不清楚這個非官方範本怎麼寫的,或是是否跟哪裡的程式碼起衝突,建議參考「備份範本」系列文章,建立版本控制,出問題時取回舊版本交叉比對,來排除出問題的程式。

      另外就是看看你要不要部落格重新安裝一次,比較能確定是哪些程式會引起衝突。然後,本篇的這個留言板看起來無法解決你目前的狀況~

      刪除
    2. 谢谢你耐心的回复和帮助!在你这里学到很多东西.我不懂编程,都是按照你的方法一步一步做的,很感谢!

      刪除
    3. 不客氣~很高興這個網站對你有幫助。這樣吧,針對你的狀況,我能給的建議會是這樣:

      1. 如果不熟悉編程,又想使用非官方範本 → 建議用該範本的所有現成功能,不要安裝多餘外掛,因為很可能你還不具備 debug 的能力。

      2. 如果很想把部落格打造成心目中滿意的模樣,建議先從官方範本開始練等級,把 Blogger 架構、操作都摸得熟透了,會自行修改、也會版本控制、懂得 debug,之後再來改用非官方範本。

      3. 等級夠了,修改非官方範本時,自然能縮短處理時間、快速找出問題所在。

      4. 最節省時間、不需自行摸索的方式為,「專業問題,專業解決」→ 付費將問題交由專家解決。

      以上建議可自行評估如何採用~

      刪除
    4. 好的,谢谢你的建议!很中肯!我只是比较喜欢琢磨点事情!谢谢你的帮助,你的文章非常实用!再次谢谢!呵呵!

      刪除
  3. 我按照你的搭配,把即時留言和Blogger 最新回應+留言者頭像+文章標題
    放在了同一個HTML/JavaScript小工具後面,也就是我把最新回應的程式碼(你上面最後的搭配鏈接,我跳過去複製的) 現在我的頁面看著好像有點不美觀。 上下兩行,能不能實現你的站那個樣子,有2個按鈕,按下留言就出現留言的畫面。 按下最新回應就切換到最新回應。
    這是我的網址: hexiezuo.blogspot.com

    回覆刪除
    回覆
    1. hi Hexie,

      如果熟悉語法的話,你可以試著我以前的教學「分頁功能」來製作:http://www.wfublog.com/2012/07/blogger-tabbed-sidebar.html → 只不過分頁樣式跟我目前的網站不太一樣就是了。

      如果要跟我目前的一模一樣,就得依照「客製案子」處理了。

      刪除
  4. 無法顯示...http://trythebests.blogspot.hk/

    回覆刪除
  5. 您好,請問為什麼這個留言板用在網頁成功,但google的側邊欄一直放不上去T_T
    成功如下:
    http://yunjhong.blogspot.tw/p/blog-page_22.html

    但側邊欄貼上語法後前臺一片空白T_T我看別人不會這樣,求解

    謝謝

    回覆刪除
    回覆
    1. 你要先裝上去,讓我看異常的現象,才能分析是什麼狀況喔~

      刪除
    2. 已放上去,右邊頭像上「閒聊」,貼進去了但是前台無法顯現,謝謝

      http://yunjhong.blogspot.tw/

      刪除
    3. 看了你的網頁原始碼,安裝了多次 jQuery,也許你先移除到剩一個 jQuery 試試看。

      刪除
    4. 您好,我只有再HEAD前看到一個
      另一個關鍵詞是出現在留言框的語法內@@
      script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'

      刪除
    5. 可以從網頁原始碼看,去找出你裝在哪裡

      刪除
    6. 我用範本看只到2651,用網頁原始碼到4196
      可事已經沒地方可以捲動了orz

      刪除
    7. 每個小工具都叫出來找一找吧,把裝在小工具的 jQuery 刪除

      刪除

張貼留言注意事項:

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