44  /  226

Виджет Instagram

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

Отображение блока в Аспро: Курорт.


Отображение блока в Аспро: Next.


Обратите внимание! В Аспро: Next виджет будет отображаться, если выбран тип главной 1 или 3. При подключенном типе 2 или 4 — блок Instagram не отобразится.

Активировать отображение блока Instagram для 1 и 3 типа вы можете в виджете настроек. Перейдите на вкладку «Главная». Нажмите на «Параметры». 



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



Чтобы изменения стали доступны для всех, сохраните настройки в виджете.



Отображение блока в Аспро: Корпоративный сайт 2.0 и в Аспро: Ландшафт.


Обратите внимание! В Аспро: Корпоративный сайт 2.0 виджет будет отображаться, если выбран тип главной 1, 2 или 4. При подключенном 3 типе — блок Instagram не отобразится.

Отображение блока в Аспро: Digital-компания.


Обратите внимание! В Аспро: Digital-компания виджет будет отображаться, если выбран тип главной 2 или 4. При подключенном 1 или 3 типе — блок Instagram не отобразится.
 
Вы также можете подключить тип главной «Custom», в код которого вставить код виджета Instagram.

Для примера создадим 2 тип главной страницы с виджетом Instagram в Аспро: Next. Для этого перейдите в Контент → Структура сайта → Файлы и папки и найдите файл «indexblocks_index2.php». Нажмите в этой строке на «Гамбургер», затем на кнопку «Редактировать как PHP».



Скопируйте весь код.

Затем найдите файл «indexblocks_custom.php». Нажмите в этой строке на «Гамбургер», затем на кнопку «Редактировать как PHP».



Вставьте скопированный код.

В конце кода добавьте фрагмент кода виджета Instagram:

 <?$APPLICATION->IncludeComponent("bitrix:main.include", ".default",
 array(
 "COMPONENT_TEMPLATE" => ".default",
 "PATH" => SITE_DIR."include/mainpage/comp_instagramm.php",
 "AREA_FILE_SHOW" => "file",
 "AREA_FILE_SUFFIX" => "",
 "AREA_FILE_RECURSIVE" => "Y",
 "EDIT_TEMPLATE" => "standard.php"
 ),
 false
 );?>
Если вы хотите вывести виджет Instagram на главной странице в другом месте, вставьте код виджета между необходимыми фрагментами кода других элементов. Для этого необходимо обладать базовыми знаниями программирования.

Сохраните изменения. И подключите тип главной страницы — «Custom» в настройках решения. 

Чтобы подключит тип «Custom», перейдите Аспро: Next → Настройки. Найдите блок «Главная». В строке «Тип главной страницы» выберите «Custom».



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


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

Инструкция:

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

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

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

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

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


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



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

    Application Name – произвольное название
    Description – произвольное описание
    Company Name – название компании или сайта
    Website URL – адрес сайта (c http://)
    Valid Redirect URLs – адреса, на которые должна выполняться переадресация. В нашем случае также оставляем адрес действующего сайта.
    Contact email – ваш электронный адрес.



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



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


  8. Скопируйте ваш Client ID:

    bf790cc9d4d84446a974dda65ba0e696

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

    https://instagram.com/oauth/authorize/?client_id=[ВСТАВЬТЕ_ВАШ_ID]&redirect_uri=[ВСТАВЬТЕ_АДРЕС_ВАШЕГО_САЙТА]&response_type=token

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

    https://instagram.com/oauth/authorize/?client_id=bf790cc9d4d84446a974dda65ba0e696&redirect_uri=http://resort.aspro-demo.ru/&response_type=token

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

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



  12. Перейдите в настройки решения на сайте:
    Аспро: Resort → Настройки
    Аспро: Next → Настройки
    Аспро: Корпоративный сайт 2.0 → Настройки
    Аспро: Digital-компания → Настройки.

  13. В Аспро: Курорт в блоке «Главная страница» найдите поле API token для инстаграма. Скопируйте туда код Access Token и нажмите кнопку «Применить».


    В Аспро: Next в блоке «Инстаграм» найдите поле API token. Скопируйте туда код Access Token и нажмите кнопку «Применить». 


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

    Блок во всю ширину.


    В Аспро: Корпоративный сайт 2.0 в блоке «Главная» найдите поле API token для инстаграма. Скопируйте туда код Access Token и нажмите кнопку «Применить». 



    В Аспро: Digital-компания в блоке «Главная» найдите поле API token для инстаграма. Скопируйте туда код Access Token и нажмите кнопку «Применить».