instagramをjQueryで使う

まず、instagramのAPIを使用可能にするため
下記URLよりユーザー登録する。
http://instagr.am/developer/

idとパスワードを入力すると下記情報を入手できる

CLIENT ID

CLIENT SECRET

CALLBACK URL


CALLBACK URLは任意でOK

CLIENT ID

CALLBACK URL (redirect_uriの事)

入手した上記2つの情報を、下記URLの該当する場所にペーストし、ブラウザで開く。
https://api.instagram.com/oauth/authorize/?client_id=CLIENT ID&redirect_uri=REDIRECT URI&response_type=code

ブラウザを進むと、

CALLBACK URL

で入力したURLにジャンプし、そのURLの最後でコードを取得できる
入力したURL?code=※※※※※※※

ここで取得したものを使って
アクセストークンをゲットします。
送信手段がPOSTでないと動かないため、
下記phpコードを適当なhtmlにはりつけ表示させると、アクセストークンを獲得できる。

注)4カ所は「取得したパラメータ」に入力しなおすこと!

<?php
$client_id = "取得したもの";
$client_secret = "取得したもの";
$redirect_uri = "取得したもの";
$token_uri = 'https://api.instagram.com/oauth/access_token';
//-----[postするデータ]
$post = "client_id=".$client_id."&client_secret=".$client_secret."&grant_type=authorization_code&redirect_uri=".$redirect_uri."&code=取得したもの";
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $token_uri);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$json = json_decode(curl_exec($ch));
curl_close($ch);

echo "access_token=".$json->access_token;
echo "username=".$json->user->username;
echo "profile_picture=".$json->user->profile_picture;
echo "id=".$json->user->id;
echo "full_name=".$json->user->full_name;
?>



アクセストークンが獲得できたら、最後のパラメータを変更し
https://api.instagram.com/v1/users/self/media/recent?access_token=**********************************
のURLを表示させる。

{"url":"http:〜","width":306,"height":306}
な感じの「JSON」型のデータで表示される

この型を表示可能にするために
jQueryの$.ajaxを使う。


<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 = 5; i < length; i++) {
var d = data.data[i];
$(".instagram").append(
$("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));}
}
});

});
</script>

access_tokenを「取得したもの」に変更し、
for文で表示数を決定できる。

dataType: "jsonp",とは、
JSONPを使用し、応答データを指定したコールバック関数によってJSONとして評価した、JavaScriptオブジェクトです。

参考サイト
http://blog.5ive.info/archives/1261
Comments