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

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


С обновлением Аспро: Максимум 2.4.2 на главной странице можно отобразить блок «Видеоотзывы». Это надежный способ наглядно продемонстрировать счастливых клиентов и результаты собственной работы. Улучшайте имидж компании и повышайте лояльность посетителей. Ролики подгружаются из YouTube с сервисов VK Видео и Rutube из плейлиста или с главной страницы канала. Также вы можете переименовать блок и выводить туда любые видео на ваше усмотрение. Например, обзоры своих проектов.

65f2717c-7b5d-11f1-8fe4-fa163e2ff576

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

92a42c20-7b5d-11f1-8fe4-fa163e2ff576

Рассмотрим, как получить данные для интеграции с видеохостингами.

YouTube

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

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

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

90b4d6d9-7b5c-11f1-8fe4-fa163e2ff576

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

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

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

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

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

2d6c0757-7b5f-11f1-8fe4-fa163e2ff576

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

380fe1bf-7b5f-11f1-8fe4-fa163e2ff576

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

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

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

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

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

2bcbe3df-7b5c-11f1-8fe4-fa163e2ff576

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

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

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

VK Видео

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

6eda046c-7b5e-11f1-8fe4-fa163e2ff576

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

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

16a34a37-7b61-11f1-8fe4-fa163e2ff576

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

9825bbf8-7b5c-11f1-8fe4-fa163e2ff576

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

786b7b70-7b64-11f1-8fe4-fa163e2ff576

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

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

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

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

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

0360a703-7b64-11f1-8fe4-fa163e2ff576

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

86e134f7-7b60-11f1-8fe4-fa163e2ff576

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

24a48baa-7b5c-11f1-8fe4-fa163e2ff576

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

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

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

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

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

33ad50a1-7b5c-11f1-8fe4-fa163e2ff576

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

69f90668-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. Нажмите «Продолжить как …».

410427ab-7b5b-11f1-8fe4-fa163e2ff576

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

5621c2af-7b62-11f1-8fe4-fa163e2ff576

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

92a42c20-7b5d-11f1-8fe4-fa163e2ff576

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

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

936e5c8e-7b5f-11f1-8fe4-fa163e2ff576

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

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

Rutube

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

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

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

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

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

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

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

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

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

9473e35a-7b60-11f1-8fe4-fa163e2ff576

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

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

Предыдущая статья Блок «ВКонтакте» на главной
Следующая статья Блок «Услуги» на главной