Google Data API を利用してRecent Postsの数を増やしてみた

前回、Google Feed APIを利用してRecent Postsの数を増やしてみたのだが、Google Data APIの方が簡単にできることが分かった。

Google Data APIなら、クロスドメイン制限を気にせず簡単にフィードを取得できるので、以下のコード以外に他に必要なものはない。

Code

<ul id='recentPosts'></ul>

<script type="text/javascript">
function getFeedList(data){
  var entries = data.feed.entry, alink = '', list = [];
  
  for(var i = 0, j = entries.length; i < j ; i++ ){
    var entry = entries[i];
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alink = entry.link[k].href;
        break;
      }
    }
    list.push('<li><span class="item-title"><a href="' + alink + '">' + entry.title.$t + '</a></span></li>');
  }
  
  document.getElementById('recentPosts').innerHTML = list.join('');
}

(function(domain, maxResults, order, redirect){
  var script = document.createElement('script');
  script.setAttribute('src',
    'http://' + encodeURIComponent(domain) +
    '.blogspot.com/feeds/' + order +
    '/default?redirect=' + redirect +
    '&max-results=' + (maxResults > 0 ? maxResults : 10) +
    '&alt=json-in-script&callback=getFeedList');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}
)('yas-hummingbird', 10, 'posts', false);
</script>

Usage

1. 上記匿名メソッドに渡している引数を適宜書き換える。
2. レイアウトの変更でHTMLウィジェットを追加する。
3. 追加したHTMLウィジェットに上記のulタグとJavascriptコードを貼りつける。

引数:

1. ブログ ドメイン
   • 例: 'yas-hummingbird'
2. 取得する投稿数
   • 0以上の数値で
3. 取得するフィードの種類
   • 'posts' or 'comments'
4. リダイレクト
   • リダイレクトの設定をされている方用に。

フィードの種類を'comments'にするとコメントフィードを取得することもできます。

Otherwise

<script src="http://yas-hummingbird.blogspot.com/feeds/posts/default?max-results=10&redirect=false&alt=json-in-script&callback=getFeedList"></script>

もし、上記のscriptタグの内容が理解できるなら、上記の匿名メソッドを削除して、このスクリプトタグを追加する方が簡潔になる。

要するに、上記の匿名メソッドはこのスクリプトタグを生成しているわけで、どちらかを選んで使ってね、ということです。

スクリプトタグに差し替えた場合の例

<ul id='recentPosts'></ul>
<script type="text/javascript">
function getFeedList(data){
  var entries = data.feed.entry, alink = '', list = [];
  
  for(var i = 0, j = entries.length; i < j ; i++ ){
    var entry = entries[i];
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alink = entry.link[k].href;
        break;
      }
    }
    list.push('<li><span class="item-title"><a href="' + alink + '">' + entry.title.$t + '</a></span></li>');
  }
  
  document.getElementById('recentPosts').innerHTML = list.join('');
}
</script>
<script src="http://yas-hummingbird.blogspot.com/feeds/posts/default?max-results=10&redirect=false&alt=json-in-script&callback=getFeedList"></script>

jQueryで書いてみる

<ul id='recentPosts'></ul>

<script type="text/javascript">
(function($){$.extend({
  // domain : blog domain
  bloggerFeed: function(domain, options, callback){
    var opt = $.extend({
      'max-results': 10,
      'redirect': false,
      'alt': 'json-in-script'
    }, options);
    
    callback = $.isFunction(options) ? options : callback || function(){};
    
    $.getJSON('http://' + domain + '.blogspot.com/feeds/posts/default?callback=?', opt,
      function(data){
        if(data)
          callback.call(this, data.feed);
      });
  }
})})(jQuery);

$(function(){
  $.bloggerFeed('yas-hummingbird', {'max-results': 15},
    function(feed){
      $('#recentPosts').append(
        '<li>' + 
        $.map(feed.entry, function(entry, i){
          return '<span class="item-title"><a href=\'' + 
            (function(links){
              for (var k = 0; k < links.length; k++) {
                if (links[k].rel == 'alternate') {
                  return links[k].href;
                }
              }
              return '';
            })(entry.link) + 
            '\'>' + entry.title.$t + '</a></span>';
        }).join('</li><li>') +
        '</li>');
  });
});
</script>

jQuery plugin - bloggerFeed demo