2012年9月3日

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

A+

(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:此行設定「無帳號」的留言者頭像圖案,藍色網址可改為自訂圖案。

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

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

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


四、小結

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

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

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


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

7 則留言:

  1. 有要先修改甚麼東西嗎?
    比如說要先1. 取得 Json 資料:
    不能直接用程式碼就會跑出來吼?

    回覆刪除
  2. <6104290151147273828>(以上內容請勿刪除,從括號之後開始留言)
    「一、從 Json 資料找留言者頭像」只是在說明原理,安裝的話請從「二、修改 Abin 最新回應模組」的步驟開始看就行了。

    不過本篇是舊版的最新回應喔,請看開頭紅色公告區塊「2012.10.24 更新」的內容,安裝新版本比較不會有 bug。

    回覆刪除
  3. 請問一下 Blogger留言者打上留言什底下是沒有框的
    但是我回復留言時卻有一個黑框~
    請問新版的 該如何設定我回復時不要有框呢?

    回覆刪除
  4. <6936960834232789780>(以上內容請勿刪除,從括號之後開始留言)
    請提供你的網址好嗎,才能知道怎麼調整。

    回覆刪除
  5. <160839453491957185>(以上內容請勿刪除,從括號之後開始留言)

    http://kayer1998.blogspot.tw/2012/12/lemonade.html#comment-form
    麻煩大大了

    回覆刪除
  6. <7273809011922253310>(以上內容請勿刪除,從括號之後開始留言)
    我以為你的意思是裝了我的最新回應小工具後,會發生你描述的狀況,看了你的網頁終於懂了,是官方留言區塊的問題。

    這樣吧,我推薦你到「Blogger中文社群」去詢問,那裡很多高手應該可以回答你的狀況。

    回覆刪除
  7. <8682900378458790626>(以上內容請勿刪除,從括號之後開始留言)

    恩恩 謝喔~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。