87  /  268

Виджет Instagram

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

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

Чтобы включить отображение Instagram на главной странице откройте виджет (1) в публичной части сайта и переключитесь на вкладку «Главная» (2). Нажмите на «Параметры главной страницы».



Активируйте Instagram на главной, если он у вас выключен. И примените настройки.



На этой же вкладке вы можете выбрать вид отображения виджета на главной странице:
  • Слайдером
  • Плиткой
  • Блочный.

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

Перейдите в административный раздел (1), выберите Аспро (2), перейдите в Настройки (3).



В категории «Главная» поставьте галочку напротив «Инстграм» на главной и нажмите «Применить». Виджет стал активен. На этой же странице можно настроить вид отображения виджета:

  • Плиткой



Так выглядит отображение на главной странице
  • Слайдер



Вид на сайте:


  • Блочный


Вид на сайте:


Получение 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 и адрес сайта, указанный при регистрации, в ссылку: 
instagram.com/oauth/authorize/?client_id=[ВСТАВЬТЕ_ВАШ_ID]&redirect_uri=[ВСТАВЬТЕ_АДРЕС_ВАШЕГО_САЙТА]&response_type=token

20. Ссылка с Client ID будет выглядеть так:
instagram.com/oauth/authorize/?client_id=bf790cc9d4d84446a974dda65ba0e696&redirect_uri=http://resort.aspro-demo.ru/&response_type=token

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

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

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



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