[BLOG]在Blogger實現Recently Comments的功能

8月 12, 2006 Blogger 1 Comments Edit Copy Download

Blogger雖然以簡便、自由聞名，不過卻缺東缺西，令人難以靈活運用，其中一項缺少的功能，就是Recently Comments(最近的評論)。

Blogger允許開放任何人對Blog的文章下評論(comment)，但是當有人對古早的文章做comment的時候，卻只有作者才會收到Blogger自動寄來的提示信件，其他人就不知道有這回事了。

因此，這次就來做做看吧，傳說中，綜合另一個Blog、轉信、Feed2JS、JavaScript列出等多項複雜方法，用暴力硬上的Recently Comments！

不過我並不打算講得很細節，如果看不太懂的話，請多加提升對Blogger、Gmail、Feed2JS的熟悉程度吧。

那麼，就開始吧。

1. 前置工作：
   1. 請先在Blogger準備兩個Blog，一個是你的主要Main Blog，另一個是儲存評論的Comment Blog
   2. 請準備一個能夠轉信的信箱，並確保其容量夠大，至少要塞得下你要用來轉信的緩存空間，如Gmail。
   3. Feed2JS，只要提供RSS或Atom，就能夠產生JavaScript的程式。
   這樣子前置工作就完成了。
2. 步驟一：在Main Blog設定，只要有人留下Comment，就寄到你的信箱。
3. 步驟二：在信箱設定，只要有收到從Main Blog來的Comment提示信，就轉寄到Comment Blog。要注意的是，Blogger提供三種Comment的方式，寄出時的帳號會有所不同，個別是：anonymous-comment@blogger.com、noreply-comment@blogger.com，兩個帳號都要設定轉信，以免漏掉。
4. 步驟三：在Comment Blog設定Mail-to-Blog，也就是指定一個信箱，只要這個信箱收到信件，就會自動發佈在Comment Blog。步驟二所指的轉信目的信箱也就是這裡的設定。
5. 步驟四：取得Comment Blog的Atom，這是Blogger的內建功能，在設定裡面可以找到網址。
6. 步驟五：利用Feed2JS製造JavaScript，指定Comment Blog的Atom給他，設定好參數與格式，他就會列出Comment Blog的標題與內文。參數與設定請看這張截圖：
   
   以上設定所產生的JavaScript應該會產生類似這樣的程式碼：
   

   <script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n" type="text/javascript"></script>
   
   <noscript>
   <a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n&html=y">View RSS feed</a>
   </noscript>
   

   
   實際展現出來就會發現，這個內容雜亂，並不會像是我們要的清單而已。所以將之加入div標籤，以方便取得資料做進一步的調整。
   

   <div id="comment_feed" style="display:none">
   <script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n" type="text/javascript"></script>
   </div>
   <noscript>
   <a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n&html=y">View RSS feed</a>
   </noscript>
   
   <div id="comment_show"></div>
   

7. 步驟六：撰寫JavaScript，以comment_feed的資料為基礎，取出必要資訊：評論者、時間、以及被評論的文章連結，再顯示到comment_show。以下是我寫的JavaScript函式，僅供參考：
   

   function show_recent_comment(tar_id)
   {
    var recent_comment = document.getElementById("comment_feed").innerHTML.toLowerCase();
    
    //取得三項資料：poster、article_link、date
    
    var poster = new Array;
    var article_link = new Array;
    var date = new Array;
    
    //get poster
    temp_poster = recent_comment.split('gmail_sendername');
    for (i = 1; i < temp_poster.length; i++)
    {
      start_point = temp_poster[i].indexOf(">");
      end_point = temp_poster[i].indexOf("</b>");
      temp = temp_poster[i].substr(start_point + 1, end_point - 1);
      poster[i-1] = temp.replace("<", "");
    }
    
    temp_link = recent_comment.split('openextlink(window,event,this)" href="');
    
    for (i = 1; i < temp_link.length; i++)
    {
      end_point = temp_link[i].indexOf('"');
      article_link[i-1] = temp_link[i].substr(0, end_point);
    
    }
    
    temp_date = recent_comment.split('<br>subject: [布丁布丁吃？] ');
    for (i = 1; i < temp_date.length; i++)
    {
      end_point = temp_date[i].indexOf(' ');
      date[i-1] = temp_date[i].substr(0, end_point);
    }
    
    var show_recent = "";
    for (i = 0; i < temp_date.length - 1; i++)
    {
      show_recent = show_recent + "<li><a href='" + article_link[i] + "#comments'>";
      show_recent = show_recent + poster[i] + " " + date[i];  
      show_recent = show_recent + "</a></li>";
    }
    
    document.getElementById(tar_id).innerHTML = show_recent;
   }
   

   
   把這個函式加入步驟六的程式碼裡面，變成

   <div id="comment_feed" style="display:none">
   <script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n" type="text/javascript"></script>
   </div>
   <noscript>
   <a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fpulipuli-comment.blogspot.com%2Fatom.xml&chan=n&num=10&desc=1&date=y&targ=n&html=y">View RSS feed</a>
   </noscript>
   
   <div id="comment_show"></div>
   <script type="text/javascript">
   <!--
   show_recent_comment("comment_show")
   
   function show_recent_comment(tar_id)
   {
     //略
   }
   -->
   </script>
   

8. 步驟八：將這段貼到你的Blog中適合的位置，就大功告成了。

以上，是不是非常複雜呢。而且我發現Feed2JS沒辦法及時更新，所以其實做到這種地步，還稱不上是完美。

再加油吧。