1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Как в Drupal 8 правильно подключить виджет сообщества Вконтакте?

Главные вкладки

Аватар пользователя chelwolf chelwolf 26 мая 2021 в 13:02

Для подключения создаю пользовательский блок со своим форматом ввода, который делает подсветку кода и убирает различные ограничения (результат как Full HTML). Туда я вставляю код виджета согласно документации: https://vk.com/dev/widget_community

Проблема в том, что виджет при переходе на страницу бесконечно грузится, пока не нажимаем Ctrl + F5 - только тогда он быстро подгружается и корректно работает.

Для исправления проблемы пробовал:
1) Выносить подключение скрипта openapi.js из блока в
2) Подключать его асинхронно как через блок, так и через

<script async src="https://vk.com/js/api/openapi.js?169" type="text/javascript"></script>

3) Попробовал подключить openapi.js асинхронно согласно документации (https://vk.com/dev/openapi)

Получаю либо тот же результат (бесконечную загрузку), либо ошибку, связанную с инициализацией vk: "Uncaught ReferenceError: VK is not defined at..."

4) В настройках сайта (раздел "Производительность") в пункте "Максимальный возраст кеша браузера и прокси" стоит значение "не кешировать". Там же стоят галочки "объединять js и css файлы" - эти настройки также менял, не влияют на проблему.

5) Плагин AdBlock для браузера выключен. Проблема также повторяется, если плагин вообще не установлен.

Подскажите что делаю не так и как заставить виджет работать? В Drupal 7 никаких проблем с этим не было.

Лучший ответ

Аватар пользователя chelwolf chelwolf 26 мая 2021 в 13:54

Взял решение с хабра, оно не выдаёт ошибок в консоли: https://qna.habr.com/q/346387

<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ID_Вашего_Приложения,
      onlyWidgets: true
    });
    VK.Widgets.Group("vk_groups", {mode: 1, no_cover: 1, width: "250"},  ID_Вашей_Группы); //указывается ID группы лишь потому что это пример
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?156";
    el.async = true;
    document.getElementById("vk_groups").appendChild(el);
  }, 0);
</script>
<!-- VK Widget -->
<div id="vk_groups"></div>

Где:
ID_Вашего_Приложения - необходимо создать приложение и перейдя в настройки получить тот самый ИД (без него работать асинхронно не будет)

ID_Вашей_Группы - цифровой ID вашей группы

Комментарии

Аватар пользователя chelwolf chelwolf 26 мая 2021 в 13:54

Взял решение с хабра, оно не выдаёт ошибок в консоли: https://qna.habr.com/q/346387

<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ID_Вашего_Приложения,
      onlyWidgets: true
    });
    VK.Widgets.Group("vk_groups", {mode: 1, no_cover: 1, width: "250"},  ID_Вашей_Группы); //указывается ID группы лишь потому что это пример
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?156";
    el.async = true;
    document.getElementById("vk_groups").appendChild(el);
  }, 0);
</script>
<!-- VK Widget -->
<div id="vk_groups"></div>

Где:
ID_Вашего_Приложения - необходимо создать приложение и перейдя в настройки получить тот самый ИД (без него работать асинхронно не будет)

ID_Вашей_Группы - цифровой ID вашей группы