JSON 應用（２）：最新迴響的標題

自從 blogger.com 的新版發佈以來，最另人詬病的就是若是有加入一個新網頁元素(Page Elements)，選擇資訊提供(Feed)的時候，加入是最新迴響的 Feed(http://xxxxx.blogspot.com/feeds/comments/summary) 更新的速度很慢，甚至要到幾個小時之譜，這對來部落格留言的人不是很能接受的。

因為 blogger.com 之前的舊版是利用轉成靜態網頁的方式，但新版就不是這樣的模式，增加了很大的彈性，但是這對於資料的同步與 Cache 是很大的考驗，所以其實也不能責怪他們。

若改成用 Javascript 的模式去抓 JSON 格式的 Feed 來顯示，可以解決上述的問題，因為資料是在客戶端電腦去抓取 Feed 回來顯示。可是問題又來了，這個 Feed 的格式居然沒有原文章的標題，這個對寫很多文章的人來說是個很大的困擾，往往要點入後才知道這些人是在哪篇文章留言的！所以，我想了幾個辦法如下：

1. 先抓取 comments 的 feed，內有標題的網址，然後利用搜尋的方法去 blogsearch.google.com 取回標題
   
2. 先抓取 comments 的 feed，內有標題的網址，然後再抓取 posts 的 feed 兩個去比對
   
3. 先抓取 comments 的 feed，內有標題的網址，再抓取藉由 comments 發佈到 gmail 信箱然後轉發到另一個部落格的 posts feed 去比對網址，取回標題。

分析以上作法的風險，我決定採用最麻煩的第三種作法。

1. blogsearch 的效能不可預知，新文章可能搜尋不到，舊文章可能搜不到，或者標題更改也不一定會更新。
   
2. 看起來是完美的作法，但是萬一有人在很舊很舊的文章留言， posts 的 feed 一次最多只能抓取 99 則，若比對不到的話，可能還要抓第二次第三次，很浪費連線的資訊傳送。
   
3. 去比對最新 comments 的 feed 雖然可行，可是中間經過兩個SMTP(gmail)的轉寄，未來格式轉變，或是被誤認為 SPAM 也是很容易出問題。

我很懶的剪圖做說明，就簡單的把第三種方法的設定方式描述如下，有問題的人麻煩在詢問就好。

1. 在原部落格A的控制主頁(Dashboard) → 設定(Settings) → 意見(Comments) → 意見通知地址 (Comment Notification Address) 打入一個為了最新迴響而開設的gmail 信箱(C@gmail.com)
   
2. 開一個新的部落格B，然後在控制主頁(Dashboard) → 設定(Settings) → 電子郵件(Email) → Mail-to-Blogger 地址 Mail-to-Blogger Address 自行設定一組地址(account.D@blogger.com) 然後下方的　發佈(Publish)　要打勾勾
   
3. 進入 (C@gmail.com) 的信箱收信匣(Web版) → 設定(Settings) → 轉寄和 POP 轉寄內收郵件的副本至輸入上個步驟的 account.D@blogger.com
   
4. 在部落格A隨便留個言，然後打開部落格B看看是否留言有變成一篇新的文章，若有的話再進行下一個步驟。
   
5. 在部落格A的控制主頁(Dashboard) → 範本(Template) → 網頁元素(Page Elements) → 新增網頁元素(Add a New Page Elements) → HTML/Javascript 然後把下面的原始碼貼上，就大功告成了，不過寄得把紅字的網址要打對。

<div id="divrc">下載中...</div>
<script>
var g_szAuthorsLink=new Array();
var g_szTitle= new Array();
var g_szOrgLink = new Array();
var g_iIndex=0;
var g_iShowCount=5;

function a_comprc(a,b){
   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'));
   return 0-order;
}
function a_rc(json)
{
   g_entry = json.feed.entry.sort(a_comprc);
}
function a_FindTitle(json,orgLink)
{
   var ret= orgLink;
   for (var ii=0,rc; rc= json.feed.entry[ii]; ii++)
   {
      var content=rc.content.$t;
      var index=content.indexOf(orgLink);
      if (index>0)
      {
         var iBegin=index+orgLink.length+2;
         var content2= content.substring(iBegin,content.length);
         var iEnd = content2.indexOf('</a>');
         if (iEnd >0)
           ret=content2.substring(0,iEnd);
         break;
      }
   }
   return ret;
}
function a_FindIndex(json,orgLink)
{
 var ij=0;
 for (ij=0; ij < g_iIndex; ij++)
 {
   if (orgLink==g_szOrgLink[ij])
       return ij;
 }
 g_szOrgLink[ij]=orgLink;
 g_szTitle[ij]= a_FindTitle(json,orgLink);
 g_szAuthorsLink[ij]='◎';
 g_iIndex ++;
 return ij;
}
function b_rc(json)
{
   for (var i=0,post; post = g_entry[i]; i++)
   {
       var content = post.title.$t;
       var link =  post.link[0].href;
       var iFind = link.indexOf('#');
       var orgLink= link;
       if (iFind>0)
          orgLink = link.substring(0,iFind);
       var index = a_FindIndex(json,orgLink);
       if (index>= g_iShowCount)
       {
          g_iIndex--;
          break;
       }
       var auther= post.author[0].name.$t;
       var timestamp=post.published.$t.substr(0,10) + ' ' +post.published.$t.substr(11,5);
       g_szAuthorsLink[index] += '<a href="' + link + '" title="' + timestamp + '：' + content + '">' + auther + '</a>«';
   }
   var temp = '<ul id="feedItemListDisplay">';
   for (var j=0; j< g_iIndex; j++)
   {
     temp += '<li><a href="' + g_szOrgLink[j] + '">' + g_szTitle[j] + '</a><br/>' + g_szAuthorsLink[j] + '</li>';
   }
   temp+="</ul>";
   document.getElementById("divrc").innerHTML = temp;
}
</script>
<script src="http://部落格A網址/feeds/comments/summary?alt=json-in-script&callback=a_rc" type="text/javascript"></script>
<script src="http://部落格B網址/feeds/posts/full?alt=json-in-script&callback=b_rc" type="text/javascript"></script>

至於實際的效果，就看左邊的《最新迴響》就是了。

2007.1.11 更新
上面這個方法，email 轉發文章到部落格B 被 blogger.com 擋掉了，他們認為是 spam。所以我改用了方法2. 其實程式碼是差不多，也做成一個元件送給大家使用，使用方法如下:

<script>g_szBlogDomain='xxxxx.blogspot.com'; </script>
<script src="http://js.writers.idv.tw/rc.js"></script>

2008.9.23 更新
今天不知道怎樣，json 輸出的格式改了，我把程式更新在 rc3.js

<script>g_szBlogDomain='xxxxx.blogspot.com'; </script>
<script src="http://js.writers.idv.tw/rc3.js"></script>

2008.9.24 更新
我把原來程式加入 rel 這個值的判斷，所以用原來的 rc.js 也可以了！