TatMing's Studio: Build Blogger Recent Comments by jQuery / Ajax / JSONP

用上Blogger後，試用一下Google提供的小工具。
使用最近留言(Recent Comments)和最近文章(Recent Posts)幾乎是Blog站的指定部件。

Google提供的小工具是由第三方 - Blogger Buster 製作的。
但可惜廢得可憐，因為是透過iframe呈現，又不能自定樣式，而且最不能接受的是連Trackback都包含在內，又不能把我自己的回應去掉。

上Google搜尋，有很多都隨著Google API的更新不能用，或者是我不能理解的做法。

最後當然又是自己動手做，但出師不利，前幾天就遇到問題 - jQuery Cross-Domain Ajax w/XML = NO WAY!

所以唯有轉用JSONP方式，參考了以下文件。

幾經修改過後，製作完成了。
現在大家在右手邊的Sidebar看到的最近留言就是了。
Demo : http://webapp.heliohost.org/html/blogger_recent_comments_json.htm

使用方法很簡單，
如果你的Template並未加入jQuery，請去設計 / 修改 HTML / 修改範本中，把以下程式碼放在<head>與</head>之間。

<script 
type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

然後在Blogger新增一個HTML/Javascript小工具，然後把下面的程式碼貼上後，再儲存就完成。

大家使用前，需要去調整一下設定 :
maxcount (line 29) - 最多留言顯示數目。
minlength (line 30) - 長度多於這個值才顯示。
maxlength (line 31) - 長度多於這個值時，用"..."代替。
exclude_name (line 32) - 過濾字。
feedURL (line 69) - 換上你blogger的ID。

樣式方面，大家可以自行去修改。

<script type="text/javascript">
   function contains(arr, obj) {
    for(var i = 0; i < arr.length; i++) {
     if(arr[i].toLowerCase() == obj.toLowerCase() && arr[i].length == obj.length)
      return true;
    }
   }
   if( typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function(str) {
     return this.indexOf(str) == 0;
    };
   }
   var BloggerFunctions = {
    getComments : function(feedURL) {
     var paras = {
      alt : 'json-in-script'
     };
     $.ajax({
      url : feedURL,
      type : 'GET',
      dataType : "jsonp",
      success : BloggerFunctions.onGotCommentData,
      data : paras
     });
    },

    //Parse the JSON comment data returned by the Google Blogger API
    onGotCommentData : function(data) {
     var maxcount = 10;
     var minlength = 10;
     var maxlength = 20;
     var exclude_name = new Array("達MiNG");

     var feed = data.feed;
     var entries = feed.entry || [];
     var title = "";
     var content = "";
     var url = "";
     var authorname = "";
     var published = "";
     var cnt = 0;
     var html = "";

     for(var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = entry.title.$t;
      var content = entry.content.$t;
      var url = entry.link[2].href;
      var authorname = entry.author[0].name.$t;
      var published = entry.published.$t.substring(0,10);
      
      if(!contains(exclude_name, authorname) && !content.startsWith('[...]') && title.length >= 10) {
       html += "<span style='font-family:Arial;color:#333;font-size:11px;font-weight:bold;'>" + "["+ published + "] " 
         +authorname + " 說 : </span><br />" 
         + "<span style='font-family:Arial;color:#666;font-size:11px;'>" 
         + "<a href='" + url + "'>" + (content.length > maxlength ? content.substring(0, maxlength) + '...' : content) + "</a></span>"
         + "<br /><br />";
       cnt++;
      }
      if(cnt == maxcount)
       break;
     }
     var dom = $(html);
     $('#recent_comments').append(dom);
    }
   }

   $(document).ready(function() {
    var feedURL = "http://tatmingstudio.blogspot.com/feeds/comments/default";
    BloggerFunctions.getComments(feedURL);
   });
  </script>
  <div id="recent_comments"></div>

TatMing's Studio

網頁

2012年5月5日星期六

Build Blogger Recent Comments by jQuery / Ajax / JSONP

沒有留言:

發佈留言