Как подключить свою ленту Instagram на сайт без внешних ссылок

В интернете встречается много статей о том, как подключить свою ленту Instagram на сайте, но чтобы выполнить подключение самостоятельно по таким инструкциям нужно обладать немалыми навыками в веб-разработке. Для тех, кто совсем не может сделать подключение со стороны сайта самостоятельно, есть сервисы, которые позволяют размещать на своих сайтах такой виджет. Как правило, такой виджет имеет прямую внешнюю ссылку на сайт поставщика этого решения – такое решение мне не нравится. В этом посте я рассказываю о размещении ленты Инстаграм на своем сайте с помощью виджета, который показывает только ваши фото.

Раньше Инстаграм позволял всем пользователям получать доступ ко всем публичным данным через API, но в 2016 году они пересмотрели свою политику и для получения даже базовых функций нужно получать разрешение индивидуально. Это значительно усложнило работу разработчикам, но функциональность, которая позволяет работать со своей лентой, доступна в «Песочнице». В этой статье я расскажу, как можно подключить свою ленту Инстаграм на своём сайте.

Для реализации инструкции вам потребуется:

1. Иметь учётную запись в Инстраграм (профиль должен быть открытым).
2. Иметь доступ к админке сайта, т.е. у вас должна быть возможность разместить PHP-скрипт в файл ИЛИ иметь доступ к файловой системе по FTP.
3. Вы должны обладать определенным опытом работы с сайтом, но при этом быть программистом не обязательно.

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

Регистрация приложения в Instagram

1. Первым делом авторизуйтесь в своей учётной записи Инстаграм на сайте с компьютера. http://instagram.com
2. Зарегистрируйтесь как разработчик приложения по адресу https://www.instagram.com/developer/register/
   Заполните форму, в которой укажите ваш номер телефона, сайт, а также то, зачем вам нужно быть разработчиком.
   
3. После отправки формы вам станет доступным создание приложения
   
4. На странице Manage Сlients нажмите зеленую кнопку Register a New Client – зарегистрировать новое приложение
5. Заполните форму, обратите внимание, что название приложения не должно содержать слова instagram, insta, IG, gram – в скриншоте ниже в поле название приложения как раз стоит Instagram – это приводит к ошибке сохранения формы, поэтому я указал название MyFeed. Важно в поле Valid redirect URIs указать ссылку до файла, в котором будет размещен PHP код приведенный в этой статье.
   
6. После нажатия Register перейдите в управление приложением. Нажмите на кнопку MANAGE на карточке приложения
   
7. Внутри карточки вашего приложения будут отображаться ваши ключи – Client ID и Client Secret – эти значения нужно разместить в коде в кавычках.
   
   Ваше приложение готов к работе. Следующий шаг – получить Токен.

Разместить код PHP на сайте, чтобы получить Токен

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

Вставлю код в футер PHP-код. PHP-код должен вставляться в тег <?php   здесь содержимое скрипта   ?>

$email = " "; //Сюда вставить ваш емайл
$client_id=" "; //Сюда вставить ваш CLIENT_ID
$client_secret=" "; //Сюда вставить ваш CLIENT_SECRET
$uri = " "; //Сюда вставить адрес страницы, на которой вы разместите этот скрипт.
//$token = " "; //Сюда вставить полученный в почту Токен и после этого можно убрать // в начале этой строки

function getCurl($data, $url) {
      $ch = curl_init();
      $post_data = $data;
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($ch, CURLOPT_HEADER, 0);
      curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
      $output = curl_exec($ch);
      curl_close($ch);
      return $output;
};

if($_REQUEST["code"]) {
// Получение токена, если есть код
      $data = array("client_id" => $client_id,"client_secret" => $client_secret,"grant_type" => "authorization_code","code"=> $_REQUEST["code"],"redirect_uri" => $uri);
      $res = getCurl($data, "https://api.instagram.com/oauth/access_token");
      $access_token = json_decode($res)->access_token;
      mail($email, "New access_token", $access_token);
}elseif($token == ""){
//Переход к авторизации, получение Кода для получения токена
      echo'<a href="https://api.instagram.com/oauth/authorize/?client_id='.$client_id.'&response_type=code&redirect_uri='.$uri.'">Go to auth</a>';
}else{
      $access_token = $token;
}

if($access_token != ""){
//Запрос своих Media
      $res = json_decode(file_get_contents( 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' . $access_token ))->data ;

//Шаблон вывода в этом случае просто выводятся картинки.
      foreach($res as $item) {
             echo"<img src='".$item->images->low_resolution->url."'>";
      }
}

$token = "Сюда вставил токен"; //Сюда вставить полученный в почту Токен и после этого можно убрать // в начале этой строки