Блог про любовь, лояльность и виральность для бизнеса

Про то, как фото и видео-отзывы реальных клиентов помогают увеличивать продажи, средний чек и удерживать клиентов


Инструкция: как встроить виджет с Instagram Stories на сайт

avatarby | in Stories, Инструкции, соцсети on 04.02.2022 16:24 3577 /

avatar
by
3577/ /

Виджет с кодом Instagram Stories легко встраивается на любую CMS или на любой самописный движок. Для того, чтобы разместить Stories из вашего инстаграм-аккаунта на сайте, нужно вставить html-код (код вы получите после регистрации).

Разберём процесс внедрения виджета на примере нескольких CMS:

  1. Tilda
  2. WordPress 
  3. Битрикс24.Сайты
  4. 1C-Битрикс
  5. InSales
  6. Wix
  7. Самописные админки (с помощью олдскульного FTP)

Tilda

1. Перейдите на рабочую страницу, на которую необходимо добавить виджет сторис. Добавьте новый рабочий блок.

2. В поиске блоков введите «html».

3. В созданном блоке необходимо вставить несколько строчек кода.

Нажмите на кнопку «Контент», чтобы открыть блок для редактирования.

Вставьте код виджета в окно и не забудьте сохранить.

4. Готовый блок сможете скопировать. 

Нажмите «Копировать», после этого в буфере обмена будет ваш блок. Можете вставить его в любую страницу.

Для того, чтобы виджет сторис появился на странице, не забудьте нажать «Опубликовать» на каждый из страниц, куда вы поставили код виджета.

WordPress

1. В админке WordPress перейдите во «Внешний вид» — «Виджеты». 

2. Добавьте новый виджет html-код:

3. В созданном блоке необходимо вставить код виджета. Задайте заголовок. Нажмите «Сохранить».

4. Сохраните изменения в блоке и они применятся к сайту.

Битрикс24.Сайты

1. Выберите на вашем сайте «Добавить блок».

2. Добавьте в новый блок раздел «HTML-код».

3. Нажмите «Редактировать» содержание блока.

4. Добавьте код виджета в раздел «HTML-код»

Отметьте галочкой пункт «Перемещать найденные скрипты в конец страницы» и нажмите «Сохранить».

Готово:

1C-Битрикс

1. С главной страницы переходите в раздел «Администрирование».

2. Необходимо перейти в «Настройки» — «Настройки продукта» — «Сайты» — «Шаблоны сайтов».

3. В открывшемся меню выберите свою страницу шаблона, кликнув по его названию.

Вы перейдёте на страницу редактирования шаблона.  

4. Вставьте код виджета в любое место внутри тега <body>, затем нажмите «Сохранить».

Готово:

InSales

1. Нажмите «Редактировать шаблон».

2. Откроются настройки шаблона. Нажмите на блок «Контент».

3. Нажмите на три полоски на блоке «Товары из определенной категории с табами».

4. Далее нажмите «Все настройки» — «Редактировать код».

5. Вставьте код виджета c тегом <div>…</div> во вкладку html. Содержимое внутри тега <script> разместите во вкладке JS (без самого открывающего и закрывающего тега script). Не забудьте сохранить.

Готово:

Wix

1. Зайдите в панель управления сайтов WIX. Нажпите «Редактировать».

2. Далее между блоками нажмите «Добавить полоску».

3. В меню слева выберите пункт «Добавить», откройте вкладку «Вставка кода». В блоке HTML выберите пункт «HTML-код».

4. После откроется новый блок на сайте.

Вставьте код виджета. Нажмите кнопку «Обновить». 

Если у вас вертикальный виджет (см. скриншоты визуализации в ТЗ, которое вам отправил аккаунт-менеджер), то тяните блок вниз, пока виджет не станет таким, как на изображении ниже и разместите блок сбоку сайта.

При горизонтальном виджете:
1) тяните блок по вертикали, пока круги у вас не разместятся в горизонтальную линию.
2) нажмите на пиктограмму со стрелками — «Растянуть».
3) в попапе «Растягивание» нажать на переключатель «Растянуть на всю ширину».


Самописные админки (с помощью олдскульного FTP)

Допустим, у нас есть сайт, для управления которым мы используем другой движок. Чтобы вставить код, нам нужно найти файл header.php или другой файл с названием header или head.

Header нужен для активации кода или фрагмента JavaScript на всех страницах сайта. Чтобы открыть файл, можно использовать бесплатную программу вроде Sublime Text. С ее помощью нужно открыть файл, который хранится на компьютере, а не похожий файл на сервере.

Все страницы делятся на две секции – The head (заголовки) и the body (тело). Заголовки обозначаются кодом HTML <head> и </head>. Тело – <body> и </body>.

Большая часть штук, которые заставляют сайт работать и отображать текст, находятся между этими двумя секциями. Чтобы найти эти теги HTML, можно воспользоваться поиском по странице (Cntrl+F). В большинстве случаев вставить код можно прямо перед закрывающим тегом.

После того, как вы вставили код виджета, сохраните файл и загрузите его на сервер. Готово.

Теперь про самописные админки. Если ваш сайт создавался вручную и вы не можете найти файл head или header, скорее всего, вам придется вставлять код вручную на каждую страницу. Чаще всего это не вызывает больших затруднений.

На изображении выше – гипотетический HTML-сайт, который состоит из четырех файлов HTML. Если бы мы захотели вставить на него какой-нибудь код, нам бы пришлось по очереди открыть все эти файлы и вставить код виджета в теги каждого из них. После этого процесс стандартный: сохраняем файлы и загружаем их на сервер вместо старых.

Если у вас возникнут сложности в установки виджета, мы поможем вам разместить галереи Frisbuy на любой другой платформе. Напишите, пожалуйста, нам на электронную почту.


Еще вам может понравиться

Прокомментировать

Ваш адрес email не будет опубликован. Обязательные поля помечены *