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:

публикаций