2012年11月1日 星期四

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

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

Wayne Fu 0 A+

(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:收合留言的字元圖案


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP