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

Блок «ВКонтакте» на главной


Начиная с версии 1.9.0, в решении доступен блок «ВКонтакте» на главной странице.

Блок «ВКонтакте» — это виджет для главной страницы сайта. Он автоматически подгружает посты из привязанного к сайту сообщества в VK.

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

Картинка для блока будет браться из ленты «ВКонтакте». Поле, в которое она будет вставляться, имеет соотношение сторон 16:9.

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

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

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

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

b822bb41-7b61-11f1-8fe4-fa163e2ff576

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

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

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

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

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

4c277af4-7b5e-11f1-8fe4-fa163e2ff576

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

57879aa2-7b5f-11f1-8fe4-fa163e2ff576

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

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

Теперь вам нужно получить Access Token. Сделать это можно двумя способами:

  1. С помощью библиотеки SDK — для ее установки следуйте инструкции по ссылке.
  2. С использованием HTTP-запроса. Следуйте шагам из документации VK.

Как только вы получите Access Token, сохраните его. Это и есть ваш API токен.

Далее переходим к нашему сайту, в его административную часть. Проходим следующий путь:

Аспро (1) → Аспро: Next (2) → Настройки (3).

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

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

3880871f-7b63-11f1-8fe4-fa163e2ff576

Поле «Размер отображаемого текста» позволяет задать количество символов, которое получит сайт для каждого поста. При этом количество отображаемых символов в блоке на главной будет отличаться от максимально доступного из-за ограничений по высоте. Например, у блока с 4 элементами в ряд помещается меньше символов, чем у 3 элементов в ряд. Количество символов может меняться и от разрешения экрана, но первые три строки всегда отображаются.

ID сообщества по умолчанию находится в ссылке. Если же у вашего сообщества VK уникальный URL, откройте любой пост на стене.

5058b283-7b61-11f1-8fe4-fa163e2ff576

Затем скопируйте ID сообщества из URL-адреса поста.

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

Сайт подключен к API ВКонтакте. Теперь нужно включить блок. Находясь в разделе «Настройки» в административной части, поставьте галку в поле «Блок ВКонтакте» и нажмите «Применить».

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

Блок «ВКонтакте» доступен только для 1-ого и 3-его типа отображения главной страницы.

Вернемся на главную страницу и найдем блок «ВКонтакте». Теперь посты из вашего сообщества будут отображаться на сайте.

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

Включить блок можно не только через административную, но и публичную часть сайта. Для этого перейдите в «Точную настройку», далее в раздел «Главная». Для 1-ого и 3-его типа главной страницы активируйте блок «ВКонтакте». Нажмите «Применить».

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

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


Чтобы настроить отображение блока «ВКонтакте», в публичной части сайта перейдите в режим правки и нажмите на шестеренку в области блока для перехода в параметры компонента «Аспро: Обертка».

05d3d80d-7b65-11f1-8fe4-fa163e2ff576

Здесь вы можете задать период обновления постов в блоке. Мы не рекомендуем отключать кеширование и обновлять посты раньше, чем раз в час. На вкладке «Настройки кеширования» включите кеширование с необходимым типом (1) и задайте период обновления в секундах (2).

На вкладке «Дополнительные настройки» вы можете использовать отступ между блоками (3), задать количество элементов в строке (4) и вид отображения блока (5). Сохраните изменения.

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

Предыдущая статья Получение API token Instagram*
Следующая статья Управление кнопками табов на главной