M.C.P.C.: はてなお気に入りAPIを使ってブログパーツ作例ソースは以下
はてなお気に入りAPIを使ってブログパーツ?を作ってみた...
http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html
jquery.hatenaFav.js
// --------------------------------------------------------------
// jquery.hatenaFav.js : hatenaお気に入り画像表示ブログパーツ
// based on: http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html
// (required: jquery.js)
// --------------------------------------------------------------
(function($){
$.fn.hatenaFav = function(options){
return this.each(function(index){
var it = this, $this = $(this);
it.opts = $.extend({}, $.fn.hatenaFav.defaults, options);
if (it.opts.loader) $('<img/>').attr('src', it.opts.loader).appendTo($this);
else $this.html('loading...');
$.ajaxSetup({cache:true});
$.getJSON('http://s.hatena.ne.jp/' + it.opts.user + '/favorites.json?callback=?', function(data) {
$this.html('');
$.each(data.favorites, function(index, item) {
if (index > it.opts.max) {
$('<a/>').attr('href', '#').click(function() {
options.max = data.favorites.length;
$this.hatenaFav(options);
return false;
}).attr('class', 'hatena-fav-more').css('font-size', '0.8em').text('more...').appendTo($this);
return false;
}
$('<img/>').attr('src', 'http://www.hatena.ne.jp/users/' + item.name.slice(0, 2) + '/' + item.name + '/profile_s.gif')
.css({
width: it.opts.size,
height: it.opts.size,
border: it.opts.border,
title: 'id:' + item.name,
alt: 'id:' + item.name
}).wrap('<a/>')
.parent().attr('href', 'http://d.hatena.ne.jp/' + item.name + '/').attr('target', it.opts.target).appendTo($this);
});
});
});
};
$.fn.hatenaFav.defaults = {
user: 'jkondo',
size: '16px',
border: '0px',
target: '_blank',
max: 10,
//loader: 'http://mattn.kaoriya.net/images/ajax-loader.gif'
};
})(jQuery);
使い方はこんな感じ
<style type="text/css"><!--
.hatena-fav-container {
font-family: meiryo, osaka;
font-weight: bold;
text-align: left;
width: 200px;
border: 1px solid gray;
}
.hatena-fav-container a, .hatena-fav-container a:visited {
color: blue;
}
.hatena-fav-title {
background-color: #ddd;
text-align: center;
}
.hatena-fav-icons img {
margin: 1px;
}
--></style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.hatenaFav.js"></script>
<script type="text/javascript"><!--
$(function() {
$('.hatena-fav-icons').hatenaFav({ user: 'mattn', size: 16 });
});
--></script>
<div class="hatena-fav-container">
<div class="hatena-fav-title">
<a href="http://mattn.kaoriya.net/">はてなお気に入り</a>
</div>
<div class="hatena-fav-icons"></div>
</div>
hatenaFavメソッドの引数に渡すuserとして、はてなのユーザIDを入れるとそのユーザのお気に入りユーザが表示されます。実行結果は↓