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

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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;
}

以上になります。