instagramのAPIを使って写真を取得する方法

instagramに投稿した写真を自分のサイトに貼付けたい!ってことで、instagramのAPIを使って実現してみたのでそのメモです。

instagramにアプリケーション登録

まずはここhttp://instagram.com/developer/にアクセスします。

で、「Register Your Application」をクリックします。

「新しいアプリを登録」をクリック。

ここでアプリケーションの情報を登録します。

「OAuth Redirect_uri」はアクセストークンを取得する際にリダイレクトされるURLです。「Website」と同じURLを入れとけば大丈夫と思います。

で、登録すると「CLIENT ID」と「CLIENT SECRET」が取得できます。

アクセストークンを取得する

アクセストークンを取得するには以下のURLにブラウザでアクセスします。
その際、【CLIENT-ID】には、先ほど取得したCLIENT-IDを、【REDIRECT-URI】にはOAuth Redirect_uriに登録した内容に書き換えます。

https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token

すると、以下の画面が表示されますんで、「Authorize」をクリックします。

すると、【REDIRECT-URI】で書き換えたURIにリダイレクトされ、URLにアクセストークンがついてきます。

http://matsudam.com/#access_token=***********************************************

この「#access_token=」以降がアクセストークンですんでメモっときます。

JQueryで写真を取得する

今回の場合は、こんな感じのコードにしてます。
JQueryの取得はこちらからどうぞ。

<div id="instagram">
</div>
<script type="text/javascript">
$(function() {

$("#instagram").text("loading...");
$.ajax({
url: "https://api.instagram.com/v1/users/self/media/recent",
data: { access_token: 'ここに取得したアクセストークンをコピペ' },
dataType: "jsonp",
error: function(jqXHR, textStatus, errorThrown) {
$("#instagram").text(textStatus);
},
success: function(data, textStatus, jqXHR) {
$("#instagram").text("");
for (var i = 0, length = 3; i < length; i++) {
	var d = data.data[i];

	$("#instagram").append(
	$("<div>").addClass("instagram_photo").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url).attr("alt", d.caption.text))));}

}
});

});
</script>

と、こんな感じでinstagramに投稿した写真を扱うことができます。

サンプルはこちら。

instagram API sample

今回はこちらの記事を参考にさせてもらいました。
参考っていうか、まるパク(ry
どうもありがとうございました。

Instagram API Doc
Instagram APIから画像データを取得する(フローズンブラウニー)
instagramをjQueryで使う