![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/susan-yin-2jivbogleho-unsplash-1100x600.jpg)
Виджет с кодом Instagram Stories легко встраивается на любую CMS или на любой самописный движок. Для того, чтобы разместить Stories из вашего инстаграм-аккаунта на сайте, нужно вставить html-код (код вы получите после регистрации).
Разберём процесс внедрения виджета на примере нескольких CMS:
- Tilda
- WordPress
- Битрикс24.Сайты
- 1C-Битрикс
- InSales
- Wix
- Самописные админки (с помощью олдскульного FTP)
- Важное примечание
Tilda
1. Перейдите на рабочую страницу, на которую необходимо добавить виджет сторис. Добавьте новый рабочий блок.
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-2-1024x264.png)
2. В поиске блоков введите «html».
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-1-1-1024x624.png)
3. В созданном блоке необходимо вставить несколько строчек кода.
Нажмите на кнопку «Контент», чтобы открыть блок для редактирования.
Вставьте код виджета в окно и не забудьте сохранить.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.15.56-1024x556.png)
4. Готовый блок сможете скопировать.
Нажмите «Копировать», после этого в буфере обмена будет ваш блок. Можете вставить его в любую страницу.
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-3.png)
Для того, чтобы виджет сторис появился на странице, не забудьте нажать «Опубликовать» на каждый из страниц, куда вы поставили код виджета.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.16.11-1024x757.png)
WordPress
1. В админке WordPress перейдите во «Внешний вид» — «Виджеты».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.20.17-1024x680.png)
2. Добавьте новый виджет html-код:
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-17.44.34-1024x707.png)
3. В созданном блоке необходимо вставить код виджета. Задайте заголовок. Нажмите «Сохранить».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.49.26-922x1024.png)
4. Сохраните изменения в блоке и они применятся к сайту.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.25.41-1024x647.png)
Битрикс24.Сайты
1. Выберите на вашем сайте «Добавить блок».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.31.14-1024x367.png)
2. Добавьте в новый блок раздел «HTML-код».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.34.03-1024x935.png)
3. Нажмите «Редактировать» содержание блока.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.37.54-1024x440.png)
4. Добавьте код виджета в раздел «HTML-код»
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.40.26-1024x889.png)
Отметьте галочкой пункт «Перемещать найденные скрипты в конец страницы» и нажмите «Сохранить».
Готово:
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-14.46.38-1024x551.png)
1C-Битрикс
1. С главной страницы переходите в раздел «Администрирование».
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-7.png)
2. Необходимо перейти в «Настройки» — «Настройки продукта» — «Сайты» — «Шаблоны сайтов».
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-8.png)
3. В открывшемся меню выберите свою страницу шаблона, кликнув по его названию.
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-9-1024x243.png)
Вы перейдёте на страницу редактирования шаблона.
4. Вставьте код виджета в любое место внутри тега <body>, затем нажмите «Сохранить».
Готово:
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-11-839x1024.png)
InSales
1. Нажмите «Редактировать шаблон».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-17.56.26-1024x687.png)
2. Откроются настройки шаблона. Нажмите на блок «Контент».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.08.54-1024x695.png)
3. Нажмите на три полоски на блоке «Товары из определенной категории с табами».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.09.03-1024x680.png)
4. Далее нажмите «Все настройки» — «Редактировать код».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.09.14-1024x759.png)
5. Вставьте код виджета c тегом <div>…</div> во вкладку html. Содержимое внутри тега <script> разместите во вкладке JS (без самого открывающего и закрывающего тега script). Не забудьте сохранить.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.09.24-1024x543.png)
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.09.38-1024x587.png)
Готово:
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.13.56-1024x649.png)
Wix
1. Зайдите в панель управления сайтов WIX. Нажпите «Редактировать».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.21.25-1024x583.png)
2. Далее между блоками нажмите «Добавить полоску».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.21.40-1024x533.png)
3. В меню слева выберите пункт «Добавить», откройте вкладку «Вставка кода». В блоке HTML выберите пункт «HTML-код».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.21.51-1024x628.png)
4. После откроется новый блок на сайте.
Вставьте код виджета. Нажмите кнопку «Обновить».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-2022-02-14-v-15.22.03-1024x984.png)
Если у вас вертикальный виджет (см. скриншоты визуализации в ТЗ, которое вам отправил аккаунт-менеджер), то тяните блок вниз, пока виджет не станет таким, как на изображении ниже и разместите блок сбоку сайта.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/wix-vertical-1024x617-1.png)
При горизонтальном виджете:
1) тяните блок по вертикали, пока круги у вас не разместятся в горизонтальную линию.
2) нажмите на пиктограмму со стрелками — «Растянуть».
3) в попапе «Растягивание» нажать на переключатель «Растянуть на всю ширину».
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/wix-gorizontal-1024x352-1.png)
Самописные админки (с помощью олдскульного FTP)
Допустим, у нас есть сайт, для управления которым мы используем другой движок. Чтобы вставить код, нам нужно найти файл header.php или другой файл с названием header или head.
Header нужен для активации кода или фрагмента JavaScript на всех страницах сайта. Чтобы открыть файл, можно использовать бесплатную программу вроде Sublime Text. С ее помощью нужно открыть файл, который хранится на компьютере, а не похожий файл на сервере.
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-15.png)
Все страницы делятся на две секции – The head (заголовки) и the body (тело). Заголовки обозначаются кодом HTML <head> и </head>. Тело – <body> и </body>.
Большая часть штук, которые заставляют сайт работать и отображать текст, находятся между этими двумя секциями. Чтобы найти эти теги HTML, можно воспользоваться поиском по странице (Cntrl+F). В большинстве случаев вставить код можно прямо перед закрывающим тегом.
![](https://blog.frisbuy.ru/wp-content/uploads/2019/10/pasted-image-0-16.png)
После того, как вы вставили код виджета, сохраните файл и загрузите его на сервер. Готово.
Теперь про самописные админки. Если ваш сайт создавался вручную и вы не можете найти файл head или header, скорее всего, вам придется вставлять код вручную на каждую страницу. Чаще всего это не вызывает больших затруднений.
![](https://blog.frisbuy.ru/wp-content/uploads/2022/02/snimok-ekrana-ot-2022-02-04-15-12-07-1.png)
На изображении выше – гипотетический HTML-сайт, который состоит из четырех файлов HTML. Если бы мы захотели вставить на него какой-нибудь код, нам бы пришлось по очереди открыть все эти файлы и вставить код виджета в теги каждого из них. После этого процесс стандартный: сохраняем файлы и загружаем их на сервер вместо старых.
Примечание
Если вы планируете на одной странице сайта разместить несколько виджетов, то обратитесь к нам на info@frisbuy.ru или stories@frisbuy.ru с пометкой «Размещение нескольких виджетов на одной странице».
Если у вас возникнут сложности в установки виджета, мы поможем вам разместить галереи Frisbuy на любой другой платформе. Напишите, пожалуйста, нам на электронную почту.
Еще вам может понравиться
-
Обновленный редактор постов в личном кабинете Frisbuy
10 октября, 2023