Instagram APIでタグに関連する画像を取得する

Instagramのタグに関連する画像を取得してみます。

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

サンプルコード

APIを使ったデータの取得をPHPで、表示部分をJavaScriptで実装してみます。
基本的な使い方は以前記事を投稿していますので、そちらをご確認ください。
Instagram APIを使ってみる | cly7796.net

PHP

<?php
$accessToken = 'アクセストークンをここに入れる';
$tagname = rawurlencode('ラブライブ'); // タグを指定

$url = 'https://api.instagram.com/v1/tags/' . $tagname . '/media/recent?access_token=' . $accessToken;
$jsonData = file_get_contents($url);

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

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'] + '" width="150" 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>';

						// 投稿者
						insert += '<div class="instagram-user">';
						insert += '<img src="' + data[i]['user']['profile_picture'] + '" width="50"  alt="" class="user-icon" />';
						insert += '<p class="user">投稿者:<br />' + data[i]['user']['username'] + '</p>';
						insert += '</div>';

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

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

					// いいね
					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 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);
		}
	});
});

指定したタグが付いた最新の投稿を取得しています。
取得できる情報はこちらのページのRESPONSEをご確認ください。
タグに関連した画像を取得するデモページ
　

【参考サイト】

• Tag Endpoints • Instagram Developer Documentation
• PHP: rawurlencode – Manual