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」→ 填入標題、以及以下程式碼：

1. <div id="RecentCommentsArea"></div>
2.  
3. <script type='text/javascript'>
4. var rComment_Setting = {
5.   startIndex : 1,
6.   showComment : 5,
7.   headWidth : 35,
8.   gif : "https://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif",
9.   blogger : "http://4.bp.blogspot.com/-81dIbOmU9O4/UB_ufwAvb0I/AAAAAAAADj8/1Y4HFMVzx4Q/s70/blogger.png",
10.   openID : "http://1.bp.blogspot.com/-sI74_lyKtUE/UB__t_YIVMI/AAAAAAAADms/X_25WXcYZhk/s70/openid.png",
11.   anonymous : "http://lh6.ggpht.com/-8b_QSmcAiz8/TmWrENJMzqI/AAAAAAAABt0/GAO_bFrH-iA/s70/noname.jpg"
12. };
13.  
14. function showRecentComments(nIndex) {
15.   if(!nIndex) {nIndex = rComment_Setting.startIndex;}
16.   document.getElementById('RecentCommentsArea').innerHTML = '<center><img src="' + rComment_Setting.gif + '"/></center>';
17.   var sFeedURL = '/feeds/comments/summary?orderby=published&start-index='+ nIndex + '&max-results=' + (rComment_Setting.showComment + 1) + '&alt=json-in-script&callback=generateComments';
18.   var script = document.createElement('script');
19.   script.setAttribute('src', sFeedURL);
20.   script.setAttribute('type', 'text/javascript');
21.   document.documentElement.firstChild.appendChild(script); 
22. }
23.  
24. function generateComments(json) {
25.   function compareentry(a,b) {
26.     order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
27.     return 0-order;
28.   }
29.   function generateCommentLink(nFetch, nIndex, nTotalComment) {
30.     var bOld = (nFetch > rComment_Setting.showComment);
31.     if (bOld) nFetch = rComment_Setting.showComment;
32.     var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalComment+'.&nbsp;&nbsp;';
33.     if (nIndex > rComment_Setting.startIndex)
34.     sResult += '<a href="javascript:showRecentComments('+(nIndex-rComment_Setting.showComment)+');" title="Newer Comments">&lt;&lt;</a>&nbsp;&nbsp;';
35.     if (bOld)
36.     sResult += '<a href="javascript:showRecentComments('+(nIndex+rComment_Setting.showComment)+');" title="Older Comments">&gt;&gt;</a>';
37.     sResult += '</p>';  
38.     return sResult;
39.   }
40.   
41.   var sHTML = '<ul>';
42.   var sortentry = json.feed.entry.sort(compareentry);
43.   var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
44.   var nTotalComment = parseInt(json.feed.openSearch$totalResults.$t);
45.   for (var i = 0, Comment; Comment = sortentry[i]; i++) {
46.     if (i >= rComment_Setting.showComment) 
47.       break;
48.     var authorname = Comment.author[0].name.$t;
49.     var title = Comment.title.$t.substr(0,30);
50.     var j = 0;
51.     while (j < Comment.link.length && Comment.link[j].rel != "alternate")
52.       j++;
53.     var link = Comment.link[j].href;
54.     var timestamp = Comment.published.$t.substr(0,10);
55.  
56.     var avatar = Comment.author[0].gd$image.src;
57.     var avatarLink = (Comment.author[0].uri) ? Comment.author[0].uri.$t : "";
58.  
59.     if (avatar.search("blank.gif") > 0) {
60.       if (avatarLink) {avatar = rComment_Setting.openID;}
61.       else {
62.         avatar = rComment_Setting.anonymous;
63.         avatarLink = link;
64.       } 
65.     }
66.     if (avatar.search("openid16-rounded.gif") > 0) {avatar = rComment_Setting.openID;}
67.     if (avatar.search("b16-rounded.gif") > 0) {avatar = rComment_Setting.blogger;}
68.     var w = rComment_Setting.headWidth;
69.  
70.     sHTML += '<li><span style="float:left; width:' + w + 'px;"><a href="'+ avatarLink +'" target="_blank"><img src="'+ avatar +'" style="width:' + w + 'px; padding: 0px; border: 1px solid #ccc;"/></a></span>';
71.  
72.     sHTML += '<div style="margin-left:' + (w + 10) + 'px; word-wrap: break-word; word-break: break-all;"><a href="'+ link +'">'+ authorname +' 留言：</a>'+ title +'<span style="color: #AAA;"> ～ '+ timestamp +'</span></div><div style="clear: both;"/></li>';
73.   }
74.   sHTML += '</ul>';
75.   sHTML += generateCommentLink(parseInt(json.feed.entry.length), nIndex, nTotalComment);
76.   document.getElementById('RecentCommentsArea').innerHTML = sHTML;
77. }
78.  
79. showRecentComments();
80. </script>

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


三、程式碼及參數說明

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

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)