twitpicAPIを通じでtwitterの投稿画像を一覧表示させる方法 (#タグ検索)

どうもこんばんは。今回のtipsは【twitpicAPIを通じでtwitterの投稿画像を一覧表示させる方法】です。twitpicAPIはv2が出てから触ってなかったのですが、結構便利なのでいつか使ってみたいと思っております。

twitpicAPI

APIではXML,json,jsonpのどれかでデータの処理が行えます。ここではjsonpの例を書いておきます。ちなみに tag : "????" の部分でtwitterのタグで絞り込んでいます。

jQuery

本例では…
・ユーザー名
・アバター画像URL
・投稿時間
・投稿画像URL
・閲覧数
・詳細ページURL
・地域
を取得、表示させています。
この他にも色々表示できますが詳細はRTM

$(function(){
    $.ajax({
        url : "http://api.twitpic.com/2/tags/show.jsonp",
        dataType : "jsonp",
        data : {
            tag : "rabbit"
        },
        jsonp : ‘jsoncallback’,
        success : TwitpicLoad
    });
});
TwitpicLoad=function(json) {
    var maxcount = 25;
    $.each(json.images,function(i,image) {
        var user;
        user = "<li><b>NAME</b> : " + image.user.username +
        "</li><li><img src=’" + image.user.avatar_url +
        "’></li><li><b>LOCATION</b> : " + image.user.location +
        "</li><li><b>DATE</b> : " + image.timestamp +
        "</li><li><b>VIEW</b> : " + image.views +
        "</li>";
        var url;
        url = ‘http://twitpic.com/’ + image.short_id;
        var imgurl;
        imgurl = "http://twitpic.com/show/large/" + image.short_id;
		var sns;
		sns = "<li class=’fb’><div class=’fb-like’ data-href=’" + url + "’ data-send=’false’ data-layout=’button_count’ data-width=’200′ data-show-faces=’true’></div></li>"
        $("ul#picBody").append("<li class=’pic’><ul><li class=’postImg’><a target=’_blank’ href=’" + url +"’><img width=’300px’ src=’" + imgurl + "’></a></li>" + user + sns + "</ul></li>");
    });
};

HTML

<div id="picArea">
    <ul id="picBody">
    </ul>
</div>

CSS

このCSSは装飾用ですので割愛していただいてかまいません。

li.pic ul li.fb{
	height:30px;
	border:none;
	margin:8px 0 0 0;
}
li.pic{
	font-size:80%;
	color: #333;
	width:300px;
	float: left;
	height:390px;
	margin:10px;
	font-family:arial;
}
li.pic ul li{
	margin: 0 0 5px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #DDD;
}
li.postImg {
    height:180px;
    overflow: hidden;
}
li.postImg img{
    width:300px;
}

以上になります。