Как встроить ленту Instagram на свой сайт (пошаговое руководство)

Если ваш сайт по-прежнему выглядит так же, как и три месяца назад, посетители это замечают. И один из самых быстрых способов исправить это, не трогая ни строчки кода, — это перенести контент из Instagram прямо на свой сайт.

Встроенная лента Instagram выполняет сразу две функции. Она поддерживает активность вашей главной страницы или целевых страниц и предоставляет посетителям социальные доказательства, которые они могут увидеть и просмотреть, а не просто прочитать. Однако Instagram сам по себе не упрощает этот процесс. Вот что действительно работает и как правильно это настроить.

Быстрый ответ:

Чтобы встроить ленту Instagram на свой сайт, вы можете либо скопировать код встраивания каждой публикации и вставить его на свой сайт, либо подключить свой аккаунт Instagram к агрегатору социальных сетей, например, к [название агрегатора]. TagembedЗатем выберите, какие записи следует отображать: по нику, хэштегу или упоминанию, настройте макет виджета, а затем скопируйте сгенерированный код встраивания в вашу CMS (WordPress, Shopify, Squarespace, Webflow, Wix или обычный HTML). Разработка или настройка API не требуются.

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

Каковы преимущества встраивания ленты Instagram на ваш сайт?

Прежде чем перейти к тому, как это сделать, стоит четко определить, почему это нужно сделать, поскольку от этого зависит, какой метод вам следует выбрать.

Прямая трансляция из Instagram на вашем сайте:

• Автоматически обновляет страницы. Публикуйте посты в Instagram, и ваш сайт будет обновляться без участия пользователя в CMS.
• Завоевывает доверие быстрее, чем стоковые фотографии. Реальные посты, реальные клиенты, реальные моменты.
• Дает посетителям повод задержаться подольше, особенно на страницах товаров, целевых страницах и главных страницах сайта.
• Превратите своих подписчиков в Instagram в трафик на сайт и наоборот, поскольку большинство виджеты ленты социальных сетей Разместите ссылку на оригинальный пост или на свой профиль.

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

Три способа встроить Instagram на веб-сайт:

Здесь, по сути, всего три маршрута, и каждый из них решает свою проблему.

1. Встроенная функция Instagram (только для отдельных публикаций)

Instagram позволяет встраивать по одному посту или видеоролику за раз. Откройте пост на компьютере, нажмите на меню с тремя точками, выберите «Встроить» и скопируйте предоставленный код. Вставьте его в HTML-блок на вашем сайте.

Это отлично работает, если вы хотите вставить один конкретный пост в статью блога. Но всё рушится, как только вам нужна полноценная лента, потому что нет возможности отображать несколько постов, фильтровать по хэштегам или настраивать автоматическое обновление. Вам придётся каждую неделю вручную менять коды встраивания. Также стоит знать, что встроенные элементы загружают на вашу страницу собственные скрипты отслеживания Instagram, что может усложнить соблюдение GDPR в зависимости от вашей аудитории.

2. Instagram Graph API (создайте сами)

Для разработчиков Graph API Instagram Это позволяет напрямую получать данные из ленты и создавать полностью настраиваемый интерфейс. Вы получаете полный контроль над макетом, но также берете на себя обслуживание: обновление токенов, ограничения скорости запросов, изменения версий API и фактическую работу по рендерингу всего этого на стороне фронтенда. Этот вариант имеет смысл, если у вас есть свободные инженерные ресурсы и очень специфические требования к дизайну. Для большинства маркетинговых команд это излишне.

3. Агрегатор социальных сетей (практический компромисс)

Большинство веб-сайтов попадают сюда, и это неспроста. Такой инструмент, как [название инструмента], может помочь. Tagembed Подключается к Instagram, автоматически подбирает публикации по профилю, хэштегу или упоминанию и предоставляет готовый виджет, который можно стилизовать и вставить на любой веб-сайт с помощью одной строки кода встраивания. Никаких API-токенов, никаких разработчиков не требуется, а лента обновляется в фоновом режиме.

Вот как эти три метода выглядят в сравнении друг с другом:

Способ доставки	Для каких задач	Технические усилия	Автоматизация
Встроенный элемент Instagram	Размещение отдельной записи в блоге или на странице.	Низкий уровень (скопировать и вставить)	Нет, обновлено вручную.
API Instagram Graph	Корпоративные сайты, нуждающиеся в полностью индивидуальном дизайне.	Высокий уровень сложности, требуется разработчик.	Полностью автоматизированный
Агрегатор социальных сетей (Tagembed)	Маркетинговые команды, малые предприятия и большинство веб-сайтов.	Низкая стоимость, код не требуется	Полностью автоматизированный

Пошаговая инструкция: Как встроить ленту Instagram с помощью Tagembed?

Вот весь процесс от начала до конца.

Шаг 1: создайте Tagembed Аккаунт

Зарегистрируйтесь для получения бесплатного аккаунта. Вам не нужно будет ничего писать на этом этапе.

Шаг 2: Добавьте Instagram в качестве источника.

Нажмите, чтобы создать новый виджет, и выберите Instagram в качестве источника. У вас есть три способа получения контента:

• По нику – отображает публикации из конкретного профиля в Instagram.
• По хэштегу – Подтягивает публикации, помеченные определенным хэштегом, что полезно для кампаний или пользовательского контента.
• По упоминанию – Отображает публикации, в которых отмечен ваш аккаунт, что отлично подходит для демонстрации контента, созданного пользователями.

Важно отметить один момент: публичные профили работают без дополнительной настройки, но если учетная запись, из которой вы получаете данные, является частной, ее необходимо переключить в режим «Создатель» или «Создатель». Бизнес аккаунт и правильно подключившись, прежде чем начнут появляться публикации. Из всех проблем с настройкой, с которыми сталкиваются пользователи, эта является наиболее распространенной, и редко бывает ошибкой. Если после подключения ваша лента отображается пустой, прежде чем что-либо еще, проверьте тип своей учетной записи.

Шаг 3: Настройка макета ленты

После подключения источника вы получите предварительный просмотр в реальном времени, который можно настроить. Выберите один из режимов: сетка, карусель, слайдер, мозаичная кладка или социальная стена Расположение зависит от места установки. Вы также можете управлять:

• Количество показанных сообщений
• Количество столбцов и строк
• Цвета, шрифты и интервалы в соответствии с вашим фирменным стилем.
• Отображаются ли подписи, лайки или имена пользователей.
• Настройки модерации позволяют одобрять или скрывать определенные публикации до их размещения.

Шаг 4: Получите код для встраивания

Как только виджет будет выглядеть правильно, нажмите кнопку «Опубликовать». Выберите нужную галерею, а затем выберите желаемый макет из предложенных вариантов. Нажмите кнопку «Сгенерировать код».

Шаг 5: Вставьте его на свой сайт.

После того как вы сгенерировали код для встраивания Instagram, вам просто нужно вставить его в административную панель вашего сайта. Однако дальнейшие шаги зависят от того, где расположен ваш сайт, о чем мы поговорим далее.

Как добавить код для встраивания ленты Instagram на различные веб-платформы:

После того, как вы сгенерировали код для встраивания, TagembedВы можете добавить его практически в любой конструктор сайтов или CMS. Процесс в основном одинаков везде: скопируйте код, найдите блок «Пользовательский HTML» или «Встроить» на вашей платформе, вставьте его и опубликуйте.

1. Интегрируйте ленту Instagram в HTML-сайт.

Добавление Лента Instagram на HTML-сайте Это простой и работающий практически на любом статическом сайте способ. Выполните следующие шаги, чтобы разместить ленту на своей странице.

• После настройки фида нажмите «Опубликовать», затем выберите «HTML» в качестве платформы.
• Нажмите кнопку «Копировать код», чтобы скопировать сгенерированный код для встраивания.
• Откройте HTML-файл вашего сайта в текстовом редакторе и перейдите к разделу, где должна отображаться лента новостей.
• Вставьте код и сохраните файл.
• Перезагрузите страницу, чтобы увидеть прямую трансляцию.

2. Добавьте ленту Instagram на сайт Shopify.

Магазины Shopify выигрывают от использования ленты Instagram, особенно в разделах товаров и на главной странице, где социальное доказательство находится рядом с кнопкой покупки. Вот как встроить ленту Instagram. Лента Instagram на Shopify

• Нажмите «Опубликовать», выберите Shopify в качестве CMS, затем скопируйте код.
• Войдите в панель администратора Shopify и перейдите в раздел «Интернет-магазин».
• Выберите темы оформления, затем нажмите «Настроить».
• В левой панели выберите «Пользовательский контент».
• Добавьте пользовательский блок Liquid и вставьте в него код встраивания.
• Нажмите кнопку Сохранить.

3. Отображение ленты Instagram на веб-сайте WordPress

WordPress — наиболее распространенная платформа для такого рода встраивания, и Tagembed Вставляется через стандартный блочный редактор. Вот шаги для добавления. Виджет Instagram для сайта WordPress.

• Перейдите в раздел «Опубликовать», выберите WordPress из списка платформ, затем скопируйте код для встраивания.
• Войдите в панель администратора WordPress.
• Откройте страницу, запись или раздел, где вы хотите отобразить ленту.
• Нажмите кнопку (+) «Добавить блок» и выберите «Пользовательский HTML».
• Вставьте код и нажмите «Обновить».

4. Вставьте ленту Instagram на сайт, созданный в Elementor.

Если вы создаёте страницы с помощью Elementor, лента вставляется через его HTML-виджет, а не через стандартный редактор WordPress. Вот как встроить ленту. Виджет Instagram на сайте Elementor.

• Нажмите «Опубликовать», выберите платформу «Другая», затем скопируйте код.
• Войдите на свой сайт Elementor и откройте страницу или запись, которую хотите отредактировать.
• В редакторе Elementor найдите виджет HTML или перетащите новый на страницу.
• Вставьте код встраивания в HTML-виджет.
• Сохраните изменения.

5. Встройте ленту Instagram на сайт Squarespace.

Squarespace требует, чтобы код размещался в отдельном блоке кода, а не в общем текстовом разделе. Выполните следующие шаги, чтобы... Добавить ленту Instagram на сайт Squarespace правильно.

• Нажмите «Опубликовать», выберите Squarespace и нажмите «Получить код», чтобы сгенерировать код для встраивания.
• Скопируйте код в буфер обмена.
• Войдите в свою учетную запись Squarespace и перейдите на нужную страницу.
• Отредактируйте страницу и добавьте новый блок контента.
• Выберите «Код» в списке доступных блоков и вставьте код для встраивания.
• Сохраните изменения.

6. Добавьте ленту Instagram на сайт Webflow.

Webflow отображает встроенные элементы в режиме реального времени прямо в конструкторе, поэтому вы можете предварительно просмотреть их размещение перед публикацией. Вот как это настроить. Виджет Instagram на сайте Webflow.

• Нажмите «Опубликовать» и выберите «Другое» в качестве платформы CMS.
• Задайте ширину и высоту виджета, затем нажмите «Скопировать код».
• Войдите в панель администратора Webflow и перейдите на страницу, которую хотите отредактировать.
• Нажмите «Добавить элемент», прокрутите до пункта «Встроить» и перетащите его на страницу.
• Вставьте код и сохраните изменения.

7. Вставьте ленту Instagram на сайт Wix.

Wix обрабатывает встраивание контента через элемент iFrame, а не через обычный блок кода, что вызывает затруднения у пользователей при первом использовании. Вот шаги, которые необходимо выполнить для добавления контента. Лента Instagram на Wix.

• Нажмите «Опубликовать», выберите Wix в качестве платформы, отрегулируйте ширину и высоту и скопируйте код.
• Войдите в Wix и откройте страницу, куда следует поместить RSS-ленту.
• Нажмите кнопку «+Добавить», затем «Ещё» и выберите «HTML iFrame» из вариантов встраивания.
• Вставьте сгенерированный код в поле для кода.
• Нажмите «Применить», чтобы сохранить.

8. Интегрируйте ленту Instagram в веб-сайт Weebly.

Редактор Weebly использует собственную панель встраивания, отдельную от стандартных элементов контента. Вот как добавить элемент. Виджет Instagram для сайта Weebly.

• Нажмите «Опубликовать», выберите «Другое» в качестве вашей CMS, при необходимости отрегулируйте ширину и высоту и скопируйте код.
• Перейдите на страницу вашего сайта Weebly, где должна отображаться лента новостей.
• Откройте в редакторе опцию «Код для встраивания».
• Выберите элемент «HTML-блок» и нажмите «Редактировать пользовательский HTML».
• Вставьте код и сохраните.

9. Добавьте ленту Instagram на сайт BigCommerce.

BigCommerce — распространённый выбор для интернет-магазинов, и фид можно разместить либо на отдельной странице, либо непосредственно в шаблоне темы. Выполните следующие шаги, чтобы добавить фид. Виджет Instagram для приложения BigCommerce:

• Нажмите «Опубликовать», выберите платформу «Другая» и скопируйте код.
• Войдите в свой аккаунт BigCommerce.
• Для выбора нужной страницы перейдите в раздел «Витрина магазина» > «Веб-страницы», а для страницы товара или главной страницы — в раздел «Витрина магазина» > «Тема».
• Нажмите кнопку «Редактировать» на странице, затем переключитесь в HTML-редактор (найдите кнопку «<>» или «Исходный код»).
• Вставьте код, просмотрите его и опубликуйте страницу.

10. Вставьте ленту Instagram в Google Сайты

В редакторе страниц Google Sites есть специальная функция встраивания, что делает эту платформу одной из самых простых в использовании. Выполните следующие шаги, чтобы... добавить ленту Instagram на сайты Google.

• Нажмите «Опубликовать» и выберите «Другое» в качестве платформы. Отрегулируйте ширину и высоту, затем скопируйте код.
• Войдите в Google Сайты и откройте страницу, которую хотите отредактировать.
• В редакторе страниц нажмите кнопку «Встроить».
• Выберите «Вставить код» и вставьте код.
• Сохраните изменения.

11. Добавьте ленту Instagram на сайт HubSpot.

Редактор целевых страниц HubSpot встраивает код встраивания в HTML-настройки нижнего колонтитула страницы, а не в видимый блок контента. Вот как это происходит.

• Нажмите «Опубликовать», выберите платформу «Другая» и скопируйте код.
• Войдите в HubSpot, перейдите в раздел «Маркетинг» и откройте раздел «Целевые страницы».
• Выберите страницу и нажмите «Редактировать».
• Перейдите в меню Файл > Настройки страницы > Дополнительно.
• Вставьте код в поле HTML в нижнем колонтитуле, затем сохраните и опубликуйте.

12. Встроить Instagram Reel в Discord Веб-сайт

Discord не поддерживает встраивание контента так же, как веб-сайты, поэтому сообщения отображаются как ссылки, а не как лента новостей. Вот обходное решение.

• Зайдите в Instagram, найдите публикацию, нажмите на три точки и выберите «Скопировать ссылку».
• Откройте Discord и перейдите на сервер или в канал, где вы хотите поделиться информацией.
• Вставьте ссылку в окно чата.
• Нажмите «Enter», чтобы поделиться записью.

13. Вставьте ленту Instagram в OpenCart

OpenCart обрабатывает встраивание страниц через панель расширений, а не через редактор страниц, поскольку большинство страниц генерируются извне. шаблоныВот эти шаги.

• Войдите в панель администратора OpenCart.
• Перейдите в раздел Расширения > Расширения > Контент > HTML-контент.
• Нажмите «Добавить новый» и вставьте код для встраивания.
• Сохраните и назначьте его макету, например, главной странице, странице товара или странице категории.
• Обновите страницу магазина, чтобы убедиться, что лента новостей активна.

14. Встраивание ленты Instagram на сайт React

Для сайта на React лента новостей отображается как отрисованный компонент, а не как статическая вставка, поскольку React по умолчанию не поддерживает необработанный HTML. Вот как это добавить.

• Скопируйте код встраивания React/JavaScript из... Tagembed панель приборов.
• Откройте свой проект React и вставьте код в компонент, используя dangerouslySetInnerHTML.
• Добавьте компонент на страницу, где должна отображаться лента новостей.
• Сохраните и запустите приложение, чтобы убедиться, что лента отобразилась.

Независимо от используемой платформы, основной процесс одинаков: сгенерируйте код, найдите блок «Пользовательский HTML», «Код» или «Встроить», вставьте его и опубликуйте.

Встроить ленту Instagram: реальные истории успеха

Вот несколько реальных примеров веб-сайтов и брендов, использующих этот подход. Tagembed для встраивания лент Instagram. 

1. Университет Уругвая (ORT)

Университет Уругвая ORT Университет разместил на своем сайте живую стену Instagram, чтобы в режиме реального времени демонстрировать жизнь кампуса, достижения студентов и события. Вместо статичных изображений университет демонстрировал свежий контент из социальных сетей, что сделало сайт более активным и аутентичным. Это побудило посетителей проводить больше времени, изучая сайт, и дало потенциальным студентам реальное представление о культуре кампуса.

«Добавление прямой трансляции из Instagram сделало наш веб-сайт гораздо более динамичным. Теперь будущие студенты могут наблюдать за жизнью кампуса, событиями и достижениями в режиме реального времени, что делает взаимодействие с сайтом намного интереснее».

2. Funne

На сайте компании размещена прямая трансляция из Instagram. Фанне Это позволило обеспечить автоматическое обновление веб-сайта при каждой новой публикации в Instagram. В результате получился сайт, который выглядел постоянно активным, предоставлял свежий визуальный контент и укреплял доверие клиентов благодаря постоянному социальному подтверждению.

«Вместо того чтобы вручную обновлять визуальный контент каждые несколько недель, наш сайт теперь автоматически обновляется новыми материалами из Instagram. Это простой способ поддерживать сайт в актуальном и современном виде».

Распространённые ошибки, которые совершают люди:

Вот несколько вещей, которые постоянно вызывают проблемы, и которые стоит проверить, прежде чем предполагать, что что-то сломалось:

• Пытаюсь встроить приватный профиль, не переключаясь в режим «Бизнес/Создатель». Лента либо окажется пустой, либо выдаст ошибку.
• Перегрузка страницы слишком большим количеством записей одновременно. Замедляет загрузку и ухудшает пользовательский опыт на мобильных устройствах.
• Пропуск модерацииОсобенно это касается лент с хэштегами или упоминаниями, где вы не можете контролировать, что именно будет отмечено.
• Тестирование на мобильных устройствах не проводилось. Лента, которая отлично выглядит на компьютере, может испортить внешний вид на экранах меньшего размера, если виджет не адаптивный.
• Забыли проверить последствия GDPR? Если вы используете встроенный контент и у вас есть посетители из ЕС, поскольку файлы cookie отслеживания Instagram загружаются вместе с ним.

Основные выводы

Встроить отдельный пост из Instagram очень просто и не требует никаких дополнительных инструментов. Встраивание Реальная, обновляемая в режиме реального времени лента — это совсем другая проблема, и именно здесь на помощь приходит полноценный агрегатор. Если вам нужен полный контроль и у вас есть разработчики, то подойдет Graph API. Для всех остальных подойдет такой инструмент, как... Tagembed Получите полностью настраиваемую, автоматически обновляющуюся ленту Instagram на свой сайт за несколько минут, без необходимости в обслуживании, которое требуется при самостоятельном создании такой ленты.

Дальнейшие шаги после запуска вашей ленты:

• Проверьте скорость загрузки вашего сайта в Google PageSpeed ​​Insights, чтобы убедиться, что виджет загружается асинхронно и не задерживает основной контент.
• Проверяйте ленту на мобильных устройствах, а не только на компьютерах, поскольку проблемы с отображением обычно проявляются в первую очередь именно там.
• Установите правила модерации, если вы используете хэштеги или упоминания в ленте, чтобы нерелевантные публикации не просочились в систему.