今更ながら、InstgramのAPIを触ってみた。

自分のアカウントの写真をブッコ抜きなことをする場合にはOAuthが必要なんだけど、今回やりたいのは特定のタグ付けされた写真を引っこ抜くだけ。
なので、大げさに「触ってみた」なんてタイトルにしましたが、URL一個叩くだけです。

まず必要なのはclient_id。Instgramの開発者ページにアクセスして発行するだけ。

後は、popularを引っこ抜きたければ、

https://api.instagram.com/v1/tags/teizanbu/media/recent?client_id={client_id}

特定のタグ、例えば「teizanbu」の写真なら、

https://api.instagram.com/v1/tags/{tag_name(teizanbu)}/media/recent?client_id={client_id}

これでOK。簡単やね〜。

オマケでサンプルのソースを晒します。

というステージを用意して、

<link rel="stylesheet" href="galleryview-3.0b1_2/jquery.galleryview-3.0.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="galleryview-3.0b1_2/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="galleryview-3.0b1_2/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="galleryview-3.0b1_2/jquery.galleryview-3.0.min.js"></script>

こんな感じで必要なものを読み込みます。ちなみに今回使ってるのはjQueryプラグイン「GalleryView」。

あとは、

<script type="text/javascript">
	jQuery(document).ready(function(){
		var clientId = '0123456789abcdef0123456789abcdef';
		var tagName = 'teizanbu';
		var jsonUrl = 'https://api.instagram.com/v1/tags/' + tagName + '/media/recent?client_id=' + clientId + '&callback=?';
		jQuery.getJSON(jsonUrl, function(json, status) {
			console.log(jsonUrl);
			for (i in json.data) {
				jQuery('#gallery').prepend('<li><img frame="'+json.data[i].images.thumbnail.url+'" src="'+json.data[i].images.standard_resolution.url+'" title="" /></li>')
			}
			jQuery('#gallery').galleryView({
				transition_speed: 500,
				panel_animation: 'crossfade',
				panel_width: 612,
				panel_height: 612,
				frame_width: 70,
				frame_height: 70
			});
		});
	});
</script>

こんな感じでJSを走らせます。ぶっちゃけInstgramに関連するのは3〜6行目あたりのみ。あとはgalleryview。ホントは「boob」とか「sexygirl」なんかのタグでサンプル作りたかったんだけど、いい大人なので自粛してみました。