Фото з інстаграма за допомогою 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 рази! Пишіть, якщо виникнуть питання, ми завжди раді допомогти.

Demo Source

Ви блокуєте рекламу

Будь ласка, вимкніть блокування реклами

Детальніше

>Підписуйтесь на наш Telegram канал, щоб не пропускати наші статті 😎