InstagramのAPIは知っていたのですが、自分自身の投稿した画像データを取得する方法をやったことがなかったので、実践してみました。
今更ですが、よく使うと思うのでメモしておきます。
アプリケーションの登録
自分のInstagramアカウントでログイン
アプリケーションの登録を行う。
- Applictaiton Nameは、登録するアプリケーション名を入力
- Dscriptionは、用途などを入力
- Websiteは、自分のサイト情報を入力
- OAuth redirect_uriは、アクセストークンを取得する際にリダイレクトされるURL（自分はサイトURLを入力しました）
アクセストークンの取得
アプリケーションを登録したら、クライアントIDを取得することができます。
https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token
- 【CLIENT-ID】は、取得したクライアントIDを入力
- 【REDIRECT-URI】は、先ほど登録したリダイレクトURLを入力
上記のアドレスをブラウザで叩くと、アクセストークンが返ってくる
#access_token=のコードが必要なので、メモしておきます。
http://hogehoge.com/#access_token=************************
取得したデータをウェブサイトで表示させる
取得したJSONデータから、WEBサイトに表示させる。
参考サイトのサンプルコードですが、どのようにデータを取得し表示するか次第ですが、案件ごとにカスタマイズができそうですね。
instagram.js
$(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))));}
}
});
});
gallery.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォトギャラリー</title>
</head>
<body>
<div class="instagram"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="instagram.js"></script>
</body>
</html>
- jQueryバージョン：1.11.1