modInstagram2
modstore.pro: https://modstore.pro/packages/photos-and-files/modinstagram2
Подробная документация и инструкция по получению токена в modstore.pro.Компонент позволяет выводить на сайте последние посты из Instagram с использованием Basic Display API.
Пример использования:
[[!modInstagram2?
&limit=`21`
&showLog=`1`
&tpl=`tpl.modInstagram2.item.custom`
]]
{if ($idx - 1) % 3 == 0}
<div class="row">
{/if}
<div class="col-12 col-md-4 mb-4 in-item">
<div class="card">
{switch $media_type}
{case 'CAROUSEL_ALBUM'}
<div id="carouselInstagram{$idx}" class="carousel slide">
<div class="carousel-inner">
{foreach $children.data as $item}
<div class="carousel-item {$item@index == 0 ? 'active' : ''}">
<a data-fancybox="instagram" href="{$item.media_url}">
{if $item.media_url | preg_match : '(.mp4)Ui' }
<video class="card-img-top" width="100%" controls="controls">
<source src="{$item.media_url}" type="video/mp4">
</video>
{else}
{set $img = '!pthumb' | snippet : [
'input' => $item.media_url,
'options' => 'w=400',
]}
<img class="d-block w-100" src="{$img}" alt="">
{/if}
</a>
</div>
{/foreach}
</div>
<a class="carousel-control-prev" href="#carouselInstagram{$idx}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#carouselInstagram{$idx}" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
{case 'VIDEO'}
<a data-fancybox="instagram" href="{$media_url}">
<video class="card-img-top" width="100%" controls="controls">
<source src="{$media_url}" type="video/mp4">
</video>
</a>
{case default}
{set $img = '!pthumb' | snippet : [
'input' => $media_url,
'options' => 'w=400',
]}
<a data-fancybox="instagram" href="{$media_url}">
<img class="card-img-top" src="{$img}" alt="">
</a>
{/switch}
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">{$timestamp | date : 'd.m.Y'}</h6>
<p class="card-text">{$caption | strip : true | truncate : 100}</p>
<a href="{$permalink}" class="btn btn-primary" target="_blank" rel="nofollow">Подробнее</a>
</div>
</div>
</div>
{if $idx % 3 == 0}
</div>
{/if}
Результат работы Basic Display API:
публикаций