Blogger 最新回應＋留言者各種身份頭像

(Pic from: softicons.com,freepik.com,all-free-download.com)完成「最新文章＋縮圖」之後，聯想到文章的 json 資料既然有儲存縮圖網址，那麼留言的 json 資料應該也會儲存留言者頭像網址吧？有了上一篇的經驗之後，很快地找到頭像圖片網址，再加上一年前就寫過「修改留言者的各種身份頭像顯示＋尺寸變更」，本篇的任務可說是駕輕就熟。

以下第一大點為找出留言者頭像資料的原理，想直接安裝本文的 hack 請跳到「二、修改 Abin 最新回應模組」。

2012.10.24 更新

本篇的版本目前發現一些 bug，例如刪除內容之留言、或內含超連結的留言，都可能會造成這個小工具的執行錯誤。若曾安裝這個小工具的話，請改安裝這個「更新版本」。


一、從 Json 資料找留言者頭像

1. 取得 Json 資料：

根據「ABIN'S TECH NOTE」，以 WFU BLOG 為例，留言資料可以使用以下的網址轉換成 json 格式：

http://wayne-fu.blogspot.com/feeds/comments/summary?alt=json-in-script

以上藍色網址改為自己網址即可看到自己部落格的留言 json 資料。這次就不印出落落長的 json 畫面了，請直接參考「最新文章＋縮圖」 → 「一、從 Json 資料找縮圖」可看到類似的畫面。

2. 留言者頭像網址：

一樣請參考「最新文章＋縮圖」的技巧，可找到留言者頭像網址的資料儲存在──

json 資料 → feed 物件 → entry 陣列 → author 陣列裡的第一個物件(通常也只有一個物件) → gd$image 物件 → src 字串。找到之後就可以使用 javascript 來讀取資料了。

3. 判斷留言者身份：

經過交叉比對後，Blogger 會根據不同的留言者身份放不同的頭像圖案──

  A. Blogger 帳號、有上傳頭像圖案：顯示自訂頭像圖案。

  B. Blogger 帳號、無上傳頭像圖案：

  C. 使用 OpenID：有可能是 ，也可能是空白圖案。

  D. 無帳號：顯示空白圖案。

以上 B、C、D 的圖案我們都可以把圖片網址改成自訂圖案，讓版面比較美觀(因為預設圖案的尺寸實在太小了，放大就變馬賽克了)。


二、修改 Abin 最新回應模組

照例，修改最新回應模組一樣是選擇程式碼簡潔、擴充容易的「Abin 版」來下手。請依照以下步驟──

1. 如果已經安裝過 Abin 版最新回應，請用以下程式碼將原程式碼覆蓋；如果沒有安裝過的話，請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


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


三、程式碼及參數說明

為了方便修改參數，將比較需要修改的參數都集中在一起──

E：紅字 1 代表從最新的第 1 則留言開始顯示，若改成 3 就代表從第 3 則留言開始顯示(除非特殊需求，一般不需要改此項)。

F：紅字 5 代表每頁顯示 5 筆留言數。

G：紅字 35 代表頭像圖案的寬度為 35px，這個數字差不多是 Blogger 的預設寬度，不過如果想看大一點的頭像就盡量改吧。

H：動態載入時的 gif 動畫，藍色網址為可改為自訂圖案。

I：此行設定「Blogger 帳號、無上傳頭像」的留言者頭像圖案，藍色網址可改為自訂圖案。

J：此行設定「使用 OpenID」的留言者頭像圖案，藍色網址可改為自訂圖案。

K：此行設定「無帳號」的留言者頭像圖案，藍色網址可改為自訂圖案。

以上 I、J、K 行如果改為自訂圖案，最好圖片寬度調整為 G 行參數的兩倍，原因請參照「更改 Blogger 熱門文章縮圖的尺寸」→「二、製作圖示技巧」。一般而言如果滿意預設版面配置的話，只需要改以上參數即可；但如果想變動版面配置的話，可更改以下兩行──

BR：這一行設定了頭像圖案的區塊，可自行修改 style 的參數、圖案外框的樣式。

BT：這一行設定了留言區塊，可自行修改整個區塊的配置、顏色等等。


四、小結

最新回應加上留言者頭像圖案後，按下頭像的連結則會因不同的身份而連結到不同網址：

1. Blogger 帳號：連到 Blogger 個人簡介、或 Google+ 個人簡介。
2. OpenID：連到 OpenID 填入的網址。
3. 無帳號：連到該篇文章。

或許本篇的修改不是什麼很重要的功能，不過這個小工具讓版面生動了不少，對吧！


「最新回應」模組(Recent Comments)