new

modInstagram2

Вывод последних постов Instagram с использованием Basic Display API
Автор дополнения
Игорь Терентьев
Пакетов
3
Закачек
4 381
Автор дополнения
Пакетов
3
Закачек
4 381
Обычно отвечает в течение суток
Версия 2.1.5-beta
Дата выпуска 13.07.2021
Загрузки 367
Просмотры 3 557
Внимание, этот компонент требует версию PHP 7.0 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Внимание, этот компонент требует версию MODX не ниже 2.6 !
Компонент позволяет выводить последние посты из аккаунта Instagram. Реализовано автоматическое продление токена.

Внимание! На данный момент API Instagram поддерживает только стандартные типы постов (изображение, видео, карусель) IGTV и прочее не будут доступны для вывода на сайте.

Особенности:
  1. Необходим аккаунт Facebook (либо зарегистрировать новый)
  2. Необходим доступ к аккаунту Instagram для получения токена
  3. Выводятся посты только того аккаунта, для которого получен токен

Для работы компонента нужно указать Access Token (процедура получения токена описана ниже) в системных настройках и вызвать сниппет не кэшированным:

[[!modInstagram2]]

Время жизни кэша указывается в параметре cacheTime. По-умолчанию 1800 (30 минут).

cachePrefix — нужен если вы используете 2 и более вызовов сниппета с разными параметрами.

Вызов со всеми параметрами и с использованием синтаксиса Fenom:

{'!modInstagram2' | snippet : [
    'tokenLifetime' => 30,
    'limit' => 8,
    'tpl' => 'tpl.modInstagram2.item',
    'tplWrapper' => 'tpl.modInstagram2.wrapper',
    'cacheTime' => 3600,
    'cachePrefix' => 'mod_ig',
]}

tags — вывод постов только с указанными хэштегами (указывать без #, через запятую).

Также доступны параметры toPlaceholder и showLog.

Параметр returnArray


Возвращает массив данных. Пример использования:

Вывод 4 постов с типом «Видео»

{set $array = '!modInstagram2' | snippet : [
    'limit' => 50,
    'cacheTime' => 86400,
    'cachePrefix' => 'mod_ig',
    'returnArray' => true,
]}

{set $i = 1}
{foreach $array as $row}
    {if $row.media_type == 'VIDEO'}
        <video class="card-img-top" width="100%" controls="controls">
            <source src="{$row.media_url}" type="video/mp4">
        </video>
        {if $i == 4}
            {break}
        {/if}
        {set $i = ++$i}
    {/if}
{/foreach}


Показываем только одно изображение у каждого поста


<div class="thumbnail">
    {switch $media_type}
        {case 'CAROUSEL_ALBUM'}
            {set $img = $children.data[0].thumbnail_url ?: $children.data[0].media_url}
        {case 'VIDEO'}
            {set $img = $thumbnail_url}
        {case default}
            {set $img = $media_url}
    {/switch}
    <img src="{$img}" alt="">
</div>

Чанки


По-умолчанию используется чанк с разметкой для Bootstrap 3, в комплекте также есть чанк для Bootstrap 4 — tpl.modInstagram2.item.bs4.

В чанке tpl доступны следующие плэйсхолдеры:
  • {$idx} — порядковый номер
  • {$id} — id поста
  • {$media_url} — изображение или видео поста
  • {$timestamp} — дата публикации
  • {$caption} — текст описания
  • {$media_type} — тип (IMAGE, VIDEO, CAROUSEL_ALBUM)
  • {$permalink} — ссылка на пост
  • {$thumbnail_url} — URL миниатюры медиафайла. Доступно только для типа VIDEO
  • {$children.data} — массив с изображениями карусели. Посмотреть массив {$children.data | print} (media_url, permalink, id).

В чанке tplWrapper доступны следующие плэйсхолдеры:
  • {$output} — посты
  • {$media_count} — количество постов
  • {$username} — Имя пользователя
  • {$id} — ID пользователя
  • {$account_type} — Тип аккаунта пользователя. Возможные варианты: BUSINESS, MEDIA_CREATOR, PERSONAL

Для обрезки и сохранения изображений локально можно использовать pThumb.

Получение токена:


1. Переходим на developers.facebook.com/apps/ Вам нужно будет авторизоваться в facebook или создать аккаунт.
2. Нажимаем кнопку «Добавить новое приложение»

Выбираем «Другое»:


3. Указываем название и Email


4. Ставим чекбокс «Я не робот» и нажимаем кнопку «Отправить»


5. Переходим в боковом меню в Настройки > Основное, прокручиваем вниз и нажимаем кнопку «Добавить платформу»


6. В появившемся окне выбрать «Веб-сайт»


7. Указываем адрес сайта, на котором будет использоваться дополнение и нажимаем кнопку «Сохранить изменения»


8. Переходим в боковом меню в пункт «ТОВАРЫ», прокручиваем ниже и выбираем Instagram Basic Display, нажав кнопку «Настроить»


9. В левом меню выбираем «Basic Display», прокручиваем в самый низ страницы и нажимаем кнопку «Create New App»


10. В появившемся окне заполняем название (либо оставляем то же) и нажимаем кнопку «Создайте приложение»


11. На открывшейся странице копируем и вставляем в системные настройки сайта modinstagram2_client_id и modinstagram2_client_secret — «id приложения instagram» и «Секрет приложения», соответственно:


12. Прокручиваем вниз и указываем в поле «Действительные URI переадресации для OAuth» адрес_вашего_сайта/assets/components/modinstagram2/gettoken.php. В полях «Деавторизация URL обратного вызова», «URL запроса на удаление данных» адрес сайта (у домена должен быть SSL-сертификат). Нажимаем кнопку «Сохранить изменения».


13. После перезагрузки страницы прокручиваем еще чуть ниже и нажимаем кнопку «Add or Remove Instagram Testers»


14. Внизу открывшейся страницы нажимаем кнопку «Добавить Instagram Testers»


15. В появившемся окне указываем username аккаунта, посты которого вы хотите выводить (у вас должны быть к нему доступы). Выбираем нужный из появившихся подсказок и нажимаем кнопку «Отправить»


15. Авторизуемся в веб-версии instagram (под тем же аккаунтом) и переходим в редактирование профиля www.instagram.com/accounts/manage_access/ > Приглашения для тестировщиков и нажимаем кнопку «Принять» рядом с названием приложения


16. Открываем ссылку адрес_вашего_сайта/assets/components/modinstagram2/gettoken.php вас должно перенаправить на страницу авторизации приложения, нажимаем «Разрешить»:


17. Если все прошло успешно, то вы увидите следующее сообщение:

Если вдруг таким способом не выходит получить токен, то, после выполнения вышеперечисленных действий, можно попробовать получить его через Facebook в разделе Basic Display и вручную скопировать его в системную настройку modinstagram2_acess_token:


18. Токен будет сохранен в системной настройке modinstagram2_acess_token. Он будет автоматически обновляться. В системной настройке modinstagram2_token_lifetime можно указать через сколько дней обновлять токен.

2.1.5

  • в параметре tags теперь можно указывать несколько тэгов через запятую
  • добавлена поддержка русских символов
  • исправлена работа limit при фильтрации по тэгам

2.1.4

  • добавлен параметр tag - для вывода постов только с указанным хэштегом

2.1.3

  • улучшен вывод ошибок в процессе получения токена

2.1.2

  • исправлен баг с кэшированием системных настроек

2.1.1

  • вывод ошибок в процессе получения токена

2.1.0

  • реализован механизм получения токена

2.0.8

  • добавлен вывод имени пользователя и кол-во постов в чанк tplWrapper

2.0.7

  • более детальные сообщения об ошибках

2.0.6

  • работа API восстановлена, вернул обратно permalink

2.0.5

  • Удален параметр permalink из запроса (также теперь не доступен этот плэйсхолдер в чанке) из-за ошибки со стороны instagram

2.0.4

  • Определение видео в карусели в дефолтных чанках

2.0.3

  • Исправлена функция обновления токена
  • Незначительные изменения в чанках

2.0.2

  • Добавлен параметр returnArray у сниппета modInstagram2

2.0.1

  • Исправлена функция обновления токена

2.0.0

  • Релиз