1. aspro.ru
  2. Аспро: Корпоративный сайт 3.0
  3. Главная страница
  4. Блок «Видеоотзывы» на главной странице

Блок «Видеоотзывы» на главной странице


В решении Аспро: Корпоративный сайт 3.0, начиная с версии 1.1.1, на главной странице можно отобразить блок «Видеоотзывы». Это надежный способ наглядно продемонстрировать счастливых клиентов и результаты собственной работы. Улучшайте имидж компании и повышайте лояльность посетителей.

e1cbe799-7b5f-11f1-8fe4-fa163e2ff576

Ролики подгружаются из YouTube, а для Аспро: Корпоративный сайт 3.0 с версии 1.2.10 (для Аспро: Автосервис с версии 1.0.5 и Аспро: Медицинский центр 3.0 с версии 1.0.22, для Аспро: Стройка 2.0 с версии 1.0.17, для Аспро: Металл с версии 1.0.22) с сервисов VK Видео и Rutube из плейлиста или с главной страницы канала. Также вы можете переименовать блок и выводить туда любые видео на ваше усмотрение. Например, обзоры своих проектов.

b7f08c33-7b60-11f1-8fe4-fa163e2ff576

Чтобы настроить блок с видео, в административной части сайта перейдите в Аспро (1) → Аспро: Allcorp 3 (2) → Настройки (3) и выберите вкладку «Социальные сети» (4), которая появилась в обновлении 1.2.10.

d7a65e63-7b5d-11f1-8fe4-fa163e2ff576

YouTube

Для подключения роликов с канала потребуется API Token YouTube.

af278bc8-7b5b-11f1-8fe4-fa163e2ff576

Чтобы его получить, зайдите на специальный сервис от Google. Выберите пункт YouTube Data API v3.

8820d102-7b5f-11f1-8fe4-fa163e2ff576

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

493dd4e6-7b5b-11f1-8fe4-fa163e2ff576

После этого откроется новое окно, в котором нужно нажать на кнопку CREATE CREDENTIALS.

fba58d24-7b5c-11f1-8fe4-fa163e2ff576

В поле Select an API выберите YouTube Data API v3.

6a1a60d0-7b64-11f1-8fe4-fa163e2ff576

На выбор появится два пункта. Отметьте Public data и нажмите NEXT.

40421c6b-7b63-11f1-8fe4-fa163e2ff576

Скопируйте ключ из поля API Key и нажмите Done.

c76a687e-7b5d-11f1-8fe4-fa163e2ff576

Полученный ключ вставьте в соответствующее поле в административной части сайта.

af278bc8-7b5b-11f1-8fe4-fa163e2ff576

После этого укажите ID канала (1), если хотите брать видео напрямую с YouTube-страницы. Укажите ID плейлиста (2), если хотите использовать видео из плейлиста. Также здесь вы можете выбрать сортировку видео (3), задать заголовок блока (4) и указать подсказку ссылки на все видео (5).

b897928f-7b5f-11f1-8fe4-fa163e2ff576

Сохраните изменения.

Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

90c9593c-7b5d-11f1-8fe4-fa163e2ff576

VK Видео

Чтобы виджет заработал, нужно получить токен API. Сделать это можно через создание своего приложения для «ВКонтакте». Token API одинаковый для блоков с постами и видео.

5e73366e-7b61-11f1-8fe4-fa163e2ff576

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

Для начала зайдите на https://id.vk.com/about/business/go/ и нажмите «Добавить приложение».

8edb3d94-7b64-11f1-8fe4-fa163e2ff576

Выберите, кем будет управляться приложение. Нажмите «Далее».

9403353a-7b61-11f1-8fe4-fa163e2ff576

Затем заполните свои данные. Эта информация не будет отображаться публично. Согласитесь с офертой и обработкой персональных данных. Нажмите «Создать аккаунт».

641bd02f-7b60-11f1-8fe4-fa163e2ff576

Заполните название приложения (1) и выберите платформу: Web (2). Нажмите «Далее».

5b3fbc68-7b5b-11f1-8fe4-fa163e2ff576

В поле «Базовый домен» напишите адрес вашего сайта без протокола (1). В поле «Доверенный Redirect URL» вставьте: https://oauth.vk.com/blank.html (2). Нажмите «Готово».

1620d24e-7b61-11f1-8fe4-fa163e2ff576

Введите код из push-уведомления для подтверждения.

ac813534-7b5b-11f1-8fe4-fa163e2ff576

После этого вы получите ID приложения. Оно будет доступно в соответствующем поле.

a0aaadb1-7b60-11f1-8fe4-fa163e2ff576

После создания приложения настройте расширенные доступы. Перейдите на вкладку «Доступы» и нажмите кнопку «Заполнить» в блоке «Расширенные доступы».

40421c6b-7b63-11f1-8fe4-fa163e2ff576

В строке «Паспортные данные» нажмите на кнопку «Добавить». Заполните поля и нажмите «Добавить данные»

56556a06-7b5b-11f1-8fe4-fa163e2ff576

После заполнения паспортных данных нажмите на кнопку «Отправить на проверку».

d1af670e-7b5b-11f1-8fe4-fa163e2ff576

Перед вами появится сообщение, что данные проверяются. Проверка занимает около 2 часов.

cd492db2-7b63-11f1-8fe4-fa163e2ff576

Если проверка пройдена успешно, сообщение изменится на «Аккаунт подтвержден».

160e03ca-7b63-11f1-8fe4-fa163e2ff576

На данный момент выдача расширенных доступов со стороны ВКонтакте приостановлена.

Теперь вам понадобится следующая ссылка. Скопируйте ее в текстовый редактор и отредактируйте, заполнив своими данными:

 https://oauth.vk.com/authorize?client_id=[ID нашего приложения]&scope=notify,photos,friends,audio,video,notes,pages,docs,status,questions,offers,wall,groups,messages,notifications,stats,ads,offline&redirect_uri=https://oauth.vk.com/blank.html&display=page&response_type=token
  • Вместо [ID нашего приложения] подставляем полученный ID. Квадратные скобки также нужно убрать;

  • В атрибуте scope оставляем только тот контент, доступ к которому вам нужен. Как правило, достаточно оставить параметры video, wall и offline. 

Получившуюся ссылку вставьте в адресную строку браузера и перейдите по ней. После этого вас попросят авторизоваться в VK. Нажмите «Продолжить как …».

c47993f2-7b62-11f1-8fe4-fa163e2ff576

В новом окне из ссылки скопируйте показатель атрибута все символы после «access_token=». Это и есть ваш API токен.

fad8038d-7b5f-11f1-8fe4-fa163e2ff576

Далее в административной части сайта перейдите в Аспро (1) → Аспро: Allcorp 3 (2) → Настройки (3) и выберите вкладку «Социальные сети» (4).

d7a65e63-7b5d-11f1-8fe4-fa163e2ff576

Вставьте код полученного API токена (1) и ID сообщества, откуда вы хотите подтягивать видео (2). Укажите название для блока (3) и подсказку ссылки на все видео (4). Сохраните параметры. 

Неотмеченные цифрами настройки относятся к блоку «Вконтакте» на главной, который подгружает посты со стены сообщества.

7c6f9ce3-7b5e-11f1-8fe4-fa163e2ff576

Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

90c9593c-7b5d-11f1-8fe4-fa163e2ff576

Rutube

Для подключения интеграция с Rutube укажите ID канала (1). Также вы можете выбрать сортировку видео (2), указать заголовок блока с видео (3) и подсказку ссылки на все видео (4).

714782ea-7b63-11f1-8fe4-fa163e2ff576

Сохраните изменения.

Для корректной работы блока «Видеоотзывы» в настройках хостинга необходимо включить модуль allow_url_fopen. На картинке ниже показали пример для хостинга Reddock.

90c9593c-7b5d-11f1-8fe4-fa163e2ff576

Дополнительные настройки

Вы можете внести корректировки в настройки видео через параметры компонента. Для этого включите режим правки.

cdca3975-7b63-11f1-8fe4-fa163e2ff576

Наведите курсор на блок с видео и нажмите на шестеренку.

742ca339-7b5c-11f1-8fe4-fa163e2ff576

Здесь вы можете выбрать источник видео, ID канала, сортировку видео и другие опции.

5bb912c1-7b5e-11f1-8fe4-fa163e2ff576


Предыдущая статья Настройки оформления дополнительного блока
Следующая статья Каталог