Выводим фото из Инстаграм через JavaScript API: по ID пользователя, по имени пользователя, по тегу

Когда-то очень давно (более года) назад я публиковал пост про работу с API Инстаграм при помощи PHP.

Теперь же я собираюсь выпустить серию статей по работе с API Инсты.

Данный пост будет состоять из нескольких частей и примеров. Как вы уже поняли из заголовка, в основном всё будет основываться на выводе фото. По сути это самый востребованный функционал. Другие методы я рассмотрю уже в отдельной статье.

Прежде всего хочу сказать, что во всех примерах вам понадобится Access Token — получить его легко и просто, смотрите мою инструкцию здесь.

И ещё кое-что — в соответствии с изменениями в API Инстаграм, неавторизованные приложения (песочница) имеют доступ только к последним 20 фото/видео своего собственного пользователя! Хотите избежать этих ограничений? У вас есть два выхода: отправить своё приложение на аппрув, либо забить.

1. По ID пользователя

Итак, сразу говорю, что я работаю с jQuery и поэтому все примеры будут основываться на нём. Это также само собой подразумевает, что потребуется два подготовительных шага, о существовании которых некоторые из читающих эту статью могу не знать:

1. У вас должна быть подключена библиотека jQuery.
2. Код из последующих примеров нужно вставить в какое-либо событие, например событие при загрузке страницы сайта:

   jQuery(function($){
   /* тут код */
   });

И наконец, сам пример:

var tok = 'ваш Access Token', // я уже давал ссылку чуть выше
    userid = 1362124742, // ID пользователя, можно выкопать в исходном HTML, можно использовать спец. сервисы либо просто смотрите следующий пример :)
    kolichestvo = 4; // ну это понятно - сколько фоток хотим вывести
 
$.ajax({
	url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: tok, count: kolichestvo}, // передаем параметры, которые мы указывали выше
	success: function(result){
 		console.log(result);
		for( x in result.data ){
			$('ul').append('<li><img src="'+result.data[x].images.low_resolution.url+'"></li>'); // result.data[x].images.low_resolution.url - это URL картинки среднего разрешения, 306х306
			// result.data[x].images.thumbnail.url - URL картинки 150х150
			// result.data[x].images.standard_resolution.url - URL картинки 612х612
			// result.data[x].link - URL страницы данного поста в Инстаграм 
		}
	},
	error: function(result){
		console.log(result); // пишем в консоль об ошибках
	}
});

2. По имени пользователя

Конечно, сейчас существует куча сервисов и для того, чтобы узнать ID того или иного пользователя, достаточно лишь нажать кнопку.

Но согласитесь, гораздо интереснее, если всё это будет делаться автоматически. А если у вас своя программа/плагин/приложение, которое вы пишете для людей, тогда это просто необходимое условие.

var tok = 'ваш Access Token',
    username = 'misha', // имя пользователя
    kolichestvo = 4;
 
$.ajax({ // первый ajax запрос возвратит нам ID пользователя
	url: 'https://api.instagram.com/v1/users/search',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: tok, q: username}, // по сути это просто поиск пользователя по его имени
	success: function(result){
		console.log(result);
		$.ajax({
			url: 'https://api.instagram.com/v1/users/' + result.data[0].id + '/media/recent', // указываем ID первого найденного
			dataType: 'jsonp',
			type: 'GET',
			data: {access_token: tok, count: kolichestvo},
			success: function(result2){
				console.log(result2);
				for(x in result2.data){
					$('ul').append('<li><img src="'+result2.data[x].images.thumbnail.url+'"></li>');  
				}
    			},
			error: function(result2){
				console.log(result2);
			}
		});
	},
	error: function(result){
		console.log(result);
	}
});

Можно ли вывести фото по тегу (тегам) какого-то конкретного пользователя?

Самое главное, что вам нужно знать, то что для этого не потребуется ничего сверхестественного, достаточно лишь открыть документацию API Инстаграмма и поразбираться в массивах данных JavaScript.

Если разбираться не хочется, можете просто скачать мой плагин, там эта возможность уже предусмотрена.

3. По тегу

Второй по востребованности и популярности функционал — это вывод фотографий из инсты по тегу. Делается ещё проще, чем по имени пользователя.

var clientid = 'ваш Access Token',
    metka='wordcamprussia2015', // ну это тег, понятное дело, символ # ставить не нужно
    kolichestvo = 4;
 
$.ajax({
	url: 'https://api.instagram.com/v1/tags/' + metka + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: tok, count: kolichestvo},
	success: function(result){
		console.log(result);
		for(x in result.data){
			$('ul').append('<li><img src="'+result.data[x].images.standard_resolution.url+'"></li>');  
		}
	},
	error: function(result){
		console.log(result);
	}
});

Можно ли вывести фото по нескольким тегам?

Можно. И опять-таки, я не буду загружать этот пост длинным кодом и просто порекомендую скачать мой плагин — если не для использования (возможно у вас не WordPress), то для ознакомления.

Любые вопросы оставляйте пожалуйста в комментариях, постараюсь ответить каждому.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.