2012年5月15日星期二

Blogger Recent Posts by jQuery / Ajax / JSONP

之前已經貼過的Recent Comments,當然不會少得Recent Posts。

Demo : http://webapp.heliohost.org/html/blogger_recent_posts_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 18) - 最多文章顯示數目。
maxlength (line 19) - 長度多於這個值時,用"..."代替。
feedURL (line 48) - 換上你blogger的ID。

樣式方面,大家可以自行去修改。
  <script type="text/javascript">
   var BloggerFunctions = {
    getPosts : function(feedURL) {
     var paras = {
      alt : 'json-in-script'
     };
     $.ajax({
      url : feedURL,
      type : 'GET',
      dataType : "jsonp",
      success : BloggerFunctions.onGotPostData,
      data : paras
     });
    },

    //Parse the JSON post data returned by the Google Blogger API
    onGotPostData : function(data) {
     var maxcount = 10;
     var maxlength = 20;

     var feed = data.feed;
     var entries = feed.entry || [];
     var title = "";
     var content = "";
     var url = "";
     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[4].href;
      var published = entry.published.$t.substring(0,10);

      html += "<a href='" + url +"'><span style='font-family:Arial;color:#333;font-size:11px;font-weight:bold;'>" + "[" + published + "] " + (title.length > maxlength ? title.substring(0, maxlength) + '...' : title)  + " </span></a><br />";
      cnt++;
      if(cnt == maxcount)
       break;
     }
     var dom = $(html);
     $('#recent_posts').append(dom);
    }
   }

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

沒有留言:

發佈留言