JavaScript

Получаем фотографии из Instagram API с помощью jQuery

411
Получаем фотографии из Instagram API с помощью jQuery
Active vision

В этом туториале мы подключимся к API instagram и получим фотографии по тегу и по имени пользователя. Мы будем использовать jQuery ajax c учетом последних обновлений API.

API Инстаграма API Instagram

Быстрая навигация:

  1. # Получаем доступ к API Инстаграма
  2. # Получаем данные по ID пользователя
  3. # Получаем данные по имени пользователя
  4. # Получаем данные по тегу

Если вы ищите готовый плагин для wordpress, то присмотритесь к 10Web Social Photo Feed, а если собираетесь сделать все самостоятельно, то эта статья для вас. Она состоит из трех частей с примерами. Как вы поняли из заголовка речь пойдет только о получении фотографий. О прочих методах API мы расскажем в следующих статьях.

Получаем доступ к API Инстаграма

Как сгенерировать Access token

Для всех приведенных ниже примеров потребуется ключ доступа – access token. Получать его мы будем в 8 этапов:

  1. Войдите в инстаграм и откройте эту страницу https://instagram.com/developer/clients/manage. Instagram попросит у вас дополнительную информацию, заполните все поля формы.
  2. Нажмите кнопку Register Your Application (зарегистрируйте ваше приложение). Далее Register a New Client (регистрация нового клиента). Если у вас нет этих кнопок, подождите пока закончится модерация. Это может занять время.
  3. Регистрация в Instagram API Регистрация в Instagram API
  4. Заполните все поля формы, после этого вы увидите экран с вашим CLIENT ID, он нам понадобится. Затем нажмите кнопку MANAGE, чтобы увидеть CLIENT SECRET вашего только что зарегистрированного приложения. Его мы тоже будем использовать для получения токена.
  5. API Инстаграма client id CLIENT ID
  6. Далее скопируйте url ниже и вставьте его в адресную строку браузера. Замените CLIENT-ID и REDIRECT-URI на свои значения. Redirect uri - это адрес страницы вашего сайта на котором будет приложение, вы заполняли его ранее при регистрации.
  7. 
    URL
    https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code
    
  8. После того как вы нажали Enter загрузится страница, где приложение запросит у вас разрешение на доступ к базовой информации. Для получения фото нам этого будет достаточно. Нажмите Авторизовать.
  9. basic access Instagram API Доступ к базовой информации
  10. Нас перекинуло на пустую страницу. Все в порядке, так и должно быть, обратите внимание на адресную строку, после слова code= будет код, необходимый нам для получения токена. Сохраните его.
  11. Получение code для API Instagram Получение code
  12. Следующим шагом нам нужно отправить curl запрос, я это сделал через cmder. Запрос написан ниже, замените данные, которые выделены красным на свои.
  13. 
    curl -F 'client_id=CLIENT_ID' \
    -F 'client_secret=CLIENT_SECRET' \
    -F 'grant_type=authorization_code' \
    -F 'redirect_uri=AUTHORIZATION_REDIRECT_URI' \
    -F 'code=CODE' \
    https://api.instagram.com/oauth/access_token
    
  14. В случае успеха вам вернется ответ в котором будет такая строка: "access_token": "fb2e77d.47a0479900504cb3ab4a1f626d174d2d". Это и есть ваш токен.

Вы наверняка обратили внимание во вкладке Manage Clients на надпись CLIENT STATUS: Sandbox Mode.

Несколько фактов о Sandbox Mode (режиме песочницы)

  • Все вновь созданные приложения запускаются в режиме песочницы
  • Приложения в режиме песочницы имеют доступ только к 20 последним медиа владельца токена.
  • Чтобы снять эти ограничения, вам нужно будет отправить приложение на утверждение.

1Получаем данные по ID пользователя

На самом деле, это единственный пример в этой статье, который работает правильно в режиме песочницы. Ниже представлен рабочий код для получения фотографий из инстаграма на свой сайт через апи Инстаграма. Все что вам нужно сделать, это поменять access_token и userid на свой.

Чтобы узнать свой id зайдите в свой Инстаграм, перейдите в инструменты разработчика в браузере (или откройте исходный код страницы) и вбейте в поиск (CTRL+F) такую фразу "id":

HTML
<ul id="av_instafeed"></ul>

JS
var token = 'access_token', // ваш токен
    userid = 12345678910, // id пользователя
    num_photos = 10; // Количество фотографий, которые вы хотите получить

$.ajax({
	url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: token, count: num_photos},
	success: function(data){
 		console.log(data);
		for( x in data.data ){
			$('#av_instafeed').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');
			// data.data[x].link - URL поста в Инстаграме
			// data.data[x].images.standard_resolution.url - URL изображений 612х612
		}
	},
	error: function(data){
		console.log(data); // отправим сообщение в консоль, если появятся ошибки
	}
});

Отлично, мы получили 10 изображений из своего профиля в Инстаграме в наш ul список. Напишите css стили и наслаждайтесь отлично проделанной работой!

2Получаем данные по имени пользователя

Конечно, вы можете искать id пользователя в HTML-коде инстаграм всякий раз когда вам это будет нужно.

Но не кажется ли вам, что было бы лучше получать userid автоматически? Особенно для вашего собственного плагина или приложения. Это будет как минимум удобно для ваших пользователей, они смогут просто указать свое имя и пользоваться приложением.

Этот пример не работает в режиме песочницы.


JS
var token = 'access_token',
  username = 'ваш_username',
  num_photos = 10;

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

3 Получаем данные по тегу

В последней часте статьи api instagram на русском мы найдем изображения по тегу. Такой функционал тоже очень популярен и его не так сложно реализовать.

Если ваше приложение находится в Sandbox Mode, вы можете получить только свои собственные картинки с тегами. И помните, что ваше приложение имеет доступ только к последним двадцати.


JS
var token = 'access_token',
  hashtag='wordcamp2019', // хэштег без символа #
  num_photos = 10;

$.ajax({
  url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent',
  dataType: 'jsonp',
  type: 'GET',
  data: {access_token: token, count: num_photos},
  success: function(data){
  	console.log(data);
  	for(x in data.data){
  		$('#av_instafeed').append('<li><img src="'+data.data[x].images.standard_resolution.url+'"></li>');
  	}
  },
  error: function(data){
  	console.log(data);
  }
});

Если у вас есть вопросы по статье api instagram на русском, оставьте их в комментариях.

2 комментария

  • kostia7alania bazrov Новый пользователь
    13 октября 2019 16:46
    вместо CURL я отправил пост-запрос FETCH'ем. Зачем в 2к19 юзать дж квери.
    А вот вопрос в другом: все jsonp-запросы к данным в результате получаются с ошибкой 405. ПОчему? Песочница мешает?

    -> SOURCE:

    access_token = "7894762974.sex" // ваш токен
    userid = 7894762974 // id пользователя
    hashtag='kostia7alania'
    count = 10;
    body = new FormData();
    body.append('userid',userid)
    body.append('access_token',access_token)
    body.append('count',count)
    body.append('hashtag',hashtag)
    // url = 'https://api.instagram.com/v1/users/' + userid + '/media/recent?'
    url = 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent'
    opt = {method: 'jsonp', body}
    fetch(url,opt)[/code]
    • Дмитрий Белов Миллиардер, филантроп
      Active vision 13 октября 2019 20:35
      Метод fetch() не будет корректно работать с Instagram API.
      Если вы не хотите использовать jQuery попробуйте такой код:

      var access = 'хххххх', //ваш токен
      num_photos = 10,
      list = document.getElementById( 'av_instafeed' ), // ul в который добавим медиа
      scrElem = document.createElement( 'script' );

      window.getMediaResult = function( data ) {
      for( i in data.data ) {
      list.innerHTML += '<li><img src="' + data.data[i].images.low_resolution.url + '"></li>';
      }
      }

      scrElem.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + access + '&count=' + num_photos + '&callback=getMediaResult' );
      document.body.appendChild( scrElem );

Написать комментарий