Как поставить виджет инстаграм на сайт
Перейти к содержимому

Как поставить виджет инстаграм на сайт

  • автор:

Как настроить виджет

Настроить свой виджет по инструкции разработчика. В сервисе widg.io вам необходим виджет Instagram Social Feed.

Получить код установки виджета. Для Instagram их будет два и они будут иметь примерно такой вид:

Коды установки виджета Instagram — Хорошоп

Добавление кода виджета на сайт

Откройте раздел админ панели Настройки → Общие настройки → Скрипты.

В поле Скрипты внутри тега добавьте код из верхнего блока Elements Script и сохраните изменения.

Добавление кода виджета Instagram на сайт — Хорошоп

Теперь перейдите к разделу Настройки → Соц.сети:

Щелкните по названию Instagram, чтобы перейти к настройке.
Активируйте чекбокс Отображать.
Добавьте код из нижнего блока Widget Installation Code в поле Код виджета.
Нажмите Сохранить.

Виджет будет отображаться на главной странице, если у вас включен блок Мы в соцсетях на главной странице сайта. Для включения этого блока обратитесь к поддержке.

Ссылки на Instagram в шапке и футере сайта

В шапке и футере сайта предусмотрены блоки для ссылок на ваши социальные сети. Для включения отображения блока обратитесь в поддержку.

Пример размещения в шапке

Пример размещения в футере

Как настроить ссылку

Для отображения ссылки на вашу страницу Instagram:

Как поставить виджет инстаграм на сайт

Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Виджет Instagram

Информация: Виджет Instagram* располагается на главной странице сайта. Изображения в этот блок подгружаются автоматически из привязанного к сайту аккаунта Instagram*.

Настройка виджета Instagram* из публичной части

Активировать отображение блока вы можете в виджете настроек. Перейдите на вкладку «Главная» и переключите ползунок вправо.

На этой же вкладке вы можете выбрать вид отображения виджета на главной странице: 4 или 3 блока.

Настройка виджета Instagram из административной части

В админке сайте перейдите в Centino (1) → Centino Heat (2) → Настройки (3). Переключитесь на вкладку «Главная» (4).

В блоке «Параметры» поставьте галочку в строке «Инстаграм на главной»(1). В строке «Вид отображения Инстаграм на главной» выберите подходящий вариант из выпадающего списка.

Получение Access Token (API Token)

Для того, чтобы настроить отображение снимков, необходимо получить специальный код Access Token и добавить его на сайт с помощью настроек решения.

Инструкция:

1. Зарегистрируйте аккаунт Instagram, если он отсутствует.

2. Авторизуйтесь на сайте сервиса по ссылке Instagram.com/developer под действующим аккаунтом.

3. Заполните данные для входа в раздел для разработчиков:

4. Your Website – ваш сайт

5. Phone Number – номер телефона

6. What do you want to build with the API? — произвольное описание применения функционала Instagram. В нашем случае мы указали, что это виджет для сайта.

7. Нажмите на кнопку Sign Up.

8. Зарегистрируйте нового клиента. Для этого нажмите на кнопку Manage Client, а затем на Register a New Client.

9. Откроется форма регистрации нового Client ID. Заполните следующие поля:

10. Application Name – произвольное название

11. Description – произвольное описание

12. Company Name – название компании или сайта

13. Website URL – адрес сайта (c http://)

14. Valid Redirect URLs – адреса, на которые должна выполняться переадресация. В нашем случае также оставляем адрес действующего сайта.

15. Contact email – ваш электронный адрес.

16. Перейдите на вкладку Security и деактивируйте параметр Disable implicit OAuth.

17. Нажмите на кнопку Register. Откроется сообщение об успешной регистрации:

18. Скопируйте ваш Client ID. Он имеет например такой вид: b745cc9d4d84446a894dda47ba0e696

19. Подставьте ваш Client ID и адрес сайта, указанный при регистрации, в ссылку:

20. Ссылка с Client ID будет выглядеть так:

21. Скопируйте в ссылку и откройте ее в браузере. Откроется окно авторизации. Нажмите на зеленую кнопку Authorize. После этого вы будете перенаправлены по адресу, указанному при регистрации.

22. Скопируйте из адресной строки Access Token: 339269743.bf790cc.6748a35121c8421d9629c5f0e45d5e88

23. Перейдите в административную часть вашего сайта: Centino → Centino Heat → Настройки. На вкладке «Главная» найдите поле API token для инстаграма. Скопируйте туда код Access Token и нажмите кнопку «Применить».

Готово! Ваши снимки появятся на главной странице.

*Instagram — принадлежит компании Meta, которую признали экстремистской, запрещён на территории РФ.

Инстаграм виджет на сайт

Bitrix

Плагин для Инстаграма от Elfsight позволяет вам добавить на сайт фото из Инстаграм любым удобным способом: по хэштегу, URL, имени пользователя, местоположению, а также используя любую комбинацию источников. Чтобы вы могли тщательно отбирать фото для своего виджета, мы продумали два типа фильтров: исключение источника или вывод только по указанным источникам.

50+ настроек персонализации
Уникальный Инстаграм виджет для любого случая

Благодаря обширным настройкам интерфейса нашего Инстаграм плагина, вам доступны широкие возможности персонализации виджета. Выберите свой вариант макета: Slider или Grid; затем найдите наиболее подходящий шаблон, настройте количество колонок и рядов и не забудьте придумать привлекательное название. Размер — также под вашим контролем. У вас есть все, чтобы создать уникальный виджет Инстаграм на сайт.

Уникальный Инстаграм виджет для любого случая

Интерактивные элементы
Максимальная вовлеченность пользователей

Виджет Инстаграм от Elfsight включает различные элементы, которые помогут увеличить степень вовлеченности посетителей на вашем сайте. Режим Popup позволяет просматривать фото в полном размере и проигрывать видео прямо на странице сайта. Элементы поста, такие как кнопка “Подписаться” и иконки, позволяющие поделиться фото, обеспечивают мгновенное взаимодействие пользователя с контентом, а кнопки с призывом к действию помогут вдохновить и стимулировать клиентскую активность.

Максимальная вовлеченность пользователей

В полной гармонии со стилем сайта

12 встроенных цветовых схем
В полной гармонии со стилем сайта

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

Примеры использования

Посмотрите реальные примеры использования Instagram Feed, чтобы раскрыть его потенциал для вашего сайта.

Активное демо

Откройте для себя все функции Instagram Feed в интерактивном демо. Бесплатно, без регистрации, без программирования.

Чем виджеты Elfsight отличаются от других?

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

Удобный онлайн редактор

Легкий для понимания редактор

При помощи нашего комфортного в использовании редактора вы будете способны встроить любой виджет на ваш веб-сайт без усилий! Больше не нужно искать разработчика или учиться программированию.

Команда профессионалов Elfsight

Люди, на которых можно рассчитывать

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

Превосходный сервис Elfsight Apps

Великолепный сервис приложений Elfsight

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

Что говорят наши клиенты ❤️

Mathias Gwadanican

Mathias Gwadanican
Partner, Sinouvé SCOP

Эта Инстаграм галерея для сайта выглядит лучше всех остальных. Невероятно простая установка через сайт разработчика. Много опций и просто классный интерфейс. И кроме того, у меня было несколько вопросов, на которые мне ответили в течение 24 часов. Я очень доволен.

Mark Harper

Mark Harper
Brand strategist

В этом Инстаграм плагине замечательно ВСЕ! Он не замедляет загрузку страницы, код отличный, опций еще больше, чем я ожидал. А разработчики этой Инстаграм галереи помогают быстро и, что еще важнее, эффективно. Такая поддержка должна быть у каждой команды разработчиков.

Theodoros Kakoulidis

Theodoros Kakoulidis
CEO, PureProductsTrade

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

Michael Smith

Michael Smith
Entrepreneur

Вау! Нереальный плагин! Я часами пытался настроить другие Инстаграм галереи и так и не добился нужного результата. И тут я попробовал этот Инстаграм виджет, и уже через 10 минут у меня получилось сделать именно то, что я хотел, и даже больше! Отличная работа!

Brian Colin

Brian Colin

Это во всех отношениях лучший способ интегрировать Инстаграм с моим сайтом из всех опробованных. А команда поддержки, в которую я обратился, проявила себя исключительно профессионально: оперативно и дружелюбно ответили на мой запрос, всегда готовы помочь. Респект вам, ребята!

Tom Michaelson

Tom Michaelson
Entrepreneur

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

Часто задаваемые вопросы

Что такое плагин Instagram Feed для сайта?

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

Можно ли скрыть некоторые фотографии из моей Инстаграм галереи?

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

Я смогу использовать ваш Инстаграм плагин для продажи своих товаров?

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

Можно ли менять макет фотографий?

Instagram плагин для сайта от Elfsight предлагает два варианта макета: Slider или Grid. Вы также можете изменять количество колонок, рядов с фотографиями и расстояние между ними, чтобы фото располагались ближе или дальше друг от друга.

Какие виды виджетов я могу создать из ленты Elfsight Instagram?

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

  • Instagram Video Feed — добавляйте видео и создавайте видеогалереи для своего сайта с помощью видеопостов из аккаунта Instagram
  • Instagram Live Feed — отображение всех обновлений сообщений из учетной записи Instagram на веб-сайте.
  • Виджет Instagram Slideshow — создайте слайдер с содержанием вашей страницы.
  • Виджет публикации в Instagram — отдельные сообщения или серии тематических сообщений.
  • Виджет профиля Instagram — любой контент из вашей учетной записи.
  • Виджет Instagram Slider — коллекции фото и видео из содержимого вашего профиля.
  • Лента хештегов Instagram — отображать сообщения по любому хэштегу.
  • Фотогалерея Instagram — создавайте и отображайте великолепные фотогалереи на своем веб-сайте.
  • Виджет Instagram Stream — отображение по хэштегу, URL, местоположению или профилю.
  • Виджет учетной записи Instagram — вставьте свой профиль на любую страницу своего веб-сайта.
  • Лента изображений Instagram — вставляйте любые изображения по URL-адресу на свой сайт.
  • Виджет Instagram Grid — используйте специальный шаблон для создания привлекательных портфолио.
  • Виджет страницы Instagram — продемонстрируйте свою деловую или личную страницу в любом месте вашего сайта.

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

Имеет ли виджет Instagram Feed адаптивность для разных экранов?

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

Как вставить виджет Instagram на сайт?

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

  1. Создайте плагин в редакторе
  2. Нажмите “Сохранить”.
  3. Добавьте код, где нужно на сайте или в макете.

Как я могу изменить размер виджета?

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

Плагин подходит для конструктора сайта, который я использую, или моей CMS?

Есть ли возможность изменить количество постов в виджете после его публикации?

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

Станьте одним из 2,078,753 клиентов Elfsight Apps

Откройте для себя еще более 80 эффективных приложений от Elfsight! Банковская карта не требуется. Никаких рисков!

Пишем Instagram виджет для сайта. Инструкция для любопытных. Готовое решение для всех остальных

image

Недавно мне потребовалось интегрировать в сайт Instagram виджет. Чтобы пользователи видели последние опубликованные фотографии. Может даже подписывались.

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

Сразу нашлось множество сторонних сервисов разной степени платности и бесплатности. Объединяло их одно – клиент получает лишь код вызова виджета, всё остальное тянется с сервиса. Меня лично это не устраивало. Почему нет бесплатного standalone решения с открытым исходным кодом? Может быть я плохо искал? В общем, я решил внести свои пять копеек.

Инструкция по созданию виджета и готовое решение под катом.

Небольшое примечание. С момента написания этой статьи прошло уже семь месяцев. За это время виджет был установлен на около 80 ресурсах, создан репозиторий на GitHub, добрый человек подарил мне инвайт, виджет сменил механизм кэширования, обзавёлся собственным сайтом, добрые люди на его основе сделали плагин для CMS Битрикс, а я так и не нашёл аналогов в сети.

1. Требования к виджету:

Для начала сформулирую, что за виджет я хотел сделать.
Итак, виджет должен иметь:

  • Иконку Instagram;
  • Заголовок;
  • Фотографию профиля;
  • Статистику профиля;
  • Кнопку перехода к странице профиля;
  • Кликабельные фотографии;
  • Настраиваемое количество фотографий (общее количество и сколько выводить в строку);
  • Резиновый дизайн и автомаштаб фотографий в зависимости от нужной ширины виджета;
  • Вывод фотографий по хэш-тегу (добавилось в процессе);
  • Вставка виджета одной строчкой в HTML-код.

Пример в картинках:

А вот так вставляется в HTML:

Если заинтересовались, то приглашаю ознакомится с деталями реализации.

2. Регистрация сайта в Instagram:

На сайте Instagram есть документация к API. Вот прямая ссылка:
http://instagram.com/developer/

Сначала нас интересует раздел «Управлять программами». В нём на требуется зарегистрировать новое приложение (наш сайт), от лица которого и будет работать виджет. Так что переходим в этот раздел. Нажимаем кнопку «Регистрация новой программы» и заполняем форму:

  • Application Name – Название нашего приложение. Можете написать название сайта;
  • Description – Описание приложения;
  • Website – URL-адрес нашего сайта;
  • OAuth redirect_uri – URL на который перейдёт пользователь после авторизации. Т.к. у нас просто виджет и никого авторизовывать мы не будем, можно просто продублировать адрес нашего сайта.

После регистрации мы получаем два ключа. Нас интересует CLIENT ID. С ним мы будем работать в дальнейшем.

3. Получение данных через API:

Для того, чтобы получать данные через API нужно использовать т.н. «Конечные точки» описанные в документации. Это просто список URL адресов. Каждый адрес отвечает за выдачу определённых данных. Данные отдаются в формате JSON. Поскольку я хотел транслировать фотографии и статистику профиля, то я сразу пошёл в подраздел «пользователи». Авторизация для этого ненужна.

Тут выясняется, что для получения каких-либо данных по аккаунту, нужно знать идентификатор этого аккаунта. Пользователи знают только свой логин, но не ID. Где же его взять?

Идентификатор можно подсмотреть в HTML-коде страницы профиля, а можно отправить запрос на вот этот URL:

https://api.instagram.com/v1/users/search?q=LOGIN&client_id=CLIENT_ID

Где LOGIN – это искомый логин в Instagram, а CLIENT_ID – это ключ, которые мы получили на этапе регистрация приложения. В результате мы получим JSON массив, который по мимо идентификатора также будет содержать URL аватарку пользователя.

Далее, для получения списка новых фотографий из нашего профиля, нужно отправить GET запрос на вот этот URL:

https://api.instagram.com/v1/users/USER_ID/media/recent/?client_id=CLIENT_ID

Где USER_ID – это идентификатор который мы получили из предыдущего запроса. Также в запрос можно добавить дополнительные аргументы. Перечень вы найдёте на странице документации.

Ну и последний запрос на получение статистики профиля:

https://api.instagram.com/v1/users/USER_ID/?client_id=CLIENT_ID

С получением данных разобрались. Приступаем к реализации.

4. Реализация виджета

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

  1. К API можно отправить лишь 5000 запросов в час от одного CLIENT_ID или авторизованного пользователя;
  2. Нежелательно, чтобы CLIENT_ID был в свободном доступе, т.к. любой желающий может делать запросы на получение данных от имени вашего приложения.

В результате я решил, что виджет должен отрисовываться сервером. Поэтому релизация будет на PHP+HTML+CSS.
Подключать виджет будем через iframe.

4.1 Кэширование:

Первая версия виджета записывала кэш в БД MySQL, но затем я одумался и перенёс кэш в файл.
Как итог — выше скорость работы, меньше телодвижений с настройками, и не у всех есть MySQL.

Кэш хранится в формате JSON. Актуальность проверяется по дате последней модификации файла. Если кэш устарел, то происходит запрос к API на получение актуальных данных.

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

4.2 Исходный код:

Отправляем запросы cURL, записываем данные в кэш, рисуем виджет с помощью HTML+CSS, пишем подробную инструкцию и занимаемся перфекционизмом ещё несколько бессонных ночей. В результате получилось вот это:

Самое интересное происходит в файле inwidget.php
config.php – отвечает за настройки, а template.php за вёрстку.
И, конечно, всё бесплатно. Всё для народа.

4.3 Как подключить виджет к сайту?:

Инструкция по шагам:

  1. Зарегистрируйте сайт в Instagram (обсудили в начале статьи).
  2. Скачайте исходный код виджета.
  3. Загрузите папку с виджетом на сервер.
  4. Установите права на запись для папки /inwidget/cache.
  5. Настройте параметры виджета (файл config.php).
  6. Вставьте виджет в сайт с помощью следующего кода:

Примеры вставки с различным отображением виджета

      

По своему вкусу можете настроить параметры вставки, которые передаются как GET параметры при обращении к скрипту:

  • width – ширина виджета (по умолчанию 260px).
  • inline – количество фотографий в строке (по умолчанию 4 шт.).
  • view – сколько фотографий отображать в виджете (по умолчанию 12 шт., максимально 30 шт., можно исправить в confing.php).
  • toolbar – отобразить тулбар с аватаркой и статистикой (значения true/false, по умолчанию true).
  • preview – размер и качество изображений (small – маленькие до 150px, large – большие до 306px, fullsize – полноразмерые до 640px, по умолчанию small).
  • lang – язык виджета (значения ru/en, по умолчанию берутся настройки из config.php). Приоритет этого параметра выше чем для настроек в config.php.

Вот, собственно, и всё.

P.S.: Буду рад отзывам, комментариям и обратной связи.

Пасхалка!

Это мой кот. Каждая строчка виджета написана под его неусыпным контролем. Несколько раз котэ вносил корректировки в процесс пробегая по клавиатуре. Уделяйте больше времени своим питомцам! Ловите смешные моменты с ними. Фотографируйте больше!

Добавить комментарий

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