布丁式Blogger訪客留言板
訪客留言板的必要性
訪客留言板只是一個單純簡單的留言功能。儘管Blog中已經提供很多地方給讀者提出他們的看法，讀者可以對每一篇文章發表意見，但是我也發現到很多讀者並不是想針對某個主題來發表留言，而只是單純地想「對Blog的管理者講話」而已。因此我認為訪客留言板仍是有其必要性，所以在我的Blog右邊一直有著一塊訪客留言板的功能。
在以往我一直使用Cbox作為訪客留言板，但是Cbox本身是第三方服務，而留言的資料也無法保留、管理，讀取速度也頗慢。在六月我為「布丁布丁吃？」改版時，就已經提出了這個弱點，而打算改用Blogger內建的留言功能來製作訪客留言板。
日前我已經小試身手地在右邊導覽列加入了「布丁布丁來聊天」的留言板，很遺憾地到目前為止並沒有人願意來留言。不過這也是預料內的狀況就是，畢竟使用訪客留言板的人的確不多。有需要跟我講講話的話，就請使用訪客留言板吧。
布丁式Blogger訪客留言板安裝教學
今天我將這功能改進成為可以讓人安裝的功能。如果您也想要利用Blogger文章意見作為訪客留言板，而不想要再另外申請其他服務，那麼布丁式Blogger訪客留言板應該可以達成您的需求。
接下來，就請一步一步地照著設定吧：
1. 發表一篇「訪客留言板」專用文章
請建立一篇專門為了作為訪客留言板專用的文章。附帶一提，「布丁布丁吃？」的第一篇文章就是訪客留言板，有人有注意到嗎？
2. 取得blogID跟postID
接著請再利用Blogger的「修改文章」功能，找出該篇文章，並記下這時候的網址。上圖中網址被遮住了，此例中的完整網址如下：
http://www.blogger.com/post-edit.g?blogID=8505579180942752344&postID=5270991376408850312
您可以由此得知blogID為「8505579180942752344」、postID為「5270991376408850312」。這兩個編號在稍候設置時會使用，請牢記。
3. 新增小工具「訪客留言板」
請到Blogger「設計」中「網頁元素」的頁面去新增小工具「HTML/JavaScript」。
標題您可以設定為「訪客留言板」或其他名稱，內容請在「修改Html」的模式中輸入以下內容：
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load('jquery','1.2.6');</script>
<script type="text/javascript" src="https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.js"></script>
<script type type="text/javascript">
// 布丁式Blogger留言板
// @param {Object} config 設定
$.puliGuestBook({
blogID: "8505579180942752344", //blog的ID
postID: "5270991376408850312", //post的ID
url: "http://pulipuli.blogspot.com/feeds/6921201361608060798/comments/default", //訂閱張貼意見的網址，或是文章ID:115667103250300740
css: "https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.css", //CSS樣式表
container: "#puliGuestBook", //顯示留言的元素
listNumber: 20, //顯示留言數量。超過此數量時，會顯示「閱讀全部留言」的連結。
adminName: '布丁布丁吃布丁', //Blog主人的名字
adminPhoto: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6vw1VIdeIzh1wkVnCWL3HYGj09ht_WvkgNBkcHjr_jC2pX8BKCEOEAGMymBMOFhKOPeVSn85EXbt08qdW7ZTWjWHCGKUpJfh_oi2qlHrtMh1xk12qlWNKQyXPwPZhqRZXGN88g/s45/', //部落格主人的照片
anonymous: '匿名', //匿名者的名字
readMore: '閱讀全部留言', //閱讀全部留言連結的名稱
write: '撰寫留言', //撰寫留言連結的名稱
reload: '重新讀取' //重新讀取連結的名稱
});
</script>
其中有幾項設定是建議您修改的：
- blogID：就是上一小節提到的blogID，請確實輸入。
- postID：就是上一小節提到的postID，請確實輸入。
- adminName：請填入您留言時會顯示的稱呼。可以將此行刪除不寫。
- adminPhoto：請填入您照片的網址連結，最好是正方形的圖片。這是因為本功能無法偵測使用者的頭像，只好自行輸入。
其他的設定請參考程式碼中的說明。除了blogID跟postID是必須填寫之外，其他的資料都是選填。舉例說，如果你要
4. 儲存並完成
請依序儲存整個設定，再回頭開啟您的首頁，應該就可以看到訪客留言板正常運作了。
結語
基於將所學所得分享出來的自我要求而整理了這一篇，事實上也花上不少時間來改良訪客留言板。此處使用的訪客留言板功能跟「布丁布丁吃？」使用的訪客留言板是分開發展的兩個程式，這是由於「布丁布丁吃？」很常被我亂改導致系統不穩定，請大家使用此文章教學的穩定版本即可。
好，終於把這功能寫完了，心中的石頭又放下了一塊。接著下一篇繼續努力。
- 2011/4/1：補充，您的Blogger讀取權限必須設定為「任何人」才能使用此功能
- 2013/5/27：加入了更新CSS的說明
請問, 如果是限定讀者的部落格, 應該怎麼設定才會顯示留言板呢, 謝謝
回覆刪除之前好像也有人問過類似的問題。
回覆刪除我改天來研究看看好了。
再麻煩您了，感謝！
回覆刪除成功了，感謝分享阿～～～！
回覆刪除恭喜你
回覆刪除樓上的人的問題我都還沒解決呢 TwT
哈哈哈，反正他也沒有急著向你要～（不負責任發言ＱＱ）
回覆刪除噗噗
回覆刪除因為手邊還在忙論文，等我有空時再來處理吧XD
感謝分享，拿來用了^Q^
回覆刪除不客氣不客氣～
回覆刪除布丁救命，留言板的寬度該怎麼調整,還有布丁大頭我去不掉>.<外加我的文字要反白才看得到...
回覆刪除ok 修正了
回覆刪除----
如果你要自行調整CSS樣式，請先下載預設的樣式表：
https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.css
修改後上傳到自己的空間，例如網址是http://your.host/puliGuestBook.css
那在設定時請加入css: http://your.host/puliGuestBook.css
例如：
$.puliGuestBook({
blogID: "5363088155134339705", //Blog的ID,必須填寫
postID: "1829339004067264102", //文章的ID,必須填寫
listNumber: 10, //顯示留言數量,超過此數量時,會顯示"閱讀全部留言"的連結.
adminName: '紅指甲',//Blog主人的名字
anonymous: '匿名', //匿名者的名字
readMore: '閱讀全部留言', //閱讀全部留言連結的名稱
write: '留言', //撰寫留言連結的名稱
reload: '讀取', //重新讀取連結的名稱
css: http://your.host/puliGuestBook.css
});
這樣就行了
我只是吃個水果,回坐位他突然正常,我以為卡到陰了...阿里嘎豆~^^~
回覆刪除哈哈，我也剛好看到你的留言。
回覆刪除還好問題不是很難解決，所以就馬上處理了。
有什麼意見歡迎多多提出來喔～
To 豪宅我來了：
回覆刪除> 請問, 如果是限定讀者的部落格, 應該怎麼設定才會顯示留言板呢, 謝謝
看來是沒辦法
在限定權限的情況下無法使用Feed，就算有登入也不能使用
因此訪客留言板功能在未開放讀取權限下是不能使用的
布丁大你好@@
回覆刪除看了你的留言版教學之後
成功的把留言版用出來了
可是發現timestamp時間格式的地方…出現了之前使用jdate這支java外掛的背景圖qq…不知布丁大有沒有什麼解決的辦法，可以讓日期只正常顯示數字(在不拿掉jdate這支java的情況下)
因為小弟的java實在爛到不行~囧
小弟感激不盡qq
我的blog (詳見Guest book欄)
http://supermadjack.blogspot.com/
==============分格線==============
我的文章日期日曆外掛的js如下
(留言版不支援script語法不能完整po出java語法請見諒)
首先導入javascript src
http://carcardon.com/java/jdate.js
在sytle定義此日曆css
.date{width:48px; height:48px; float:left; position:relative; padding:1px 2px 0px 0px; margin:10px 0px 0px; text-align:center; line-height:14px;background:transparent url('http://carcardon.com/sfc/bbk.gif') no-repeat; color:#222; font-size:12px; font-weight:bold}
.month{font-size:10px; padding:6px 4px 1px; color:#222; font-weight:bold}
然後在文章title前面執行js
j_date('');
秦大叔你好：
回覆刪除1. JavaScript不是Java，兩個是不同的程式語言。
2. 其實這是CSS的問題
3. 你的日曆外掛中CSS定義了.date的樣式，但是因為太多地方都會用到date作為class name，所以我的訪客留言板樣式就被你影響了。建議你在寫CSS的時候，把選擇器的指定範圍縮小，不要直接指定classname，這樣比較不會影響到其他套件的樣式。
4. 已修正 http://img1.UploadScreenshot.com/images/main/6/15901233276.jpg
5. 改一下頭像網址吧，應該不需要用我的頭像
布丁大…謝謝啦^_^
回覆刪除已經正常顯示了
因為沒有學過任何程式語言
所以自己亂摸css的時候
也沒有注意到XD
(其實是不太懂…哈哈)
秦大叔晚安：
回覆刪除不客氣不客氣
CSS技術很實用啊，現在寫網頁都要懂CSS
多學學吧～
CSS的選擇器教學：
http://css.1keydata.com/tw/class-id.php
請問一下，設定權限是否也無法顯示recent comment?
回覆刪除Dinosaur
是的，有鎖權限就不能用API來取得recent comment
回覆刪除這樣好困擾阿，每次要看留言都要點該篇文章，敢問有解決之道嗎？謝謝。
回覆刪除Dinosaur
其實「新增小工具」中的「Recent Comments」是比較容易使用的
回覆刪除http://img1.UploadScreenshot.com/images/main/6/16012435884.jpg
雖然我沒試過鎖定權限它能不能運作
如果你是這樣做而不能運作的話，請告訴我吧
Recent Comments我用過，工具出得來但看不到留言，不知是哪裏出問題了。
回覆刪除Dinosaur
連內建小工具都不行，那我也沒輒啦
回覆刪除可以試著去寫寫建議看看如何？
收到，謝謝。
回覆刪除Dinosaur
有了這東西真方便，謝謝布丁寫教學文。
回覆刪除布國想請問一下喔～
我的版面聊天留言版使用了布丁的留言板成功了沒錯，但是本來上半頁有使用滑動式圖文字，裝了那個留言板以後，上面的圖文就不會動了，請問我該怎麼做呢？
To 大碴兒：
回覆刪除這……不太好測試耶，可能是程式碼相衝了吧。
最大的可能是因為他重複載入了jQuery的緣故。
把我的程式碼中第二行移除掉再安裝看看，例如：
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type="text/javascript" src="https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.js"></script>
<script type type="text/javascript">
$.puliGuestBook({
blogID: "8505579180942752344", //Blog的ID，必須填寫
postID: "5270991376408850312", //文章的ID，必須填寫
listNumber: 20, //顯示留言數量。超過此數量時，會顯示「閱讀全部留言」的連結。
adminName: '布丁布丁吃布丁', //Blog主人的名字
adminPhoto: 'http://1.bp.blogspot.com/_yr4MQB4zDus/SZ4Mb30N0aI/AAAAAAAAFUg/3OGhwhzBUOg/S45/', //部落格主人的照片
anonymous: '匿名', //匿名者的名字
readMore: '閱讀全部留言', //閱讀全部留言連結的名稱
write: '撰寫留言', //撰寫留言連結的名稱
reload: '重新讀取' //重新讀取連結的名稱
});
</script>
請問可以讓較晚留言的內容顯示在最前面嗎? 謝謝指教
回覆刪除To 湶導:
回覆刪除本來就是最晚(最新)留言的內容會顯示在最上面了。
這是不是就是你要的呢？
大大，今天突然我的布丁式留言板掛掉了
回覆刪除大大的 jQuery 資料庫是不是換位置了
可否救一下，讓我的留言板復活
thanks!
To Ohshit:
回覆刪除留言板修復囉，感謝妳的建議。
這是因為Blogspot強制把.com換成.tw的關係，所以才出錯的。
請問修複後要怎麼改
回覆刪除我一直都是顯示
Loading...
謝謝^^
回覆刪除已經可以使用了~
感恩阿~~~
有人能指導一下要怎麼樣讓留言板復活嗎
回覆刪除我的一直都顯示讀取中..
To 一根蔥，
回覆刪除你自己把留言顯示功能關掉囉。
請從設定 > 其他 > 允許網誌資訊提供，切換到「完整」即可。
請參考此圖
大大~
回覆刪除請問一下留言板留言順序可否改成
最近的留言在最上面?
跟現在的順序顛倒?
thanks~
To Ohshit:
回覆刪除布丁式留言板的留言本來就是最近的留言在上面囉
如果你是說Blogger內建的留言功能，那就不是這篇功能討論的範圍了。
布丁大大，我想問一下為什麼我設好 css 之後留言板就不見了？
回覆刪除我把它放在http://ghostfire.web.fc2.com/puliGuestBook.css
To ghostfire Wu:
回覆刪除請問你的Blogger網址是？
http://ghostfirerh.blogspot.tw/
回覆刪除目前還是先放沒有修改的版本，麻煩您了，感謝~~
作者已經移除這則留言。
回覆刪除謝謝
回覆刪除但是有沒有像
https://lh4.googleusercontent.com/--fOqEnAWnXo/UEsDwaD5yaI/AAAAAAAACnQ/LaD7KAi1388/s642/000.JPG的留言板啊??
To 時鐘：
回覆刪除我不太懂你的問題。
本篇在講的留言板是指如下圖的功能：
http://lh4.ggpht.com/_yr4MQB4zDus/TJX_CIPifmI/AAAAAAAAHA8/XziWoINWMuM/s1600-h/image%5B2%5D.png
並不是你圖片中的功能喔？
請問可以更改留言板的字體顏色嗎?
回覆刪除谢谢分享>///<
回覆刪除不客氣 >///<
回覆刪除你好，我想請問一下怎麼調整高度寬度呢???
回覆刪除To 44樓匿名跟吾麟：
回覆刪除唔，這些要修改CSS才能做到。
我這個CSS好像跟JavaScript埋在一起了。
說得也是，這樣子使用者無法自行修改呢
之後有時間再來開發新版本吧。
謝謝,很方便~!!<3
回覆刪除不客氣
回覆刪除布丁大
回覆刪除請問有辦法放兩組嗎？
一組是給我自己留言，留完就鎖回應。
一組是開放留言。
我放兩組有一組會出不來
To 期行者：
回覆刪除目前這個版本是做不到的。
因為我是採用ID的寫法，所以ID會有重複，重複的第二組就出不來。
你可以試著用jQuery改造，或是用clousre寫法以免他們互相干擾。
謝謝您的解答，看來我還是暫時不要這麼貪心好了。
回覆刪除您好，我的也是一直顯示Loading...
回覆刪除允許網誌資訊提供有切換到「完整」。
To du,
回覆刪除應該是程式碼衝突了，你可能在其他地方載入了相同的jQuery
您好，已經發現問題，可以使用了。
回覆刪除謝謝您^^！
To du,
回覆刪除恭喜你，是怎麼做到的呢？
要不要跟大家分享一下解決方法？
To 44樓匿名跟吾麟：
回覆刪除赫然發現原來我已經把CSS載入功能作進去了。
在設定參數的時候，你可以指定載入CSS檔案的網址。
作法是修改參數css。
目前的載入程式碼範例為：
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load('jquery','1.2.6');</script>
<script type="text/javascript" src="https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.js"></script>
<script type type="text/javascript">
// 布丁式Blogger留言板
// @param {Object} config 設定
$.puliGuestBook({
blogID: "8505579180942752344", //blog的ID
postID: "5270991376408850312", //post的ID
url: "http://pulipuli.blogspot.com/feeds/6921201361608060798/comments/default", //訂閱張貼意見的網址，或是文章ID:115667103250300740
css: "https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.css", //CSS樣式表
container: "#puliGuestBook", //顯示留言的元素
listNumber: 20, //顯示留言數量。超過此數量時，會顯示「閱讀全部留言」的連結。
adminName: '布丁布丁吃布丁', //Blog主人的名字
adminPhoto: 'http://1.bp.blogspot.com/_yr4MQB4zDus/SZ4Mb30N0aI/AAAAAAAAFUg/3OGhwhzBUOg/S45/', //部落格主人的照片
anonymous: '匿名', //匿名者的名字
readMore: '閱讀全部留言', //閱讀全部留言連結的名稱
write: '撰寫留言', //撰寫留言連結的名稱
reload: '重新讀取' //重新讀取連結的名稱
});
</script>
其中你可以注意到，預設CSS是載入我的puliGuestBook.css，網址為：https://sites.google.com/site/puddingchen35/Home/puliguestbook/puliGuestBook.css
你可以複製一份CSS檔案，修改你要的樣式，上傳到你的空間，然後插入程式碼時修改CSS參數為你的網址
高度請修改
.puli-guest-book .guest-book-list 中的 max-height: 300px;
寬度請修改
.puli-guest-book .guest-book-list 中加入 max-width: 200px;
顏色請修改
許多區塊中的 color
唔，不過得先請你先去搞懂CSS語法喔
這邊不是CSS語法教學呢
http://rainbowhotel2556.blogspot.com/ BLOGGER 求访问量啊，老师布置的作业啊~~~
回覆刪除To 欣和蘇，
回覆刪除唔，你這樣子的問題很突然喔。
可以先請問你是誰、為什麼要做這個作業、你要的是什麼資料呢？
另外，右邊導覽列有近7日內的點閱量喔。
to 1
回覆刪除To 2
刪除作者已經移除這則留言。
回覆刪除如果有問題的話，可能要請你留個blogger網址來看看，比較好確認原因喔
刪除我一樣是一直出現「Loading... 」
刪除blogger要設成公開才能使用喔，私密的blogger不能用的
刪除作者已經移除這則留言。
刪除我的網誌讀者設定一直是公開的唷
刪除那就先請你寫一下Blogger網址，好讓我看看是怎麼回事吧
刪除http://julia9judy.blogspot.tw/
刪除在右下角欄位，再麻煩你了，謝謝唷
http://julia9judy.blogspot.tw/feeds/1007863564621857954/comments/full?alt=json-in-script&callback=handleGuestbookPulipuli&_=1482993916133
刪除妳沒有開放留言喔
請從設定 > 其他 > 允許網誌資訊提供，切換到「完整」即可。
可以了~可以了~超級Thank u~
刪除這功能好好玩 謝謝你了
不客氣
刪除