Как добавить на сайт ленту постов Instagram

Автоматическая публикация фотографий из Instagram на вашем сайте.
Разберем как разместить галерею из вашего аккаунта Instagram на странице сайта на примере бесплатного виджета Instush.
В инструкции рассмотрен один из сервисов, с помощью которого на сайте можно разместить ленту постов из Instagram. Также, вы можете использовать, например, сервис Lightwidget. Или любой другой, который вам подскажет Google.
disclaimer: Instash не является аффилированным по отношению к Tilda Publishing. В инструкции описана возможность вставки html кода, сгенерированного сервисом Instash, но мы не гарантируем бесперебойную работу сервиса Instash. Используя сервис Instash, вы соглашаетесь с условиями, которые предлагает поставщик услуг Instash.
1. У вас должен быть аккаунт Instagram, с фото в открытом доступе.

2. Перейдите на страницу сервиса Instush и нажмите Sign in with Instagram в правом верхнем углу
3. Введите данные для входа в ваш аккаунт
3. Нажмите Get it now под пунктом "Share your Instagram photos on your website or blog".

4. Выберите подходящий дизайн и настройки для виджета.

Вы можете настроить:
— размер изображений
— количество рядов и колонок в галерее
— расстояние между изображениями
— толщину обводки
— отображение и цвет лайков
— цвет фона.

Примеры, как могут выглядеть галереи:
Скопируйте полученный код.
5. Перейдите на Тильду, откройте библиотеку блоков, категорию «Другое», блок T123: «Вставка html кода» и вставьте скопированный ранее код в Контент блока. Сохраните и опубликуйте. Галерея будет видна на опубликованной странице.
Чтобы выровнять галерею по центру, добавьте к коду тег <center>....</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/?cols=7&rows=7&sl=true&user_id=15802&username=tilda&sid=-1&susername=-1&
tag=-1&stype=mine&grd=false&gpd=6&drp=false&bg=transparent&space=true&
rd=false&pin=true&t=999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u4ZS-kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5plnZgmxA" allowtransparency="true" frameborder="0" scrolling="no" style="display:block;border:none;overflow:visible;width:733px;height:733px;" ></iframe></center>
Чтобы выровнять галерею по центру, добавьте к коду тег <center>....</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/?cols=7&rows=7&sl=true&user_id=15802&username
=tilda&sid=-1&susername=-1&tag=-1&stype=
mine&grd=false&gpd=6&drp=false&bg=
transparent&space=true&rd=false&pin=true&t=
999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u
4ZS-kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5p
lnZgmxA" allowtransparency="true" frameborder=
"0" scrolling="no"style="display:block;border:none;
overflow:visible;width:733px;height:733px;" >
</iframe>
</center>
i
Чтобы выровнять галерею по центру, добавьте к коду тег
<center>...</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/cols=7&rows=7&sl=true&user_id=15802&
username=tilda&sid=-1&susername=-1&tag=-1&stype=mine&grd=false&gpd
=6&drp=false&bg=transparent&space=true&rd=false&pin=true&t=
999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u4ZS-kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5plnZgmxA"allowtransparency="true" frameborder="0"scrolling="no"style="display:block;border:none;
overflow:visible;width:733px;height:733px;" >
</iframe>
</center>
Чтобы выровнять галерею по центру, добавьте к коду тег <center>...</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/cols=7&rows=7&sl=true&user_id=15802&
username=tilda&sid=-1&susername=-1&tag=-1&stype=mine&grd=false&gpd
=6&drp=false&bg=transparent&space=true&rd=false&pin=true&t=
999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u4ZS-kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5plnZgmxA"allowtransparency="true" frameborder="0"scrolling="no"style="display:block;border:none;
overflow:visible;width:733px;height:733px;" >
</iframe>
</center>
Чтобы выровнять галерею по центру, добавьте к коду тег <center>....</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/cols=7&rows=7&sl=true&user_id=
15802&username=tilda&sid=-1&susername=-1&tag=-1&stype=mine&grd=
false&gpd=6&drp=false&bg=transparent&space=true&rd=false&pin=true&t=
999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u4ZS-
kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5plnZgmxA"allowtransparency=
"true" frameborder="0"scrolling="no"style="display:block;border:none;overflow:visible;
width:733px;height:733px;" >
</iframe>
</center>
Чтобы выровнять галерею по центру, добавьте к коду тег <center>....</center>.
<center> — в самом начале, перед <iframe
</center> — в самом конце, после /iframe>

Пример:
<center>
<iframe src="//users.instush.com/collage/?cols=7&rows=7&sl=true&user_id=15802&username=tilda&sid=-1&susername=-1&tag=-1&
stype=mine&grd=false&gpd=6&drp=false&bg=transparent&space=true&rd=f
alse&pin=true&t=999999WnqA4uR8eXFdbyMhY6mFhlPzMM25u4ZS-kwSldGFZGLdPFqw5qqakX0-bv06wr0zFJ5plnZgmxA" allowtransparency="true" frameborder="0" scrolling="no" style="display:block;border:none;overflow:visible;width:733px;height:733px;" ></iframe>
</center>
Готово. Теперь при обновлении Instagram новые фотографии появятся у вас на сайте автоматически.
Читайте также:
Продвижение в Инстаграм
Полное руководство для новичков
Как развивать бизнес в инстаграм с помощью сайта
Как инстаграмеру самостоятельно сделать сайт и использовать его для рекламы и продвижения
Made on
Tilda