Blogger 小元件--最新文章與最新回應(json-in-script格式)

之前有提供過 Atom 及 RSS 這兩種格式的 Widget, 這兩個有一個大問題困擾了我很久, 只要我將 blogger feed 導向到 FeedBurner, 這兩組元件就不能用了, 若是我將元件中 feed 來源網址設為 blogger 的 feed 網址, 則 XMLDOM 或 XMLHTTPRequest 就會取不到任何內容, 若是設為 FeedBurner 的網址, 又會有沒有使用權限或存取被拒等錯誤, 真的讓我很頭痛

最近查到有關 JSON 的資料, 才知道原來還可以這樣做, 而且將 blogger feed 導向到 FeedBurner 之後, blogger 的 JSON 資料依然可以使用, 真是讓我感動莫名 T_T

下面就提供這個最新的元件, 我自己也改用這個了
最新文章(Recent Posts)

<script type="text/javascript">
function mf_simpleHTMLEncode(s_in){
  return s_in.replace(new RegExp("&","gi"),"&amp;").replace(new RegExp(">","gi"),"&gt;").replace(new RegExp("<","gi"),"&lt;");
}
function mf_summaryByByte(s_in,i_length){
  if( i_length< 0 ){
    return mf_simpleHTMLEncode(s_in);
  }
  var ai_code = new Array();
  var i_bytes = 0;
  for(var i=0; i< s_in.length&&i_bytes< i_length;i++){
    var i_code = s_in.charCodeAt(i);
    ai_code[ai_code.length] = i_code;
    i_bytes += ( i_code< 256?1:2 );
  }
  var s_out = "";
  for(var i=0;i< ai_code.length;i++){
    s_out += String.fromCharCode(ai_code[i]);
  }
  if( s_out.length< s_in.length ){
    s_out += "...";
  }
  return mf_simpleHTMLEncode(s_out);
}
function mf_showFeedByJSON( jsonData,s_wrapperName,i_maxTitleBytes,i_maxSummaryBytes, a_exArg ){
  var s_errMsg = '<ul><li>Your browser does not support this widget.</li></ul>';
  try{
    var s_condition , i_queryType , s_orderby , b_desc;
    if( typeof( a_exArg )!="undefined" ){
      s_condition = a_exArg.condition;
      i_queryType = a_exArg.queryType;
      s_orderby = a_exArg.orderby;
      b_desc = a_exArg.desc;
    }
    //i_queryType:0=title+summary,1=only title
    if( typeof(i_queryType)=="undefined" ){
      i_queryType = 1;
    }
    var b_comments = false;
    if( typeof(jsonData.feed.entry[0]["thr$in-reply-to"])!="undefined" ){
      b_comments = true;
    }
    if( typeof(s_orderby)=="string" && typeof(b_desc)=="boolean" ){
      var ac = new ArrayCompareter( s_orderby,b_desc );
      jsonData.feed.entry.sort( ac.sort );
    }
    var s = '<ul>';
    _loopFeed:
    for(var i=0;i< jsonData.feed.entry.length;i++){
      var s_date = jsonData.feed.entry[i].published.$t.substring(0,10).replace(/\-/gi,"/");
      var s_author = jsonData.feed.entry[i].author[0].name.$t;
      var s_title = mf_summaryByByte(jsonData.feed.entry[i].title.$t,i_maxTitleBytes);
      var s_summary = mf_summaryByByte(jsonData.feed.entry[i].summary.$t,i_maxSummaryBytes);
      //var s_link = jsonData.feed.entry[i].link[0].href;
      var s_link ;
      for(var j=0;j< jsonData.feed.entry[i].link.length;j++){
        if(jsonData.feed.entry[i].link[j].rel=='alternate'){
          s_link = jsonData.feed.entry[i].link[j].href;
          break;
        }
      }

      if( typeof(s_condition)=="string" ){
        var as_condition = s_condition.split(" ");
        var s_text = (i_queryType==1?s_title:s_title+s_summary);
        for( var j=0;j< as_condition.length;j++ ){
          if( s_text.indexOf(as_condition[j])< 0 ){
            continue _loopFeed;
          }
        }
      }
      s+='<li>'
        +s_date+' '+s_author+'<br/>'
        +'<a href="'+s_link+'">'+s_title+'</a>'
        +(b_comments?'':'<br/><i>'+s_summary+'</i>')
        +'</li>';
    }
    if( jsonData["feed"]["entry"].length==0 ){
      s+='<li>No data</li>';
    }
    s += '</ul>';
    document.getElementById(s_wrapperName).innerHTML=s;
  }catch(e){
    document.getElementById(s_wrapperName).innerHTML=s_errMsg+e.description;
  }
}
</script>

<div id="new-posts">Loading...</div>
<script type="text/javascript">
function mf_showRecentPost(jsonData){
  mf_showFeedByJSON( jsonData , "new-posts" , -1 , 30);
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=mf_showRecentPost&max-results=5" type="text/javascript"></script>

最新回應(Recent Comments)
若是你也有使用上面的最新文章元件, 則只需要下面的程式碼

<div id="new-comments">Loading...</div>
<script type="text/javascript">
function mf_showRecentComment(jsonData){
  mf_showFeedByJSON( jsonData , "new-comments" , 30 );
}
</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=mf_showRecentComment&max-results=5" type="text/javascript"></script>

若是沒有使用上面的最新文章元件, 則請使用下面的程式碼

<script type="text/javascript">
function mf_simpleHTMLEncode(s_in){
  return s_in.replace(new RegExp("&","gi"),"&amp;").replace(new RegExp(">","gi"),"&gt;").replace(new RegExp("<","gi"),"&lt;");
}
function mf_summaryByByte(s_in,i_length){
  if( i_length< 0 ){
    return mf_simpleHTMLEncode(s_in);
  }
  var ai_code = new Array();
  var i_bytes = 0;
  for(var i=0; i< s_in.length&&i_bytes< i_length;i++){
    var i_code = s_in.charCodeAt(i);
    ai_code[ai_code.length] = i_code;
    i_bytes += ( i_code< 256?1:2 );
  }
  var s_out = "";
  for(var i=0;i< ai_code.length;i++){
    s_out += String.fromCharCode(ai_code[i]);
  }
  if( s_out.length< s_in.length ){
    s_out += "...";
  }
  return mf_simpleHTMLEncode(s_out);
}
function mf_showFeedByJSON( jsonData,s_wrapperName,i_maxTitleBytes,i_maxSummaryBytes, a_exArg ){
  var s_errMsg = '<ul><li>Your browser does not support this widget.</li></ul>';
  try{
    var s_condition , i_queryType , s_orderby , b_desc;
    if( typeof( a_exArg )!="undefined" ){
      s_condition = a_exArg.condition;
      i_queryType = a_exArg.queryType;
      s_orderby = a_exArg.orderby;
      b_desc = a_exArg.desc;
    }
    //i_queryType:0=title+summary,1=only title
    if( typeof(i_queryType)=="undefined" ){
      i_queryType = 1;
    }
    var b_comments = false;
    if( typeof(jsonData.feed.entry[0]["thr$in-reply-to"])!="undefined" ){
      b_comments = true;
    }
    if( typeof(s_orderby)=="string" && typeof(b_desc)=="boolean" ){
      var ac = new ArrayCompareter( s_orderby,b_desc );
      jsonData.feed.entry.sort( ac.sort );
    }
    var s = '<ul>';
    _loopFeed:
    for(var i=0;i< jsonData.feed.entry.length;i++){
      var s_date = jsonData.feed.entry[i].published.$t.substring(0,10).replace(/\-/gi,"/");
      var s_author = jsonData.feed.entry[i].author[0].name.$t;
      var s_title = mf_summaryByByte(jsonData.feed.entry[i].title.$t,i_maxTitleBytes);
      var s_summary = mf_summaryByByte(jsonData.feed.entry[i].summary.$t,i_maxSummaryBytes);
      //var s_link = jsonData.feed.entry[i].link[0].href;
      var s_link ;
      for(var j=0;j< jsonData.feed.entry[i].link.length;j++){
        if(jsonData.feed.entry[i].link[j].rel=='alternate'){
          s_link = jsonData.feed.entry[i].link[j].href;
          break;
        }
      }

      if( typeof(s_condition)=="string" ){
        var as_condition = s_condition.split(" ");
        var s_text = (i_queryType==1?s_title:s_title+s_summary);
        for( var j=0;j< as_condition.length;j++ ){
          if( s_text.indexOf(as_condition[j])< 0 ){
            continue _loopFeed;
          }
        }
      }
      s+='<li>'
        +s_date+' '+s_author+'<br/>'
        +'<a href="'+s_link+'">'+s_title+'</a>'
        +(b_comments?'':'<br/><i>'+s_summary+'</i>')
        +'</li>';
    }
    if( jsonData["feed"]["entry"].length==0 ){
      s+='<li>No data</li>';
    }
    s += '</ul>';
    document.getElementById(s_wrapperName).innerHTML=s;
  }catch(e){
    document.getElementById(s_wrapperName).innerHTML=s_errMsg+e.description;
  }
}
</script>

<div id="new-comments">Loading...</div>
<script type="text/javascript">
function mf_showRecentComment(jsonData){
  mf_showFeedByJSON( jsonData , "new-comments" , 30 );
}
</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=mf_showRecentComment&max-results=5" type="text/javascript"></script>

--gs--
{Blogger 小元件|widget}{JSON}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。