:::

布丁式Blogger訪客留言板

image

訪客留言板的必要性

訪客留言板只是一個單純簡單的留言功能。儘管Blog中已經提供很多地方給讀者提出他們的看法,讀者可以對每一篇文章發表意見,但是我也發現到很多讀者並不是想針對某個主題來發表留言,而只是單純地想「對Blog的管理者講話」而已。因此我認為訪客留言板仍是有其必要性,所以在我的Blog右邊一直有著一塊訪客留言板的功能。

在以往我一直使用Cbox作為訪客留言板,但是Cbox本身是第三方服務,而留言的資料也無法保留、管理,讀取速度也頗慢。在六月我為「布丁布丁吃?」改版時,就已經提出了這個弱點,而打算改用Blogger內建的留言功能來製作訪客留言板。

image

日前我已經小試身手地在右邊導覽列加入了「布丁布丁來聊天」的留言板,很遺憾地到目前為止並沒有人願意來留言。不過這也是預料內的狀況就是,畢竟使用訪客留言板的人的確不多。有需要跟我講講話的話,就請使用訪客留言板吧。

布丁式Blogger訪客留言板安裝教學

今天我將這功能改進成為可以讓人安裝的功能。如果您也想要利用Blogger文章意見作為訪客留言板,而不想要再另外申請其他服務,那麼布丁式Blogger訪客留言板應該可以達成您的需求。

接下來,就請一步一步地照著設定吧:

1. 發表一篇「訪客留言板」專用文章

image

請建立一篇專門為了作為訪客留言板專用的文章。附帶一提,「布丁布丁吃?」的第一篇文章就是訪客留言板,有人有注意到嗎?

2. 取得blogID跟postID

image

接著請再利用Blogger的「修改文章」功能,找出該篇文章,並記下這時候的網址。上圖中網址被遮住了,此例中的完整網址如下:

http://www.blogger.com/post-edit.g?blogID=8505579180942752344&postID=5270991376408850312

您可以由此得知blogID為「8505579180942752344」、postID為「5270991376408850312」。這兩個編號在稍候設置時會使用,請牢記。

3. 新增小工具「訪客留言板」

image

請到Blogger「設計」中「網頁元素」的頁面去新增小工具「HTML/JavaScript」。

image

標題您可以設定為「訪客留言板」或其他名稱,內容請在「修改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. 儲存並完成

image

請依序儲存整個設定,再回頭開啟您的首頁,應該就可以看到訪客留言板正常運作了。


結語

基於將所學所得分享出來的自我要求而整理了這一篇,事實上也花上不少時間來改良訪客留言板。此處使用的訪客留言板功能跟「布丁布丁吃?」使用的訪客留言板是分開發展的兩個程式,這是由於「布丁布丁吃?」很常被我亂改導致系統不穩定,請大家使用此文章教學的穩定版本即可。

好,終於把這功能寫完了,心中的石頭又放下了一塊。接著下一篇繼續努力。


  • 2011/4/1:補充,您的Blogger讀取權限必須設定為「任何人」才能使用此功能
  • 2013/5/27:加入了更新CSS的說明

總共73 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 請問, 如果是限定讀者的部落格, 應該怎麼設定才會顯示留言板呢, 謝謝

    回覆刪除
  2. 之前好像也有人問過類似的問題。
    我改天來研究看看好了。

    回覆刪除
  3. 成功了,感謝分享阿~~~!

    回覆刪除
  4. 恭喜你

    樓上的人的問題我都還沒解決呢 TwT

    回覆刪除
  5. 哈哈哈,反正他也沒有急著向你要~(不負責任發言QQ)

    回覆刪除
  6. 噗噗

    因為手邊還在忙論文,等我有空時再來處理吧XD

    回覆刪除
  7. 布丁救命,留言板的寬度該怎麼調整,還有布丁大頭我去不掉>.<外加我的文字要反白才看得到...

    回覆刪除
  8. 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
    });

    這樣就行了

    回覆刪除
  9. 我只是吃個水果,回坐位他突然正常,我以為卡到陰了...阿里嘎豆~^^~

    回覆刪除
  10. 哈哈,我也剛好看到你的留言。
    還好問題不是很難解決,所以就馬上處理了。
    有什麼意見歡迎多多提出來喔~

    回覆刪除
  11. To 豪宅我來了:

    > 請問, 如果是限定讀者的部落格, 應該怎麼設定才會顯示留言板呢, 謝謝

    看來是沒辦法

    在限定權限的情況下無法使用Feed,就算有登入也不能使用
    因此訪客留言板功能在未開放讀取權限下是不能使用的

    回覆刪除
  12. 布丁大你好@@
    看了你的留言版教學之後
    成功的把留言版用出來了
    可是發現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('');

    回覆刪除
  13. 秦大叔你好:

    1. JavaScript不是Java,兩個是不同的程式語言。
    2. 其實這是CSS的問題
    3. 你的日曆外掛中CSS定義了.date的樣式,但是因為太多地方都會用到date作為class name,所以我的訪客留言板樣式就被你影響了。建議你在寫CSS的時候,把選擇器的指定範圍縮小,不要直接指定classname,這樣比較不會影響到其他套件的樣式。
    4. 已修正 http://img1.UploadScreenshot.com/images/main/6/15901233276.jpg
    5. 改一下頭像網址吧,應該不需要用我的頭像

    回覆刪除
  14. 布丁大…謝謝啦^_^
    已經正常顯示了
    因為沒有學過任何程式語言
    所以自己亂摸css的時候
    也沒有注意到XD
    (其實是不太懂…哈哈)

    回覆刪除
  15. 秦大叔晚安:

    不客氣不客氣
    CSS技術很實用啊,現在寫網頁都要懂CSS
    多學學吧~

    CSS的選擇器教學:
    http://css.1keydata.com/tw/class-id.php

    回覆刪除
  16. 請問一下,設定權限是否也無法顯示recent comment?

    Dinosaur

    回覆刪除
  17. 是的,有鎖權限就不能用API來取得recent comment

    回覆刪除
  18. 這樣好困擾阿,每次要看留言都要點該篇文章,敢問有解決之道嗎?謝謝。

    Dinosaur

    回覆刪除
  19. 其實「新增小工具」中的「Recent Comments」是比較容易使用的
    http://img1.UploadScreenshot.com/images/main/6/16012435884.jpg
    雖然我沒試過鎖定權限它能不能運作
    如果你是這樣做而不能運作的話,請告訴我吧

    回覆刪除
  20. Recent Comments我用過,工具出得來但看不到留言,不知是哪裏出問題了。

    Dinosaur

    回覆刪除
  21. 連內建小工具都不行,那我也沒輒啦
    可以試著去寫寫建議看看如何?

    回覆刪除
  22. 收到,謝謝。

    Dinosaur

    回覆刪除
  23. 有了這東西真方便,謝謝布丁寫教學文。

    布國想請問一下喔~

    我的版面聊天留言版使用了布丁的留言板成功了沒錯,但是本來上半頁有使用滑動式圖文字,裝了那個留言板以後,上面的圖文就不會動了,請問我該怎麼做呢?

    回覆刪除
  24. 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>

    回覆刪除
  25. 請問可以讓較晚留言的內容顯示在最前面嗎? 謝謝指教

    回覆刪除
  26. To 湶導:

    本來就是最晚(最新)留言的內容會顯示在最上面了。
    這是不是就是你要的呢?

    回覆刪除
  27. 大大,今天突然我的布丁式留言板掛掉了
    大大的 jQuery 資料庫是不是換位置了
    可否救一下,讓我的留言板復活
    thanks!

    回覆刪除
  28. To Ohshit:

    留言板修復囉,感謝妳的建議。
    這是因為Blogspot強制把.com換成.tw的關係,所以才出錯的。

    回覆刪除
  29. 請問修複後要怎麼改
    我一直都是顯示
    Loading...

    回覆刪除
  30. 謝謝^^
    已經可以使用了~
    感恩阿~~~

    回覆刪除
  31. 有人能指導一下要怎麼樣讓留言板復活嗎
    我的一直都顯示讀取中..

    回覆刪除
  32. To 一根蔥,

    你自己把留言顯示功能關掉囉。
    請從設定 > 其他 > 允許網誌資訊提供,切換到「完整」即可。

    請參考此圖

    回覆刪除
  33. 大大~
    請問一下留言板留言順序可否改成
    最近的留言在最上面?
    跟現在的順序顛倒?
    thanks~

    回覆刪除
  34. To Ohshit:

    布丁式留言板的留言本來就是最近的留言在上面囉
    如果你是說Blogger內建的留言功能,那就不是這篇功能討論的範圍了。

    回覆刪除
  35. 布丁大大,我想問一下為什麼我設好 css 之後留言板就不見了?
    我把它放在http://ghostfire.web.fc2.com/puliGuestBook.css

    回覆刪除
  36. To ghostfire Wu:

    請問你的Blogger網址是?

    回覆刪除
  37. http://ghostfirerh.blogspot.tw/

    目前還是先放沒有修改的版本,麻煩您了,感謝~~

    回覆刪除
  38. 作者已經移除這則留言。

    回覆刪除
  39. To 時鐘:

    我不太懂你的問題。
    本篇在講的留言板是指如下圖的功能:
    http://lh4.ggpht.com/_yr4MQB4zDus/TJX_CIPifmI/AAAAAAAAHA8/XziWoINWMuM/s1600-h/image%5B2%5D.png

    並不是你圖片中的功能喔?

    回覆刪除
  40. 請問可以更改留言板的字體顏色嗎?

    回覆刪除
  41. 你好,我想請問一下怎麼調整高度寬度呢???

    回覆刪除
  42. To 44樓匿名跟吾麟:

    唔,這些要修改CSS才能做到。
    我這個CSS好像跟JavaScript埋在一起了。
    說得也是,這樣子使用者無法自行修改呢

    之後有時間再來開發新版本吧。

    回覆刪除
  43. 謝謝,很方便~!!<3

    回覆刪除
  44. 布丁大
    請問有辦法放兩組嗎?
    一組是給我自己留言,留完就鎖回應。
    一組是開放留言。

    我放兩組有一組會出不來

    回覆刪除
  45. To 期行者:

    目前這個版本是做不到的。

    因為我是採用ID的寫法,所以ID會有重複,重複的第二組就出不來。
    你可以試著用jQuery改造,或是用clousre寫法以免他們互相干擾。

    回覆刪除
  46. 謝謝您的解答,看來我還是暫時不要這麼貪心好了。

    回覆刪除
  47. 您好,我的也是一直顯示Loading...
    允許網誌資訊提供有切換到「完整」。

    回覆刪除
  48. To du,

    應該是程式碼衝突了,你可能在其他地方載入了相同的jQuery

    回覆刪除
  49. 您好,已經發現問題,可以使用了。
    謝謝您^^!

    回覆刪除
  50. To du,

    恭喜你,是怎麼做到的呢?
    要不要跟大家分享一下解決方法?

    回覆刪除
  51. 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語法教學呢

    回覆刪除
  52. http://rainbowhotel2556.blogspot.com/ BLOGGER 求访问量啊,老师布置的作业啊~~~

    回覆刪除
  53. To 欣和蘇,

    唔,你這樣子的問題很突然喔。
    可以先請問你是誰、為什麼要做這個作業、你要的是什麼資料呢?

    另外,右邊導覽列有近7日內的點閱量喔。

    回覆刪除
  54. 作者已經移除這則留言。

    回覆刪除
    回覆
    1. 如果有問題的話,可能要請你留個blogger網址來看看,比較好確認原因喔

      刪除
    2. 我一樣是一直出現「Loading... 」

      刪除
    3. blogger要設成公開才能使用喔,私密的blogger不能用的

      刪除
    4. 作者已經移除這則留言。

      刪除
    5. 我的網誌讀者設定一直是公開的唷

      刪除
    6. 那就先請你寫一下Blogger網址,好讓我看看是怎麼回事吧

      刪除
    7. http://julia9judy.blogspot.tw/
      在右下角欄位,再麻煩你了,謝謝唷

      刪除
    8. http://julia9judy.blogspot.tw/feeds/1007863564621857954/comments/full?alt=json-in-script&callback=handleGuestbookPulipuli&_=1482993916133
      妳沒有開放留言喔
      請從設定 > 其他 > 允許網誌資訊提供,切換到「完整」即可。


      刪除
    9. 可以了~可以了~超級Thank u~
      這功能好好玩 謝謝你了

      刪除