Выгрузка фотографий инстаграма на сайт

В этой статье читатели моего блога joeblind.ru узнают, как просто и быстро сделать автоматическую выгрузку фотографий из инстаграма на свой сайт.

Я давно искал способ выгрузить на сайт фотографии из своего аккаунта в инстаграме без знаний языков программирования. Наверняка кто-то, кто владеет языками, может без проблем спарсить фотографии откуда угодно, но этот вариант мне не подходит. И мне на помощь пришёл отличный плагин instafeed.js.

Официальный сайт плагина — instafeedjs.com.

Преимущества плагина:

  • простота внедрения;
  • множество настроек;
  • быстрая загрузка на сайте;
  • возможность выгрузки фотографий по тегу.

Недостатков не обнаружил.

Всё можно подробно прочитать на официальном сайте плагина instafeed.js, но сайт, конечно же, на английском языке, поэтому для вашего удобства я опишу в этой статье порядок установки и настройки плагина на вашем сайте.

 

Установка плагина instafeed.js

Поместите в соответствующую директорию вашего сайта файл instafeed.min.js и подключите его в коде страницы:

<script type="text/javascript" src="path/to/instafeed.min.js"></script>

Стандартный код плагина, запускающий его:

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Плагин подключен, теперь осталось связать его с вашим аккаунтом в инстаграме и настроить вывод фотографий.

 

Настройка плагина instafeed.js

Этот пункт самый интересный. Огромное преимущество плагина instafeed.js в том, что он позволяет полностью настроить его под свои нужды. Я расскажу о настройках плагина, но сначала объясню, как подключить его к вашему аккаунту в инстаграме.

Перейдите по ссылке, чтобы зарегистрировать плагин в инстаграме как приложение и предоставить ему доступ к вашим фотографиям. Нажмите на кнопку «Register Your Application».




Выгрузка фотографий инстаграма на сайт

Если у вас возникнет такое сообщение, жмите на зелёную кнопку «Register a New Client».

Выгрузка фотографий инстаграма на сайт

Поле «Application Name» нужно только для вашего удобства, поэтому вы можете ввести туда адрес сайта, на который собираетесь выгружать фотографии вашего аккаунта. Я ввёл для примера joeblind.ru.

Выгрузка фотографий инстаграма на сайт

В поле «Description» можете ввести любой текст.




Выгрузка фотографий инстаграма на сайт

В поле «Website» введите адрес вашего сайта, на котором установлен плагин instafeed.js. В поле «OAuth redirec_uri» вставьте строку http://instagram.com/ваш_логин?modal=true, где вместоваш_логин вам, соответственно, нужно ввести ваш логин в инстаграме, по примеру:

Выгрузка фотографий инстаграма на сайт

Далее жмём на кнопку «Register» и, если всё правильно сделали, получаем такое сообщение об успешной регистрации:

Выгрузка фотографий инстаграма на сайт

Осталось совсем немного. Теперь вам нужно узнать userId и accessToken. Зайдите на сайт плагина instafeedjs.com и найдите абзац со ссылкой Click here. Перейдя по этой ссылке, вы получите необходимые два параметра.

Выгрузка фотографий инстаграма на сайт

Теперь вставьте между тегами <head></head> этот скрипт и пропишите полученные значения параметров:

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

Создайте в теле страницы блок:

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

И если вы всё сделали правильно, то у вас на сайте должны появиться фотографии из вашего аккаунта.

Ну а теперь рассмотрим опции плагина:

  • target (string) — укажите id div’а, в который вам нужно выгрузить фотографии. По умолчанию параметр имеет значение instafeed.
  • template (string) — шаблон вывода одной фотографии. Параметр со значением имеет вид: template: ‘<a href=»{{link}}»><img src=»{{image}}» /></a>’. Вы можете дополнить его новыми элементами или, например, убрать ссылку.
  • get (string) — принимает значения:
    popular (по умолчанию) — вывод самых популярных фотографий;
    tagged — вывод фотографий по указанному тегу;
    location — можно указать id локации;
    user — вывод фотографий указанного userId.
  • tagName — если параметр get имеет значение tagget, то вы можете указать значение дляtagName, а проще говоря, непосредственно сам тег для вывода фото.
  • locationId — аналогично пункту выше.
  • userId — аналогично пункту выше.
  • sortBy (string) — очень классная опция, позволяющая сортировать вывод по:
    most-resent — от новых фото к старым;
    least-recent — от старых к новым;
    most-liked — самые лайкаемые фото;
    least-liked — наименее лайкаемые фото;
    most-commented — самые комментируемые фото;
    least-commented — менее комментируемые фото;
    random — вывод в случайном порядке.
  • limit (number) — количество выводимых фотографий. Максимальное значение — 60.
  • resolution (string) — размер выводимых фотографий:
    thumbnail (по умолчанию) — 150х150
    low_resolution — 306×306
    standart_resolution — 612×612

На этом всё, спасибо за внимание! Более подробно о плагине вы можете почитать на его официальном сайте, всё необходимое для подключения плагина к сайту я рассказал. Надеюсь, статья «Выгрузка фотографий из инстаграма на сайт» была вам полезна. Задавайте вопросы в комментариях.