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

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

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

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

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

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

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

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

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

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

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

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

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

• Grid - Сетка
• Board - Доска
• Scrolling - Прокрутка
• Slideshow - Слайд-шоу
• map - Карта

4. В поле “Thumbnail Size” можно выбрать предпочтительный размер отображения фотографий.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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