自製簡易 Blogger 即時留言版

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

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

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

點此看範例網頁

一、各種即時留言版比較

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

1. 聯絡表單

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


2. Wyboard 留言版

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

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




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」→ 填入標題、以及以下程式碼：

1. <!-- Blogger 官方留言版 start -->
2. <div id="side_comment_form"></div><div id="comment_form_info"><a href="https://www.wfublog.com/2015/04/blogger-comment-form.html">ⓦ Comment Form</a></div>
3. <script>
4. (function($) {
5. var postUrl = "http://www.wfublog.com/2014/01/guestbook-2.html", // 填入留言板文章網址
6. height = 200, // 留言板高度
7. feedUrl, isPostUrl;
9. var _0x38a69f=_0x4e89;(function(_0x333799,_0x21f0ba){var _0x266fbe=_0x4e89,_0x3200c8=_0x333799();while(!![]){try{var _0x38947d=-parseInt(_0x266fbe(0x197))/0x1+parseInt(_0x266fbe(0x18f))/0x2*(parseInt(_0x266fbe(0x193))/0x3)+parseInt(_0x266fbe(0x199))/0x4*(parseInt(_0x266fbe(0x19f))/0x5)+parseInt(_0x266fbe(0x19d))/0x6*(parseInt(_0x266fbe(0x194))/0x7)+-parseInt(_0x266fbe(0x18c))/0x8+parseInt(_0x266fbe(0x18d))/0x9*(parseInt(_0x266fbe(0x19b))/0xa)+-parseInt(_0x266fbe(0x1a0))/0xb*(-parseInt(_0x266fbe(0x198))/0xc);if(_0x38947d===_0x21f0ba)break;else _0x3200c8['push'](_0x3200c8['shift']());}catch(_0x225fde){_0x3200c8['push'](_0x3200c8['shift']());}}}(_0x1cf2,0x7e7ad),ckFeedUrl(),$[_0x38a69f(0x190)](feedUrl,function(_0x1babff){var _0x3fb74c=_0x38a69f,_0xa86d84=_0x1babff[_0x3fb74c(0x18b)],_0x28ad03=_0xa86d84['id']['$t'][_0x3fb74c(0x18e)]('-')[0x1],_0xd1e55b=_0xa86d84[_0x3fb74c(0x1a3)][0x0]['id']['$t'][_0x3fb74c(0x18e)]('-')[0x2],_0x276dbf=isPostUrl?_0x3fb74c(0x191):_0x3fb74c(0x1a5),_0x3eda02='https://www.blogger.com/comment-iframe.g?blogID='+_0x28ad03+'&'+_0x276dbf+_0xd1e55b,_0x4d1301='<iframe\x20height=\x27'+height+'\x27\x20allowtransparency=\x27true\x27\x20class=\x27blogger-iframe-colorize\x20blogger-comment-from-post\x27\x20frameborder=\x270\x27\x20id=\x27blogger_comment_form\x27\x20name=\x27comment-editor\x27\x20src=\x27'+_0x3eda02+_0x3fb74c(0x195),_0x300414=_0x3fb74c(0x1a2);$('#side_comment_form')['html'](_0x4d1301);var _0x56303e=$('#comment_form_info');_0x56303e[_0x3fb74c(0x1a1)]?_0x56303e[_0x3fb74c(0x19c)](_0x300414):$('#side_comment_form')[_0x3fb74c(0x196)](_0x3fb74c(0x1a4)+_0x300414+_0x3fb74c(0x192));}));function _0x4e89(_0x1dde33,_0x3c7037){var _0x1cf279=_0x1cf2();return _0x4e89=function(_0x4e891f,_0x4e149a){_0x4e891f=_0x4e891f-0x18b;var _0x2068a8=_0x1cf279[_0x4e891f];return _0x2068a8;},_0x4e89(_0x1dde33,_0x3c7037);}function ckFeedUrl(){var _0x26f2a6=_0x38a69f;isPostUrl=postUrl[_0x26f2a6(0x19a)](_0x26f2a6(0x19e))<0x0,isPostUrl?feedUrl='/feeds/posts/summary?alt=json-in-script&callback=?&path='+postUrl:feedUrl='/feeds/pages/summary?alt=json-in-script&callback=?&path='+postUrl;}function _0x1cf2(){var _0x4a2849=['/p/','8870UgrpDe','2405579LpvHKW','length','<a\x20href=\x27https://www.wfublog.com/2015/04/blogger-comment-form.html\x27\x20target=\x27_blank\x27\x20style=\x27float:\x20right;\x20text-decoration:\x20none;\x20color:\x20#ccc;\x20font-family:\x20arial,\x20sans-serif;\x20font-size:\x2011px;\x20vertical-align:\x20middle;\x20margin-top:\x205px;\x20margin-right:\x2010px;\x27\x20title=\x27Blogger\x20官方留言版\x0aby\x20WFU\x20BLOG\x27>ⓦ\x20Comment\x20Form</a>','entry','<div\x20id=\x27comment_form_info\x27>','pageID=','feed','7991208hmidxp','5274hAatpp','split','104762bLuqDy','getJSON','postID=','</div>','33StWlYx','210hOJQBo','\x27\x20width=\x27100%\x27></iframe>','after','925039acsHNQ','24nVbYCg','772eNnODH','indexOf','11150filMqU','html','86532uQoeiG'];_0x1cf2=function(){return _0x4a2849;};return _0x1cf2();}
10. })(jQuery);
11. </script>
12. <!-- Blogger 官方留言版 end, Designed by WFU BLOG -->

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

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

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

安裝完的效果，可前往展示網頁：

點此看範例網頁

三、使用說明

1. 原理

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

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


2. 運作流程

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


3. 設計構想

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

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


4. 搭配最新回應

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




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

更多留言相關文章：