Главная / SEO и продвижение / Размещение сторонних кодов / Размещение виджета Instagram с помощью SnapWidget

Размещение виджета Instagram с помощью SnapWidget

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

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

php7Y4hfM

Общий вид виджета для Instagram

Шаг 1

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

php5X7KXZ

Форма авторизации на Instagram.com

Шаг 2

Для того чтобы настроить виджет и получить его  код, необходимо перейти на сайт http://snapwidget.com/#getstarted

phpVRLsHU

 Общий вид сайта для настройки виджета

Шаг 3

Для настройки виджета необходимо определить следующие параметры:

 phpVPaPmh

Настройка параметров виджета

  1. Если в поле “Username”  указать свой логин Instagram, виджет будет показывать только фотографии из Вашего профиля. В противном случае необходимо установить хэш-теги (метки) по которым система будет подбирать изображения (п. 2).

  1. В поле “Hashtag” следует указать хэш-тег (метку), по которому Вы желаете искать фотографии определённого жанра и тематики. Виджет будет выводить случайные фотографии, помеченные соответствующим хэш-тегом.

  1. В поле “Widget Type” необходимо выбрать тип виджета из предложенных

  • Grid - Сетка
  • Board - Доска
  • Scrolling - Прокрутка
  • Slideshow - Слайд-шоу
  • map - Карта
  1. В поле “Thumbnail Size” можно выбрать предпочтительный размер отображения фотографий.

  1. Поле “Layout” позволяет “разметить” Ваш виджет, указав необходимое количество строк и столбцов.

  1. В поле “Photo Border” устанавливается параметр отображения рамки на фото.

  1. Поле “Background Color” позволяет определить цвет для заднего фона виджета.

  1. В поле “Photo Padding” задается отступ между фотографиями.

  1. В поле “Hover Effect” выберите, нужно ли выделять фотографию, на которую наведена мышь.

  1. В поле “Sharing Button” можно указать, нужна ли кнопки “Поделиться” в социальных сетях “Facebook” и “Twitter”.

  1. В поле “Responsive” указывается, будет ли виджет масштабироваться в зависимости от разрешения экрана.

Шаг 4

Чтобы ознакомиться с полученным результатом перед размещением на сайте, нажмите на кнопку “Preview”.

phpV6m2zQ

Ссылка на окно предварительного просмотра

Шаг 5

Определив наиболее оптимальные настройки, нажмите на кнопку “Get Widget”. Система сгенерирует код Вашего будущего виджета. Необходимо выделить и скопировать сгенерированный код

phpurN537

 Окно отображения сгенерированного кода виджета

Шаг 6

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

phpunnuaV

 Выбор меню "Редактировать содержимое"

Шаг 7

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

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

phpXcLzsr

Шаг 8

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

phpKmLCyG

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий