Blogger 最新回應＋留言者頭像＋文章標題

(Pic from: softicons.com,freepik.com,all-free-download.com)2015.10.10 公告：此工具目前已更新到 V2 版，請前往新版安裝頁面：「Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS」。

這個版本的「最新回應」小工具，其基本架構仍是延用「上個版本」的程式庫，主要差別為每則留言多了文章標題。優點是一眼就能清楚瞭解哪篇文章有了新留言，不過每則留言的區塊面積也增加了，如果喜歡介面簡潔一點的話還是可以選擇「無文章標題的版本」。以下照例先說明撈後台資料的原理，想直接安裝可跳「三、安裝程式碼」。

一、從 Json 抓留言文章標題

「最新回應」小工具的 feed 基本知識可參考「Blogger 最新回應＋留言者各種身份頭像」。由於留言的 feed 資料不含文章標題，最早的 hack 必須從文章 feed 撈資料來比對標題，但當部落格文章數目達到數百篇或是更多時，這樣的 hack 執行速度就會是大悲劇了。

還好「Blogger API 官網」 說明了留言 feed 要如何與文章做連結，先找到 thr:in-reply-to 元素後，裡面可找到文章連結資料。

舉例說明，本站留言 feed 轉 Json 格式的網址為 http://wayne-fu.blogspot.com/feeds/comments/summary?alt=json-in-script，我們若搜尋「thr$in-reply-to」字串可找到該則留言的文章連結相關資料，裡面最重要的是 "source" 資料指向的 "單一文章 feed 網址"，從單一文章 feed 撈資料的速度很快，就可避免從 "網站文章 feed" 撈資料的冗長時間了。

舉其中的一個 "source" 資料當例子，把單一文章 feed 網址後面加上參數 "?alt=json-in-script" 成為這樣的字串 "http://www.blogger.com/feeds/1035379297949976554/posts/default/8856339391020730581?alt=json-in-script" 可轉成 json 格式，在瀏覽器畫面上可找到兩個重要資料：

1. 文章標題：位置在 json 資料 → entry 物件 → title 物件 → $t 字串，可看到標題字串為 "Blogger「留言欄訊息」自訂版面及樣式的方法__兼談留言字詞驗證"。

2. 文章網址：位置在 json 資料 → entry 物件 → link 陣列 → 網址資料在 "ref" 為 "alternate" 的那個物件裡，字串值為 "http://wayne-fu.blogspot.com/2012/10/comment-reminder.html"

有了以上資料就能印出標題，再將以上資料存入自設的陣列裡，若有其他則留言來自同一篇文章，就不必再重複查詢文章 feed，可減少重新送出請求(request)的次數與時間。


二、加強功能、特點

1. 既然改了版，還是多少增加了一些功能、調整了一下版面，例如：

  A：把原本展開收合的圖案 "︾"、"︽" 隱藏起來，滑鼠經過該則留言區時才顯示，讓版面簡潔、美觀許多。

  B：留言者暱稱字體加大、文章標題字體縮小。

  C：把所有區塊的 CSS 都開放出來讓使用者自訂版面。

2. 這個版本的特點為：過去的版本，若某篇文章有留言，而後來該篇文章被刪除，但該文章的留言仍會存在，照樣會出現在最新回應的小工具裏。現在這個版本既然能顯示文章標題，也順便寫了偵測文章是否被刪除的功能。若某則留言的文章被刪除，則會顯示「文章已刪除」字樣，這樣可以提醒站長到後台去把該則留言給刪了。



三、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 這已經是第三個「最新回應」的版本，如果安裝過舊版本的話，先刪除原本的小工具，再按以下步驟重新新增一個「HTML/JavaScript」小工具即可；如果沒有安裝過的話，請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


2015.10.10 公告：原程式碼刪除，此工具目前已更新到 V2 版，請前往新版安裝頁面：「Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS」。


存檔後即可，想先看效果可參考右邊的側邊欄。

2. 以上紅字、藍字為重要的修改參數，請參考「四、修改參數」。

3. AR 行以後的 javascript 區，為了節省空間所以把程式碼壓縮了。


2013.7.9 公告

如果最新回應小工具無法顯示，可能的原因有：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 請檢查是否為「完整」；如果不是完整而是「自訂」的話，請檢查「網誌留言資訊提供」是否設定為「完整」，這裡的設定必須是「完整」，最新回應才能顯示。


四、修改參數

請參照上面的程式碼行號來修改以下參數──

H～J：這是小工具下方換頁區塊的 CSS，可自行修改字體大小或其他 style 參數。

K～O：這是日期區塊的 CSS，可自行修改顏色、字體大小、或其他 style 參數。

P～R：這是留言者暱稱區塊的 CSS，可自行修改字體大小、或其他 style 參數。

S～V：這是留言內容區塊的 CSS，可自行修改上下邊界值、或其他 style 參數。

W～AA：這是文章標題區塊的 CSS，可自行修改字體大小、行高、或其他 style 參數。

AE：從第幾則留言開始顯示，通常設為 1。

AF：一頁顯示幾則留言

AG：留言摘要的字元數

AH：頭像圖案的寬度像素 px 值

AI：藍字可改為自訂的 Blogger Logo 圖案網址。

AJ：藍字可改為自訂的 OpenID 圖案網址。

AK：藍字可改為自訂的匿名圖案網址。

AL～AM：請自行對照一下小工具就知道怎麼改了

AN：展開留言的字元圖案

AO：收合留言的字元圖案


更多實用工具：

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