Фото из инстаграма с помощью 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 != '' &amp;&amp; $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" 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 !='' &amp;&amp; $instagram_id != '' ) { ?>
        <div class="insta-wrap">
            <?php instagram_feed( $instagram_token, $instagram_id ); ?>
        </div>
    <?php }
?>

Переменная $instagram_token — это Instagram Access Token (как его получить можно узнать, прочитав статью. $instagram_id = можно узнать, например, здесь. Просто замените xxx на свои данные и вы получите список своих последних фотография из инстаграма.

Далее приведем код самой страницы:

<html>
<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', // путь к вашему файлу с php кодом
            success: function(data){ // при успешном выполнении помещаем фото в контейнер .instagram-feeds
                $('.instagram-feeds').html(data);
            }
        });
    });
</script>
</body>
</html>

Вот и все, не забудьте подключить jQuery библиотеку, если она не подключена, заменить $instagram_token и $instagram_id, а также правильно прописать путь к файлу ajax.php. Мы протестировали данный вариант и скорость загрузки простой страницы с десятью фотографиями из инстаграма в среднем увеличилась в 3 раза! Пишите, если возникнут вопросы, мы всегда рады помочь.

Демо Исходники

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Подписывайтесь на наш Telegram канал, чтобы не пропускать наши статьи 😎

Оцените нашу статью
4.83/56
Комментарии (0)
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *