:::

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

8月 12, 2006 1 Comments Edit Post

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沒辦法及時更新,所以其實做到這種地步,還稱不上是完美。

再加油吧。

總共1 則留言, (我要發問)

  1. 這個計畫失敗了...

    原因在於Feed2JS只有在第一次寫出JavaScript的時候才會去讀取RSS或Atom裡面的資料,之後即使RSS更新,JavaScript也不會同步更新內容。
    對於一個免費服務來說,這種伺服器負荷的確是合理的考慮範圍。不過這樣子就沒辦法達到我要的目的了...

    再多多加油吧

    回覆刪除