modInstagram2

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

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

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

[[!modInstagram2]]

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

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

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

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

Также доступны параметры 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'}
            {foreach $children.data as $item}
                {if !($item.media_url | preg_match : '(.mp4)Ui') }
                    {set $img = $children.data[0].media_url}
                    {break}
                {/if}
            {/foreach}
        {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).

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

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


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

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


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


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


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


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


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


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


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


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


11. На открывшейся странице прокручиваем вниз и указываем в полях «Действительные URI переадресации для OAuth», «Деавторизация URL обратного вызова», «URL запроса на удаление данных» адрес сайта (у домена должен быть SSL-сертификат). Нажимаем кнопку «Сохранить изменения».


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


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


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


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


16. Возвращаемся в Facebook for Developers, переходим в раздел Instagram > Basic Display, прокручиваем вниз страницы и напротив аккаунта нажимаем кнопку «Generate Token»


17. В появившемся окне отмечаем чекбокс I Understand, копируем токен и нажимаем кнопку «Done». Токен действует 60 дней с возможностью продления.


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

2.0.4

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

2.0.3

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

2.0.2

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

2.0.1

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

2.0.0

  • Релиз

Последние обсуждения в сообществе MODX.pro