Как разместить Instagram фото на сайте без использования Instagram API

JavaScript
23444
Как разместить Instagram фото на сайте без использования Instagram API
Active vision

Что делать если вы хотите вывести изображения из Instagram на своем сайте, но совершенно не хотите связываться с Instagram API? Выход есть и он даже проще, чем вы можете себе представить. Все что нам нужно будет сделать — это установить и настроить jQuery библиотеку jquery.instagramFeed.

Instagram фото на сайте

Начнем с установки. Для работы библиотеки требуется jQuery, подключим его через CDN.


HTML
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Скачайте и подключите файл jquery.instagramFeed.min.js . Или посмотрите библиотеку на GitHub.


HTML
<script src="js/jquery.instagramFeed.min.js"></script>

Создайте в разметке контейнер, в котором будет отображаться изображения из инстаграм.


HTML
<div id="instafeed"></div>

Инициализируем библиотеку. Мы можем получить медиа файлы либо по имени пользователя, либо по тегу. По имени пользователя существует ограничение: не более 12 изображений. По тегу вы сможете получить значительно больше. Обратите внимание, что для работы библиотеки вам не нужен access token.


HTML
<script>
    (function ($) {
        $(window).on('load', function () {
            $.instagramFeed({
                'username': 'instagram', //Имя пользователя
                'container': "#instafeed", //Контейнер для изображений
                'display_profile': false, //Отображение профиля
                'display_biography': false, //Отображение биографии
                'display_gallery': true, //Отображение галереи
                'styling': true, //Стандартные стили библиотеки
                'items': 8, //Количество изображений в галереи
                'items_per_row': 4, //Количество изображений в ряд
                'margin': 0.5 //Отступ между изображениями
            });
        });
    })(jQuery);
</script>

В результате мы получаем такую галерею:

Если вам не нравятся стандартные стили, их можно отключить, установив значение 'styling': false,. В результате работы библиотеки вы получите следующую разметку, напишите для нее собственные стили:


HTML
<div class="instagram_profile">
    <img class="instagram_profile_image" src="..." alt="Instagram profile pic">
    <p class="instagram_username">@Instagram (<a href="...">@instagram</a>)</p>
    <p class="instagram_biography">....</p>
</div>
<div class="instagram_gallery">
    <a href="..." rel="noopener" target="_blank">
        <img src="..." alt="instagram instagram image 0" />
    </a>
    ...
</div>
<div class="instagram_igtv">
    <a href="..." rel="noopener" target="_blank">
        <img src="..." alt="instagram instagram image 0" />
    </a>
    ...
</div>

Опции

Атрибут
По умолчанию
Описание
username
null
Имя пользователя Instagram, от которого будет получена лента
tag
null
Instagram тег, по которому будет получена лента
container
null
Селектор, в котором будет размещена лента. Требуется, если get_data имеет значение false
callback
null
Функция обратного вызова. Применяется только если включена get_data
get_data
false
Позволяет получать необработанные данные с помощью функции callback
display_profile
true
Включает отображение профиля
display_biography
true
Позволяет отображать биографию. Только для пользователей
display_gallery
true
Позволяет отображать галерею
display_igtv
true
Включает отображение канала IGTV, если доступно. Только для пользователей
styling
true
Включает стиль по умолчанию
items
8
Количество изображений для отображения в галерее. Допустимые значения [0-12]
margin
0.5
Отступы между изображениями в галерее
image_size
640
Размер изображений. Допустимые значения - 150, 240, 320, 480, 640. Не распространяется на превью видео.
host
https://www.instagram.com/
URL, где можно получить данные. Полезно, если Instagram меняет политику CORS

Если вы не хотите использовать jQuery, то можно скачать библиотеку InstagramFeed.min.js. Это та же самая библиотека, но без jQuery. Ее опции ничем не отличаются, вот пример ее инициализации:


HTML
<script>
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'container': "#instafeed",
            'display_profile': true,
            'display_biography': true,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1
        });
    })();
</script>

Надеюсь, что данный материал был полезен. Если вас интересует Instagram API, посмотрите нашу статью о Instagram API Basic Display

15 комментариев

  • Vadim Selishchev Новый пользователь
    10 декабря 2019 05:21
    Спасибо, очень помогло, а то какой-то темный лес с новым Graph API.
  • Alex Naghtigall Новый пользователь
    23 декабря 2019 13:59
    Если использовать параметр 'username' - тогда можно выбрать только последние 12 фото. А если вместо параметра 'username' использовать параметр 'tag' - тогда можно больше фотографий выбрать.
  • Алина Валеева Новый пользователь
    5 февраля 2020 09:33
    Спасибо огромное за статью, действительно помогло!
  • Павел Грищенко Новый пользователь
    17 февраля 2020 09:41
    Можно пример альтернативного URL? У меня проработал скрипт ровно 1 час...
    • Дмитрий Белов Миллиардер, филантроп
      Active-Vision 18 февраля 2020 11:29
      Внимательно проверьте ваш скрипт. Код плагина на этой странице работает без перебоев с момента написания статьи.
  • Наталия Новый пользователь
    4 марта 2020 10:53
    Нет ли опции для вывода фото в виде слайдера?
    • Дмитрий Белов Миллиардер, филантроп
      Active-Vision 6 марта 2020 10:14
      Такой опции нет, но вы можете написать свой слайдер или подключить готовый для разметки, которая получается в результате работы jquery.instagramFeed.
  • Ruslana Rb Новый пользователь
    5 марта 2020 19:19
    Здравствуйте.
    Пытаюсь подключить InstagramFeed.min.js без библиотеки jQuery, но она так не работает. Возможно что-то поменялось?
  • Илья Васильев Новый пользователь
    6 марта 2020 13:13
    А есть способ выводить отдельный пост по URL?
  • Андрей Вернигоров Новый пользователь
    2 мая 2020 16:59
    ТО же интересует эта информация.
  • Den Khirug Новый пользователь
    25 ноября 2020 13:54
    Почему перестало работать? и на этой странице тоже пропал пример
    • Den Khirug Новый пользователь
      25 ноября 2020 14:17
      А понял. Слишком много запросов и меня инстаграм заблокировал по Айпи..
  • Александр Дебагов Новый пользователь
    17 декабря 2020 10:42
    Похоже инста все-таки блочит запросы. Скрипт поработал примерно 1 час.
    Сейчас выдает в консоле:
    TypeError: Cannot read property '0' of undefined at Object.success (jquery.instagramFeed.js:64)

    На этом сайте такая же ошибка.
    А так все хорошо начиналось. Все-равно спасибо за скрипт!)
  • Aquila-system Новый пользователь
    27 января 2021 18:21
    Добрый день, а как сделать отображения иконок, где видео и карусель?
  • Сергей Асадчий Новый пользователь
    29 апреля 2021 11:08
    Здравствуйте. К сожалению скрипт снова не работает. Видимо придется переходить на API Instagram.

    Правильно ли я понимаю что API Instagram Basic Display, позволяет получить фото только со своего экаунта? Можно ли через API Instagram получать на моем сайте фото с разных инстаграм экаунтов?

Написать комментарий