サイト制作に関するメモ書き

HOME > JavaScript > jQuery > Instagram APIを使ってみる

Instagram APIを使ってみる

InstagramのAPIを使って、投稿された画像やいいね数、コメントなどの取得を試してみます。

※2016/06/18
APIの仕様が変更になり、インスタグラムへの申請と承認が必要になっています。詳しくは下記をご確認ください。
Permissions Review • Instagram Developer Documentation

アプリケーションの登録

APIを使用するにはInstagramのアカウントが必要になりますので、スマートフォンからアプリをダウンロードしてアカウント登録を行ってください。
アカウント登録を行ったら、PCからInstagramにログインします。

ログイン後、こちらのページからアプリケーションの登録を行います。
Register Your Application をクリック。

try-using-the-instagram-api01

Register a New Client をクリック。

try-using-the-instagram-api02

各項目を入力して、Registerをクリック。

try-using-the-instagram-api03

今回はテストですので、項目は以下のようにしました。

  • Application Name: app test
  • Description: app test
  • Website URL: http://cly7796.net/
  • Valid redirect URIs: http://cly7796.net/
  • Contact email: 自身のメールアドレス

これでアプリケーションの登録が完了しました。

try-using-the-instagram-api04

 

アクセストークンの取得

次に、APIに利用に使用するアクセストークンを取得します。
以下のURLにアクセスします。

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

CLIENT-IDとREDIRECT-URIの部分は、アプリケーションの登録で取得・設定したものを入れてください。

これで認証画面が出るはずだったのですが、以下のようなエラーが表示されました。

{"code": 403, "error_type": "OAuthForbiddenException", "error_message": "Implicit authentication is disabled"}

クライアント側でアクセストークンを取得する場合、先ほどアプリケーション登録をしたページにある「Disable implicit OAuth」にチェックが入っていると駄目みたいです。

Manage ClientsのEDITをクリック。

try-using-the-instagram-api05

Securityタブを選択して、Disable implicit OAuthのチェックを外します。
完了したらUpdate Clientをクリック。

try-using-the-instagram-api06

先ほどのURLに再度アクセスすると以下のような認証が表示されるので、Authorizeをクリック。

try-using-the-instagram-api07

REDIRECT-URIで指定したページに、アクセストークンが付加された状態でリダイレクトされます。

http://cly7796.net/#access_token=×××××

#access_token= 以降の値がアクセストークンになりますので、保存しておいてください。
これでアクセストークンの取得が完了しました。
 

ユーザーIDを取得

投稿された画像を取得する場合、投稿者のユーザーIDが必要になります。
(URLなどに表示されるユーザー名とは別のものです。)

まずはAPIを使ってユーザー名からユーザーIDを取得してみます。

JavaScript

$(function() {
	var accessToken = 'アクセストークンをここに入れる';
	var username = 'nanjolno'; // ユーザーID
	$.ajax({
		url: 'https://api.instagram.com/v1/users/search?q=' + username + '&access_token=' + accessToken,
		dataType: 'jsonp',
		success: function(data) {
			for (var i = 0; i < data['data'].length; i++) {
				// 近いusernameが複数出るので、一致するものを取得
				if(data['data'][i]['username'] == username) {
					console.log(data['data'][0]['id']); // 5001435
				}
			};
		}
	});
});

取得できる情報はこちらのページのRESPONSEをご確認ください。
後ほど記載しますが、アクセストークンが丸見えになるのはあまりよろしくないので、サンプルでは空の状態にしています。
ユーザーID取得のデモページ(アクセストークンを入れていないので動作しません)
 

投稿された画像の情報を取得

上記で取得したユーザーIDを使って、投稿された画像を取得してみます。

HTML

<div id="sample"></div>

CSS

#sample {
	width: 960px;
	margin: 0 auto;
}
#sample li {
	margin-bottom: 30px;
	border-bottom: #ccc 1px solid;
	padding-bottom: 20px;
}
#sample .instagram-image {
	float: left;
}
#sample .instagram-data {
	float: right;
	width: 800px;
}
#sample .instagram-like .like-user {
	float: left;
	margin-right: 20px;
	font-size: 11px;
}
#sample .instagram-comments {
	clear: both;
	padding-top: 10px;
}
#sample .instagram-comments .comments-user {
	overflow: hidden;
	margin-bottom: 10px;
}
#sample .instagram-comments .comments-user-icon {
	float: left;
	margin-right: 10px;
}

JavaScript

$(function() {
	var accessToken = 'アクセストークンをここに入れる';
	var userid = 5001435; // ユーザーID
	var count = 10; // 取得件数
	$.ajax({
		url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + accessToken + '&count=' + count,
		dataType: 'jsonp',
		success: function(data) {
			var insert = '<ul>';
			for (var i = 0; i < data['data'].length; i++) {
				insert += '<li>';

					// 画像とリンク先
					insert += '<a href="' + data['data'][i]['link'] + '" target="_blank">';
					insert += '<img src="' + data['data'][i]['images']['thumbnail']['url'] + '" class="instagram-image" />';
					insert += '</a>';

					insert += '<div class="instagram-data">';

						// 日付
						var d = new Date(data['data'][i]['created_time'] * 1000);
						var year  = d.getFullYear();
						var month = d.getMonth() + 1;
						var day  = d.getDate();
						insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>';

						// caption
						if(data['data'][i]['caption'] != null) {
							insert += '<p class="caption">' + data['data'][i]['caption']['text'] + '</p>';
						}

						// いいね
						insert += '<div class="instagram-like">';
						insert += '<div class="like-count">いいね数: ' + data['data'][i]['likes']['count'] + '</div>';
						if(data['data'][i]['likes']['data'] != null) {
							for (var j = 0; j < data['data'][i]['likes']['data'].length; j++) {
								insert += '<div class="like-user">';
								insert += '<img src="' + data['data'][i]['likes']['data'][j]['profile_picture'] + '" width="50" alt="" class="like-user-icon" />';
								insert += '<div class="like-user-name">' + data['data'][i]['likes']['data'][j]['username'] + '</div>';
								insert += '</div>';
							};
						}
						insert += '</div>';

					insert += '</div>'; // instagram-data END

					// コメント
					insert += '<div class="instagram-comments">';
					insert += '<div class="comments-count">コメント数: ' + data['data'][i]['comments']['count'] + '</div>';
					if(data['data'][i]['comments']['data'] != null) {
						for (var j = 0; j < data['data'][i]['comments']['data'].length; j++) {
							insert += '<div class="comments-user">';
							insert += '<img src="' + data['data'][i]['comments']['data'][j]['from']['profile_picture'] + '" width="50" alt="" class="comments-user-icon" />';
							insert += '<div class="comments-user-name">' + data['data'][i]['comments']['data'][j]['from']['username'] + '</div>';
							insert += '<p class="comments-user-text">' + data['data'][i]['comments']['data'][j]['text'] + '</p>';
							insert += '</div>';
						};
					}
					insert += '</div>';

				insert += '</li>';
			};
			insert += '</ul>';
			$('#sample').append(insert);
		}
	});
});

取得できる情報はこちらのページのRESPONSEをご確認ください。
投稿された画像の情報を取得するデモページ(アクセストークンを入れていないので動作しません)
 

データの取得をPHPで行う

上記サンプルで画像の取得は問題ないのですが、JavaScriptのみでInstagram APIを使おうとすると、アクセストークンが誰でも見られる状態になってしまいます。
アクセストークンが丸見えだと悪用される恐れもあるので、アクセストークンを使ったデータの取得はPHPで行い、json形式で出力して、そのjsonをJavaScriptで取得してみます。

※2015/09/29
データ取得後、必要な情報のみjson形式で出力するように変更しました。

PHP

<?php
$accessToken = 'アクセストークンをここに入れる';
$userid = 5001435; // ユーザーID
$count = 10; // 取得件数

$url = 'https://api.instagram.com/v1/users/' . $userid . '/media/recent?access_token=' . $accessToken . '&count=' . $count;
$jsonData = file_get_contents($url);

// jsonデータの整形・出力
$json = json_decode($jsonData, true);
echo json_encode($json["data"]);

PHPでデータ取得のデモページ

JavaScript

$(function() {
	$.ajax({
		url: 'get.php',
		dataType: 'json',
		success: function(data) {
			var insert = '<ul>';
			for (var i = 0; i < data.length; i++) {
				insert += '<li>';

					// 画像とリンク先
					insert += '<a href="' + data[i]['link'] + '" target="_blank">';
					insert += '<img src="' + data[i]['images']['thumbnail']['url'] + '" class="instagram-image" />';
					insert += '</a>';

					insert += '<div class="instagram-data">';

						// 日付
						var d = new Date(data[i]['created_time'] * 1000);
						var year  = d.getFullYear();
						var month = d.getMonth() + 1;
						var day  = d.getDate();
						insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>';

						// caption
						if(data[i]['caption'] != null) {
							insert += '<p class="caption">' + data[i]['caption']['text'] + '</p>';
						}

						// いいね
						insert += '<div class="instagram-like">';
						insert += '<div class="like-count">いいね数: ' + data[i]['likes']['count'] + '</div>';
						if(data[i]['likes']['data'] != null) {
							for (var j = 0; j < data[i]['likes']['data'].length; j++) {
								insert += '<div class="like-user">';
								insert += '<img src="' + data[i]['likes']['data'][j]['profile_picture'] + '" width="50" alt="" class="like-user-icon" />';
								insert += '<div class="like-user-name">' + data[i]['likes']['data'][j]['username'] + '</div>';
								insert += '</div>';
							};
						}
						insert += '</div>';

					insert += '</div>'; // instagram-data END

					// コメント
					insert += '<div class="instagram-comments">';
					insert += '<div class="comments-count">コメント数: ' + data[i]['comments']['count'] + '</div>';
					if(data[i]['comments']['data'] != null) {
						for (var j = 0; j < data[i]['comments']['data'].length; j++) {
							insert += '<div class="comments-user">';
							insert += '<img src="' + data[i]['comments']['data'][j]['from']['profile_picture'] + '" width="50" alt="" class="comments-user-icon" />';
							insert += '<div class="comments-user-name">' + data[i]['comments']['data'][j]['from']['username'] + '</div>';
							insert += '<p class="comments-user-text">' + data[i]['comments']['data'][j]['text'] + '</p>';
							insert += '</div>';
						};
					}
					insert += '</div>';

				insert += '</li>';
			};
			insert += '</ul>';
			$('#sample').append(insert);
		}
	});
});

データの取得元が変更されている以外は以前のサンプルと同じです。
dataTypeがjsonpからjsonに変更になっている点だけ注意ください。
投稿された画像の情報を取得するデモページ2

※2015/09/29
jsonの中身を変更したため、コードを変更しました。

 

今回はデータ取得をPHP、ページへの表示をJavaScriptで行いましたが、全てPHPで完結してしまっても問題ありません。
 

【参考サイト】

 

“Instagram APIを使ってみる” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP