Компонент позволяет выводить последние посты из аккаунта Instagram. Реализовано автоматическое продление токена.


Особенности:

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' => 'tag1,tag2',
]}

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.

Обход блокировки Instagram

Для обхода блокировки Instagram (если сервер или хостинг находятся в РФ) добавлены дополнительные системные настройки modinstagram2_proxy и modinstagram2_proxy_userpwd.

В первой через двоеточие указывается прокси-сервер и порт (например 255.255.255.255:8888), во второй логин и пароль (например login:password). Если логин и пароль не нужны, то оставьте это поле пустым.

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

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 можно указать через сколько дней обновлять токен.