Последние фото из инстаграма на PHP

Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Чтобы вывести последние фото из инстаграма на PHP, необходимо написать 2 функции. В первой мы обратимся к API инстаграма:

	// 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" target="_blank" href="' . $post->link . '">';
                    echo '<img class="insta-wrap__image" src="' . $post->images->thumbnail->url . '" alt="">';
                    echo '</a>';
                    $i ++;
                }
            }
        }
    }

В $post->images->thumbnail->url можно заменить thumbnail на другие значения, чтобы получить фотографии с различным разрешением:

  • thumbnail — 320*320px;
  • low_resolution — 150*150px;
  • standard_resolution — 640*640px;

И, наконец, запускаем функцию вывода там, где нам это нужно:

<div class="instagram-feeds">
    <?php
        $instagram_token = 'xxx';
        $instagram_id = 'xxx';
        if ( $instagram_token !='' && $instagram_id != '' ) { ?>
            <div class="insta-wrap">
                <?php instagram_feed( $instagram_token, $instagram_id ); ?>
            </div>
        <?php }
    ?>
</div>

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

Полный код:

<?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" target="_blank" href="' . $post->link . '">';
                    echo '<img class="insta-wrap__image" src="' . $post->images->thumbnail->url . '" alt="">';
                    echo '</a>';
                    $i ++;
                }
            }
        }
    }
?>

<div class="instagram-feeds">
    <?php
        $instagram_token = 'xxx';
        $instagram_id = 'xxx';
        if ( $instagram_token !='' && $instagram_id != '' ) { ?>
            <div class="insta-wrap">
                <?php instagram_feed( $instagram_token, $instagram_id ); ?>
            </div>
        <?php }
    ?>
</div>
Демо

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

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

Оцените нашу статью
4.43/514
Комментарии (8)
  1. Иванй Ноябрь 13, 2017, 08:52

    Все бы хорошо, да вот только, из-за вывода скорость загрузки страницы падает сильно. Может есть какой-то вариант с выводом фото, после того как страница прогрузилась. Так как у меня фото из инсты выводятся в футере, то мне было бы актуально.

    • Anton Andriyan Ноябрь 13, 2017, 10:47

      Вам нужно использовать AJAX загрузку, повесив ее на событие $(window).load(function(){});
      Постараемся в ближайшее время написать инструкцию, как это сделать

      • Иван Ноябрь 13, 2017, 14:46

        Жду очень сильно, спасибо!

        • Anton Andriyan Ноябрь 13, 2017, 20:42

          Написали о том, как вывести фото из instagram через ajax — статья по ссылке

  2. Иван Ноябрь 13, 2017, 16:11

    очень кстати симпатично реализован у вас здесь на странице вывод внизу фото из инстаграм, не поделитесь ?=)

    • Anton Andriyan Ноябрь 13, 2017, 17:18

      Вы имеете в виду стилизацию блока?

      • Иван Ноябрь 13, 2017, 20:23

        ну то, что когда наводишь они увеличиваются,

        • Anton Andriyan Ноябрь 13, 2017, 20:57

          Для вашего сайта добавьте такие стили:

          .insta-wrap {
          overflow: hidden;
          text-align: center;
          }
          a.insta-wrap__link {
          display: inline-block;
          overflow: hidden;
          }
          img.insta-wrap__image {
          transition: all 0.3s ease;
          }
          a.insta-wrap__link img {
          transform: scale(1.1);
          }

Добавить комментарий

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