Лента instagram на сайте, 2 способа: с API, и без использования API

Отредактировано: 30 Декабря 2018

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

Получение Access Token

Для создания ленты инстаграмм на сайте вам понадобиться получить Access Token. Срок действия Access Token не вечен, по истечении срока процедуру придется повторить.

Access Token можно получить несколькими путями.

Простой путь получения Access Token

Через сайт instagram.pixelunion.net Просто нажмите на кнопку, а в предложенном окне входа выбирете аккаунт, авторизуйтесь, или зарегистрируйтесь. На выходе вы получите Access Token для вашего аккаунта.

Сложный путь получения Access Token

Самостоятельно зарегистрироваться в instagram API. При регистрации от вас захотят получить телефон, адрес web сайта и ответ на вопрос зачем вам необходим доступ к API. В качестве ответа можете написать — widget on a website.

После регистрации, в панели администрирования клиентов, нажмите кнопку «Register a New Client», в которой от вас тоже захотят увидеть подробности:

Application name — название приложения. Нельзя использовать производные от слов Instagram, IG, Insta или gram.

Description — описание.

Website — сайт. Неважно, какой сайт вы укажите в этом поле — вывод фотографий по тегу будет работать в любом случае, даже на локалке. Указывать URL нужно с http://.

OAuth redirect_uri — куда перенаправлять пользователя после авторизации приложения или отмены — тут важно указать URL, который нужен в инструменте получения токена.

После того как заполните и отправите данные клиента, при изменении данных клиента можно будет увидеть CLIENT ID и CLIENT SECRET.

Для получения Access Token из этих данных можно использовать 2 метода:

1. Небезопасный метод: ввести в браузере ссылку в которой CLIENT-ID заменить на полученный в процессе регистрации ID, а REDIRECT-URL заменить на адрес который был введен в поле OAuth redirect_uri. Код ссылки: 

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

2. Безопасный метод: введите в браузере ссылку для запроса параметра code, в которой CLIENT-ID заменить на полученный в процессе регистрации ID, а REDIRECT-URL заменить на адрес который был введен в поле OAuth redirect_uri. Код ссылки: 

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

   Браузер предложит вам авторизоваться, после чего перекинет на указанный сайт, а в адресной строке в конце вы сможете найти код. Скопируйте его. Дальше, для получения самого токена используйте следующий php фрагмент (в случае если используете MODX, вставьте в снипет и выведете на скрытой странице):

    $fields = array(
              'client_id'     => 'YOUR-CLIENT-ID',
              'client_secret' => 'YOUR-CLIENT-SECRET',
              'grant_type'    => 'authorization_code',
              'redirect_uri'  => 'YOUR-REDIRECT-URI',
              'code'          => 'YOUR-CODE'
       );
       $url = 'https://api.instagram.com/oauth/access_token';
       $ch = curl_init();
       curl_setopt($ch, CURLOPT_URL, $url);
       curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
       curl_setopt($ch, CURLOPT_TIMEOUT, 20);
       curl_setopt($ch,CURLOPT_POST,true); 
       curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
       $result = curl_exec($ch);
       curl_close($ch); 
       $result = json_decode($result);
       return $result->access_token; //your token

   • client_id: параметр Client Id
   • client_secret: параметр Client Secret 
   • grant_type: authorization_code в настоящее время является единственным поддерживаемым значением
   • redirect_uri: OAuth redirect_uri, который вы использовали в запросе авторизации. 
   • code: точный код, который вы получили на этапе авторизации.

Вывод ленты Instagram на сайте

После того как получили Access Token, используйте следующий код (в случае если у вас MODX, вставьте данный код в сниппет и вызовите в нужном месте):

<?php
$token = 'ACCESS TOKEN';

$user_id = 'self';
$instagram_cnct = curl_init(); // инициализация cURL подключения
curl_setopt( $instagram_cnct, CURLOPT_URL, "https://api.instagram.com/v1/users/" . $user_id . "/media/recent?access_token=" . $token ); // подключаемся
curl_setopt( $instagram_cnct, CURLOPT_RETURNTRANSFER, 1 ); // просим вернуть результат
curl_setopt( $instagram_cnct, CURLOPT_TIMEOUT, 15 );
$media = json_decode( curl_exec( $instagram_cnct ) ); // получаем и декодируем данные из JSON
curl_close( $instagram_cnct ); // закрываем соединение
 
// количество фотографий для вывода
$limit = 8;

// функция array_slice() задает количество элементов, которые нам нужно получить из массива
// если нужно вывести все фото, тогда: foreach($media->data as $data) {
foreach(array_slice($media->data, 0, $limit) as $data) {
     $output .= '<a href="' . $data->link . '" target="_blank">
          <img src="'. $data->images->low_resolution->url . '">
          </a>';
}

return $output;

Также, если у вас MODX, то для удобства можно вынести html в отдельный чанк:

// создаем чанк с html разметкой, к примеру tpl.instafeed-item
<a href="[[+link]]" target="_blank">
   <img src="[[+img]]" alt="">
</a>

// в сниппете добавляем строку определяющую шаблон
$tpl = $modx->getOption('tpl',$scriptProperties,'tpl.instafeed-item');

// данные блока foreach заменяем на
$dataArray = array(
    'link' => $data->link,
    'img' => $data->images->low_resolution->url
    );
    
$output .= $modx->getChunk($tpl,$dataArray);

Для корректной работы на хостинге / сервере должна быть установлена библиотека cURL

Доступные параметры: 

$data->id  — ID публикации.

$data->link  — ссылка на это изображение в Instagram.

$data->images->low_resolution->url — URL копии изображения низкого разрешения (306×306).

$data->images->thumbnail->url — URL изображения-миниатюры (150×150).

$data->images->standard_resolution->url — URL копии изображения стандартного разрешения (612×612).

$data->tags — массив, содержащий все теги данного изображения.

$data->filter — название используемого фильтра.

$data->caption->text — описание фото.

$data->created_time — дата публикации в UNIX-формате. Мы можем изменить формат даты при помощи функции gmdate():

echo gmdate("Y-m-d H:i", $data->created_time);

$data->user->username — имя пользователя, который запостил фотографию.

$data->user->id — ID пользователя.

$data->user->full_name — полное имя пользователя.

$data->user->profile_picture — URL аватарки пользователя.

$data->comments->count — количество комментариев к изображению.

$data->comments->data — массив объектов комментариев, из которого можно извлечь отдельные записи с помощью цикла foreach:

// выводим текст каждого комментария и имя пользователя, оставившего его
foreach( $data->comments->data as $comment ) :
	echo '<p><strong>' . $comment->from->username . '</strong><br />' . $comment->text . '</p>';
endforeach;

Параметры комментариев:

$comment->created_time — дата публикации комментария в UNIX формате.

$comment->id — ID комментария.

$comment->text — текст комментария.

$comment->from->username — имя пользователя, оставившего комментарий.

$comment->from->id — ID пользователя.

$comment->from->full_name — полное имя пользователя.

$comment->from->profile_picture — URL аватарки пользователя.

$data->likes->count — количество «лайков».

$data->likes->data — массив объектов пользователей, которым понравилась фотография, также можно пропустить через цикл foreach:

// имена пользователей, которым понравился пост
foreach( $data->likes->data as $user ) :
	echo $user->username . '<br />';
endforeach;

$user->id — ID пользователя.

$user->username — имя пользователя.

$user->full_name — полное имя.

$user->profile_picture — URL аватарки.