2012年9月1日 星期六

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

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

Wayne Fu 0 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)
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP