Вернуться обратно в Блог

Как вывести ленту Instagram на сайте? Именно такой вопрос поселился в моей голове в процессе реализации одного FUN-проекта.

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

Для работы с API Instagram нам понадобится создать приложение-клиент в инстаграмм и получить Сlient ID и Access Token.

Как получить токен.

Авторизуемся на сайте Instagram.com/developer
Регаем нового клиента. Для этого жмем на кнопку Manage Clients вверху экрана, а затем жмем на кнопку Register a New Client.
Заполняем форму.
Далее переходим на вкладку Security и снимаем галку с Disable implicit OAuth - это важно!

После отправки формы нам дадут Client ID. Сохрани его!

В адресную строку браузера вставляем

https://instagram.com/oauth/authorize/?client_id=[ТВОЙ_ID]&redirect_uri=[ТО, ЧТО ВПИСАЛ В Valid redirect URIs]&response_type=token

Должно получиться что-то вроде этого, только с твоим ID и Valid redirect URIs

https://instagram.com/oauth/authorize/?client_id=9794df922c0b480e948a77d3d87d865&redirect_uri=http://sliderweb.ru&response_type=token

Если все сделано верно, то переход, по сформированной таким образом ссылке в строке браузера, перенаправит тебя на твой же сайт (или что ты указал в Valid redirect URIs), а в конце будет красоваться токен:

https://sliderweb.ru/#access_token=188494716.9794df9.4f23c55f2e9414193de4efb23d747

В данном случае то, что идет до первой точки - UseID, а все вместе и есть токен.

UserID: 188494716

Token: 188494716.9794df9.4f23c55f2e9414193de4efb23d747

Как вывести ленту на сайте

Подключаемся к API и получаем JSON

<?php 
function instagram_api( $link ){
    $instagram = curl_init(); // инициализируем соединение
    curl_setopt($instagram, CURLOPT_URL, $link); // к этому URL будем подключаться
    curl_setopt($instagram, CURLOPT_RETURNTRANSFER, 1); // возвращать, а не распечатываь результат
    curl_setopt($instagram, CURLOPT_TIMEOUT, 20); // таймаут
    $json_result = curl_exec($instagram); // подключаемся, получаем данные
    curl_close($instagram); // закрываем соединение
    return json_decode( $jфson_result ); // декодируем из json и возвращаем результат
}
$access = '188494716.9794df9.4f23c55f2e9414193de4efb23d747';
$user_id = '188494716'; // если приложение в песочнице, то проще тут указать "self"
$result = instagram_api("https://api.instagram.com/v1/users/" . $user_id . "/media/recent?access_token=" . $access. "&count=20");
?>

Далее, там, где необходимо вывести ленту, используем данные из JSON.

Пример выводит фотографии в максимальном разрешении ($post->images->standard_resolution->url), описание ($post->caption->text) и дату поста ($post->created_time):

<?php 
foreach ($result->data as $post) {
    $post_date = date('d/m/Y', $post->created_time);    

    echo 
    '<article class="thumb">
    <a id="insta-' . $post->id . '
    " href="' . $post->images->standard_resolution->url . '
    " class="image ' . $post->filter . '
    "><img src="' . $post->images->standard_resolution->url . '
    " /></a>
    <h2>' . $post->caption->text . '</h2>
    <p>' . $post_date . '</p>
    </article>';
}
?>

Готово!

PS: Есть одно ограничение - неутвержденные приложения имеют ограничение на 20 последних записей. Хотите больше - отправляйте приложение на прверку и ждите утверждения. Мне это показалось "мутным" и я не заморачивался.

Posted in #япочинил, Полезности on июл 25, 2019.

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

Вернуться обратно в Блог

Как получить токен.

Как вывести ленту на сайте

Готово!