2064 
8 
Фото из инстаграма с помощью AJAX
Недавно мы писали о том, как загрузить последние фотографии из инстаграма на ваш сайт. Один из читателей попросил вывести фото после загрузки страницы, чтобы ускорить время загрузки самой страницы. Поэтому мы решили опубликовать статью о том, как вывести фото из инстаграма с помощью AJAX после полной загрузки страницы.
Для начала нам нужно создать файл ajax.php, в которой напишем функцию получения фото из инстагарма (более подробно тут):
<?php // Get our data function fetchData( $url ){ $ch = curl_init(); curl_setopt( $ch, CURLOPT_URL, $url ); curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 ); curl_setopt( $ch, CURLOPT_TIMEOUT, 20 ); $result = curl_exec( $ch ); curl_close( $ch ); return $result; } function instagram_feed( $instagram_token, $instagram_id ) { if ( $instagram_token != '' && $instagram_id != '' ){ // Pull and parse data. $result = fetchData( "https://api.instagram.com/v1/users/{$instagram_id}/media/recent/?access_token={$instagram_token}" ); $result = json_decode( $result ); $limit = 10; // Amount of images to show $i = 0; foreach ( $result->data as $post ){ if ( $i < $limit ){ echo '<a class="insta-wrap__link" rel="nofollow noopener noreferrer" target="_blank" href="' . $post->link . '">'; echo '<img class="insta-wrap__image" src="' . $post->images->thumbnail->url . '" alt="">'; echo '</a>'; $i ++; } } } } $instagram_token = 'xxx'; $instagram_id = 'xxx'; if ( $instagram_token !='' && $instagram_id != '' ) { ?> <div class="insta-wrap"> <?php instagram_feed( $instagram_token, $instagram_id ); ?> </div> <?php } ?> |
Переменная $instagram_token — это Instagram Access Token (как его получить можно узнать, прочитав статью. $instagram_id = можно узнать, например, здесь. Просто замените xxx на свои данные и вы получите список своих последних фотография из инстаграма.
Далее приведем код самой страницы:
<html lang="ru-RU" prefix="og: http://ogp.me/ns#"> <head> </head> <body> <div class="instagram-feeds"> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(window).on('load', function(){ $.ajax({ type: 'POST', url: 'ajax.php', success: function(data){ $('.instagram-feeds').html(data); } }); }); </script> </body> </html> |
Вот и все, не забудьте подключить jQuery библиотеку, если она не подключена, заменить $instagram_token и $instagram_id, а также правильно прописать путь к файлу ajax.php. Мы протестировали данный вариант и скорость загрузки простой страницы с десятью фотографиями из инстаграма в среднем увеличилась в 3 раза! Пишите, если возникнут вопросы, мы всегда рады помочь.
Подписывайтесь на наш Telegram канал, чтобы не пропускать наши статьи 😎
Пробовали. Не работает!
Добрый день.
Давайте разбираться, что не работает? Выдает какие-нибдь ошибки?
В первую очередь нужно перепроверить client_id и token из инстаграмма.
Не работает, выдает ошибку — Invalid argument supplied for foreach() in 291
Что делать?
Значит вы не получаете данных из инстаграма. Проверьте $instagram_id и $instagram_token.
Токен нужно получить для аккаунта, из которого берутся фото? Я получил токен для своего аккаунта, а id взял от другого. Может быть ошибка из-за того, что токен теперь надо через facebook получать?
По идее, токен и id должны быть от одного аккаунта. Насчет фейсбука не уверен, так как мои примеры я не переделывал под новые правила и они до сих пор работают.
Сделал всё как по инструкции
Invalid argument supplied for foreach()
foreach ( $result->data as $post ){
Значит, что результаты от инстаграма не получены. Нужно проверить правильны ли токен и id.