1. Настройте виджет ленты Instagram
Вы можете ленту Instagram без какого-либо программирования и в кратчайшие сроки с помощью генератора виджетов ленты Instagram. Он позволяет вам создать галерею IG в визуальном редакторе, комбинируя готовые элементы.
Попробуйте сами! Выберите шаблон, введите источник, и… ваш виджет готов!
2. Получите код для встраивания ленты Instagram
После создания виджета и сохранения изменений вы получите двухстрочный код установки. Это необходимо для встраивания кода виджета IG на нужную страницу или шаблон сайта для отображения там ленты Instagram.
Вот как выглядит код виджета:
Скопируйте код, который вы получили после создания виджета, и сохраните его. Код вам понадобится при установке. Теперь переходим к следующему шагу.
3. Вставьте код ленты Instagram на страницы вашего сайта
Теперь вам понадобится всего минута! Теперь вам нужно вставить код установки на нужную страницу или в шаблон сайта (боковую панель, нижний колонтитул и т. д.).
- Войдите в панель администратора сайта;
- Откройте нужную страницу или шаблон;
- Добавьте код установки виджета ленты Instagram;
- Сохраните изменения и проверьте свой сайт!
Готово! Теперь вы можете изменять все настройки виджета: макет, размер, цвет и т. д. непосредственно в приложениях Elfsight, не редактируя код. Если у вас возникли трудности со встраиванием, ознакомьтесь с нашими подробными руководствами для каждой CMS или обратитесь в службу поддержки, которая будет рада вам помочь.
Помимо простого процесса встраивания, мы рекомендуем использовать виджет из-за следующих включенных функций:
- Готовые шаблоны. Различные готовые макеты и посты выглядят чрезвычайно профессионально.
- Фильтрация всех постов IG. По хэштегу, источнику и количеству постов.
- Настройка. У вас есть полная свобода персонализировать каждую деталь в визуальном редакторе.
- Нулевой код. Вы можете самостоятельно разработать виджет IG как профессионал, без каких-либо знаний в области веб-дизайна.
- Бесплатная версия без ограничений в функциях. Отличная новость заключается в том, что вам не нужно платить за протестируйте все функции и процесс встраивания.
- Встраивание занимает считанные секунды. Добавьте ленту Instagram, вставив две строки кода установки в нужное место на бэкэнде веб-сайта.
Вы агентство или фрилансер, работающий с клиентами?
Вы можете стать участником нашей партнерской программы, если поможете несколько компаний разрабатывают свои веб-сайты. Улучшите свой маркетинг. Интегрируйте ленту Elfsight Instagram на веб-сайтах ваших клиентов. В этой ситуации выигрывают все, включая вас, что делает ситуацию действительно беспроигрышной.
Добавьте ленты Instagram на сайты своих клиентов и получайте прибыль с партнерской программой Elfsight!
Возможности виджета ленты Instagram Elfsight
Процесс встраивания ленты Instagram в HTML с помощью виджета IG Elfsight прост, быстр и не требует знаний программирования. Кроме того, вы полностью контролируете внешний вид области ленты, поэтому ваша галерея IG будет выглядеть идеально на веб-сайте.
| Источники |
|
| Фильтр |
|
| Макет |
|
| Цвета |
|
| Другие настройки |
|
Вдохновляйтесь реальными примерами использования
Получите отзывы от наших замечательных клиентов. Изучите эти примеры использования и вдохновитесь музыкальными, образовательными и косметическими сайтами. Извлекайте идеи и создавайте собственную галерею, чтобы повысить вовлеченность пользователей, создать социальное доказательство, улучшить внешний вид и восприятие вашего сайта и, что самое главное, достичь своих бизнес-целей. Поехали!
Шаблон карусели от Vivienne Sabo
Vivienne Sabo предпочитает использовать шаблон карусели, который помогает им упорядочивать фотографии без дополнительных деталей. Посты располагаются в ряд, и фотографии можно прокручивать. Публикация во всплывающем окне содержит все элементы, как в приложении, но вы можете включить или отключить их в любое время.
Шаблон коллажа от The Bacon Brothers
The Bacon Brothers точно организует фотографии и видео с помощью шаблона коллажа. Теперь публикации выглядят так же, как в приложении. Привлекайте внимание с помощью этого шаблона стены и оставайтесь исключительными. Минималистичный и привлекательный виджет Instagram Feed поможет вам улучшить контент вашего сайта.
Галерея IG Университета Абу-Даби
Мы рады приветствовать образовательные, университетские и школьные сайты среди наших клиентов. Галереи Instagram, добавленные на такие сайты, могут помочь новичкам ознакомиться с учебным заведением и узнать больше о его перспективах. Университет Абу-Даби установил собственные настройки сетки, отрегулировал интервалы между сообщениями, и шаблон сетки теперь выглядит потрясающе! Это отличный способ привлечь новых подписчиков в свой профиль и добавить привлекательную деталь на свой сайт.
Фотографии Fatburger в Instagram
Сочные, вкусные бургеры выглядят еще привлекательнее, когда появляются на фотографиях в ленте Instagram. Не отказывайте себе в удовольствии добавить привлекательные фотографии вашей еды на свой сайт всего за несколько секунд!
Самое подробное руководство по настройке и встраиванию вашей ленты Instagram
Шаг 1. Создаем виджет ленты Instagram
Одним из ключевых преимуществ виджета IG Elfsight является количество профессиональных, готовых к использованию шаблонов. Вы можете добавить ленту Instagram на одну страницу в виде слайдера, сетки и небольшого виджета, экономящего место. Кроме того, вы можете выбрать готовую темную тему для виджета и работать с ней.
Добавление источников в виджет
Виджет ленты Instagram Elfsight позволяет добавлять на сайт различные типы источников Instagram: псевдонимы и хэштеги. Вы также можете добавить два разных источника в виджет ленты Instagram. Это означает, что вы можете отображать публикации из профиля вашего бренда, а также публикации, в которых ваши клиенты отмечают компанию.
- Встраивание профиля Instagram
Чтобы добавить публикации из своего профиля, просто вставьте свой псевдоним в поле источника. Вам даже не нужно входить в свою учетную запись. Это отлично подходит для тех, кто хочет отображать публичный контент из приложения на своем сайте, не имея доступа к учетной записи.
- Добавление хэштега Instagram
У вас есть кампания в Instagram, которой вы хотите поделиться со всем миром? Или вы хотите с гордостью продемонстрировать положительные отзывы ваших благодарных клиентов? В дополнение к собственному профилю вы можете добавлять фотографии и видео по хэштегу, и это, безусловно, поможет вам повысить доверие к вашему бренду.
Фильтрация постов в Instagram
Существует несколько способов фильтрации постов в вашем виджете. Например, при добавлении контента по хэштегу вы можете отображать посты определенных авторов, включать посты по определенному хэштегу или просто добавлять URL-адрес нужной публикации. Кроме того, вы можете исключать посты определенных авторов, хэштегов и URL-адресов. Наконец, есть возможность отображать определенное количество постов.
Шаг 2. Сгенерируйте код вставки
После создания идеальной, уникальной ленты Instagram вы захотите встроить ее на веб-сайт. Это будет так же просто, как создать ленту в визуальном редакторе. На этом этапе вам нужно будет получить свой персонализированный код установки из генератора кодов Elfsight, и вот как это сделать:
- Нажмите кнопку «Добавить на сайт», чтобы перейти в панель администратора Elfsight.
- Зарегистрируйтесь там или войдите в систему. Там вы увидите только что созданную вами ленту.
- Выберите свой план. Хорошая новость в том, что есть бесплатная версия без ограничений функций!
- Скопируйте код встраивания ленты Instagram из генератора кодов.
Вот и все! И установка станет еще проще. Перейдем к последнему этапу встраивания постов Instagram на сайт.
Шаг 3. Встраивание ленты Instagram в код сайта платформы
Обычно для встраивания виджета ленты Instagram на сайт вам необходимо вставить код установки виджета IG в поле HTML. Перейдите в панель администратора вашего сайта и найдите способ редактирования HTML-кода нужной страницы.
Различные конструкторы сайтов позволяют сделать это разными способами. В некоторых случаях вам нужно сделать это в шаблоне сайта, в других — создать поле HTML в визуальном редакторе. Иногда можно просмотреть HTML-код всей веб-страницы с помощью специальной функции.
Ниже вы найдете руководства по встраиванию установочного кода Instagram Feed в HTML для самых популярных платформ. Выберите свое и начните процесс встраивания прямо сейчас! Мы настоятельно рекомендуем начать с руководства по HTML, так как оно в основном описывает то, что вам нужно сделать на любой другой платформе.
Как встроить ленту Instagram в HTML-код веб-сайта
Во всех случаях вам нужно будет добавить две строки кода установки в HTML-код вашего веб-сайта. В общем, процесс встраивания потребует всего три шага:
- Откройте HTML-файл нужной страницы в редакторе.
- Вставьте код встраивания вашей ленты Instagram в раздел страницы, где вы хотите, чтобы он отображался.
- Сохраните изменения.
Все, что вам нужно сделать, это решить, в каком разделе вы хотите отобразить виджет. Вы можете добавить его как фотогалерею на домашнюю страницу или вставить отдельный пост в боковую панель. Существует множество других вариантов, поэтому не ограничивайте себя!
После вставки туда установочного HTML-кода вся лента Instagram, созданная вами в редакторе Elfsight, появится на вашем сайте. Кроме того, посты Instagram в виджете обновляются автоматически; вам не нужно заходить в панель администратора Elfsight и вручную обновлять их.
Как встроить ленту Instagram в WordPress
Добавить Instagram на сайт WordPress легко. Однако некоторые пользователи предпочитают Elementor стандартному редактору WordPress. Для вашего удобства мы описали оба варианта установки.
Вариант 1. Использование редактора WordPress
После создания и настройки ленты в панели администратора Elfsight пришло время добавить ее на ваш сайт WordPress. И нет ничего проще! Обычно вам следует создать раздел HTML-кода и добавить туда код установки. Вот как это сделать:
- Войдите в WordPress.
- Перейдите в раздел «Страницы» и выберите нужную страницу.
- Добавьте пользовательский блок HTML в нужный раздел страницы.
- Вставьте в этот блок код IG, полученный в генераторе кода.
- Нажмите «Обновить», чтобы сохранить изменения.
- Проверьте ленту Instagram на своем веб-сайте WordPress. Это виджет, который вы создали в панели администратора Elfsight.
Таким образом, вы можете успешно встроить ленту IG на веб-сайт. Вы можете вносить бесконечные изменения в своей панели Elfsight, и они автоматически отразятся в опубликованном виджете. Нет необходимости обновлять его на вашем сайте WordPress.
Создайте и встройте ленту Instagram в WordPress →
Вариант 2. С Elementor
Многие пользователи WordPress предпочитают работать с визуальным редактором, а не со стандартным, так как это устраняет необходимость иметь дело с HTML. Elementor расширяет WordPress и упрощает владельцам веб-сайтов внесение изменений на свой сайт.
- Выберите нужную страницу в панели администратора WordPress.
- Нажмите «Изменить с помощью Elementor» в списке страниц или в редакторе страниц WordPress.
- Перетащите элемент «HTML» в нужную область страницы.
- Вставьте код установки галереи IG в поле «Код HTML» в левом меню.
- Нажмите «Обновить», чтобы сохранить изменения в Elementor и WordPress.
Следуя этому руководству, вы сможете редактировать HTML-код Instagram и встраивать ленту на все страницы WordPress, созданные с помощью Elementor. Просто повторите процесс для всех требуемых страниц.
Как создать ленту Instagram в Wix
В Wix вы должны добавить ленту Instagram на свой сайт через панель администратора. Там вы должны найти опцию добавления пользовательского HTML-кода в Wix. Не волнуйтесь, это просто!
- Сначала войдите в панель администратора Wix и выберите веб-сайт для виджета.
- Откройте раздел «Настройки» в меню панели инструментов.
- Выберите опцию «Пользовательский код».
- Нажмите кнопку «Добавить пользовательский код» и вставьте свой код в поле HTML.
- После вставки кода установки IG нажмите «Применить», чтобы сохранить изменения в Wix.
После встраивания кода ленты Instagram на веб-сайт вам не нужно будет делать это снова. Просто перейдите на панель управления Elfsight, внесите изменения и мгновенно увидите их на веб-сайте.
Как добавить ленту Instagram в Weebly
Weebly — отличная платформа для деловых и личных целевых страниц. Встраивание лент Instagram на ваш сайт — отличный способ улучшить производительность вашего сайта и его внешний вид.
- Войдите в панель администратора Weebly и нажмите «Изменить страницу».
- Перетащите элемент «Встроить код» в нужную область страницы.
- Нажмите на блок на странице Weebly.
- Нажмите «Изменить пользовательский HTML».
- Вставьте код установки виджета IG в этот блок Weebly.
- Опубликуйте изменения.
- Проверьте свой сайт Weebly. Там вы увидите созданную вами ленту на Elfsight.
После этих нескольких шагов ваш раздел ленты Instagram будет встроен на сайте Weebly. Вы всегда можете вернуться в панель администратора Elfsight, внести любые необходимые изменения, и они будут опубликованы, как только вы нажмете «Опубликовать». Нет необходимости возвращаться в Weebly и вручную что-либо делать в разделе Instagram.
Как встроить виджет ленты Instagram на Squarespace
Встраивание ленты Instagram на Squarespace интуитивно понятно и просто. Это отличная платформа, которая позволяет вам создавать веб-сайты без каких-либо знаний в области кодирования, просто размещая в ней блоки контента. Все, что от вас требуется Squarespace, — это создать блок HTML-кода в области страницы, где вам нужна лента Instagram.
- Войдите в панель администратора Squarespace и выберите страницу для виджета.
- Нажмите «Изменить» рядом с областью страницы, где вы хотите отобразить виджет.
- Добавьте «Блок кода»; это инициирует поле HTML на странице Squarespace.
- Вставьте туда код встраивания ленты Instagram.
- Сохраните изменения.
- Просмотрите свой веб-сайт Squarespace. Вы увидите виджет Elfsight, и он автоматически получит контент. Нет необходимости возвращаться в панель администратора Squarespace.
Вот и все! Вот как можно успешно встроить ленту Instagram на веб-сайт.
Как встроить ленту Instagram на Jimdo
При добавлении кода Instagram в Jimdo, как и на любой другой веб-сайт, вам необходимо сделать следующее:
- Войдите в панель администратора Jimdo.
- Обратите внимание, что вы можете добавить HTML-код в любое текстовое поле.
- Нажмите кнопку (Изменить HTML) в текстовом разделе, где вы хотите разместить виджет.
- Вставьте туда свой установочный код.
- Сохраните изменения!
- Проверьте галерею IG на странице Jimdo.
Она отобразит вашу ленту Instagram на веб-сайте. Вы можете сделать это в любое время, когда захотите что-то изменить в настройках или дизайне, и нет необходимости повторно встраивать публикации IG.
Встроить ленту Instagram в Shopify
В большинстве шаблонов Shopify можно разместить пользовательский HTML-код на главной странице. Вот как это сделать:
- Войдите в панель администратора Shopify.
- Перейдите в раздел «Интернет-магазин».
- Нажмите «Настроить».
- Нажмите «Добавить раздел» в левом меню.
- В разделе «Пользовательский контент» нажмите «Добавить».
- Удалите предустановленные разделы Shopify.
- Нажмите «Добавить контент» и выберите «Пользовательский HTML».
- Вставьте код установки IG Gallery в поле «HTML».
- Сохраните изменения.
Бинго! Повторите процесс для всех страниц Shopify, где вы хотите, чтобы лента отображалась, и все готово.
Вы также можете добавить ленты Instagram на все страницы через HTML на бэкэнде сайта Shopify. Вот самый простой способ сделать это. Не бойтесь, если вы увидите некоторые фрагменты HTML-кода; вы ничего не сломаете. 🙂
- Перейдите в панель администратора Shopify.
- Перейдите в раздел «Интернет-магазин» и выберите «Действия».
- Выберите «Изменить код» в раскрывающемся меню Shopify.
- Перейдите в файл «theme.liquid».
- Вставьте код установки ленты Instagram после тега «body» Shopify.
- Сохраните изменения в шаблоне HTML.
Вот и все! Ваша лента будет работать на всех страницах Shopify после этих нескольких простых шагов, и встраивание ленты Instagram на веб-сайт должно быть легким делом. Нет необходимости возвращаться в панель администратора Shopify. Все изменения в ленте Instagram можно внести в панели администратора Elfsight.
Каковы альтернативные способы использования и встраивания ленты Instagram на веб-сайт?
Существует несколько способов добавления контента Instagram на веб-сайт: через официальный API Instagram и с помощью виджета. Ниже приведены основные преимущества обоих методов.
Виджет ленты Instagram Elfsight
Elfsight предлагает вам возможность добавлять публикации Instagram с помощью виджета ленты Instagram. Это бесплатно, не требует кодирования и не замедлит ваш сайт. Вы просто добавляете весь контент из профиля IG за считанные секунды всего за несколько щелчков мыши.
Использование официального API IG для пользовательских скриптов
Также есть возможность добавлять посты Instagram в HTML-код сайта с помощью API Instagram. Это требует обширных знаний в программировании. Он также не позволяет вам настраивать ленту по своему желанию. Вы просто приглашаете фотографии и видео из профиля или хэштега на страницу, как есть, и не имеете возможности модерировать их каким-либо образом.
Другие способы встраивания
Вы также можете встроить ленту в электронную почту, на страницу Facebook и т. д. или использовать ссылку на отдельной странице. Также возможна интеграция с конструкторами сайтов и кроссплатформенное размещение. Следите за обновлениями Elfsight, чтобы не пропустить новые возможности.
