前回、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
- 上記匿名メソッドに渡している引数を適宜書き換える。
- レイアウトの変更でHTMLウィジェットを追加する。
- 追加したHTMLウィジェットに上記のulタグとJavascriptコードを貼りつける。
引数:
- ブログ ドメイン
- 取得する投稿数
- 取得するフィードの種類
- リダイレクト
フィードの種類を'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>
