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

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

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

Для тех, кто попал сюдя в поисках уже готового решения, пожалуйста, посмотрите мой плагин для WordPress, в нём уже всё настроено и оптимизировано, осталось только установить на сайт и использовать.

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

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

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

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 = 'rudrastyh', // имя пользователя, rudrastyh - это я :)
    kolichestvo = 4;
 
$.ajax({ // первый ajax запрос возвратит нам ID пользователя rudrastyh
	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), то для ознакомления.

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

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 4

  • seredniy16 января 2016 в 11:01 #

    Приветы. Я думаю ты в курсе событий в api инстаграма.

    Этот код и код из прошлой статьи не будет работать с новыми приложениями (созданными после 17 ноября 2015) , поскольку теперь нужно добавлять access_token к get запросам.

    Более того, нужно подбирать токен с корректным scope...

    А что ещё хуже - приложение теперь работает в режиме песочницы и ты можешь играться только с фото, лайками и комментариями из своего профиля или другого пользователя твоей песочницы.

    Простыми словами халява закончилась, ведь пройти approve и выйти в полнофункциональное приложение стало очень трудно.

    Да и старые приложения (той плагин тоже?) проработают в таром режиме всего до июня 2016 и будцт переведены в песочницу.

    Что ты про это думаешь и как теперь быть?

    • Миша17 января 2016 в 06:01 #

      Привет!

      Наверное я тебя разочарую с ответами.

      Нет, я не в курсе ожидаемых событий.
      Если вдруг что-то перестанет работать, выход найдётся. Так было всегда.

      • seredniy18 января 2016 в 19:01 #

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

    • Миша16 июня 2016 в 07:06 #

      Ну что же, вот уже 16 июня, и всё работает. Я же говорил, выход найдётся :)

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Владимир: и на третьей строке не хватает скобки ) закрывающей if :)

  • Миша: Добрый вечер! Рекомендую получить ID пользователя через функцию get_current_user_id().

  • Дмитрий: Миша, подскажите пожалуйста, я использую такой редирект, но он не срабатывает: add_action( 'template_redirect', funct...

  • Миша: Ну как не определена - это аргумент функции. Или я просто вас не до конца понимаю.

  • Артем: Ага, понял. Вот только почему $args? Она же нигде не определена, по логике должна быть переменная $true_field_params или...