Адаптивный виджет ВКонтакте

Добавлено 2 декабря 2018 в 03:01

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

Адаптивный виджет ВКонтакте
Адаптивный виджет ВКонтакте

К сожалению, виджеты Вконтакте не поспевают за тенденцией. Например, виджет для сообществ имеет фиксированные размеры ширины и высоты, и при изменении размеров экрана (например, при изменении ориентации планшета) верстка сайта может “поплыть”.

Я вам хочу предложить одно из возможных решений данной особенности, которое подходит для любого виджета Вконтакте и Фейсбуке, как для виджета сообщества, так и, например, для виджета комментариев.

Суть решения в том, чтобы код вызывался не только при загрузке страницы, но и при изменении размеров экрана. В качестве примера вот измененный код виджета для сообществ Вконтакте:

<div id="vk_widget">
<div id="vk_groups"></div>
</div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?161"></script>

<script>
  function VK_Widget_Init(){
    document.getElementById('vk_groups').innerHTML = "";
    var vk_width = document.getElementById('vk_widget').clientWidth;
    VK.Widgets.Group("vk_groups", {mode: 0, width: vk_width, height: "241", color1: "2B2B2B", color2: "FFFFFF", color3: "2B2B2B"}, 133929011);
  };
  window.addEventListener('load', VK_Widget_Init, false);
  window.addEventListener('resize', VK_Widget_Init, false);
</script>

Здесь мы используем блок-обертку vk_widget, который у нас адаптивный, то есть он меняет свою ширину/высоту в зависимости от размеров экрана.

При загрузке страницы или изменении размеров экрана будет вызываться функция VK_Widget_Init() в которой происходит сначала занесение текущей ширины блока vk_widget в переменную vk_width, которая в дальнейшем используется в вызове функции VK.Widgets.Group.

Таким же образом можно заменить высоту блока, определив новую переменную для высоты блока vk_widget и подставив ее в VK.Widgets.Group.

Аналогичные манипуляции можно проводить и с другими виджетами Вконтакте и Фейсбука, делая их действительно адаптивными!

Теги

front-endАдаптивный дизайнВеб-разработкаФронтенд

На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.

В случае комментирования в качестве гостя (без регистрации на disqus.com) для публикации комментария требуется время на премодерацию.


  • 2019-07-09antzol

    В коде в строках 8, 9, 12 и 13 использовались не те кавычки. Если вы просто копировали, то должна была выдаваться ошибка в консоли.
    Сейчас всё исправлено. Попробуйте снова.

  • 2019-07-09Максим

    Все верно. Но я так и не понял как Вашим кодом воспользоваться. Все равно ничего не подгружается :( У меня вордпресс, абсолютный путь до скрипта прописывал, но все равно ничего не происходит...

  • 2019-07-08antzol

    Если бы всё было так просто.
    При изменении размеров окна виджет из стандартного примера (код которого привели вы) своих размеров не меняет. В итоге, если уменьшили окно, то появляется либо горизонтальная полоса прокрутки, либо виджет обрезается (зависит от значения overflow у родительских блоков). А при увеличении окна, наоборот, будет маленький виджет в огромном пустом пространстве.

  • 2019-07-08Максим

    Вообще инфа устарела. Сейчас более просто делается адаптивность:


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


    <div id="vk_groups"></div>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 4, width:'auto', color3: 'F58323'}, 26292363);
    </script>
  • 2019-07-06antzol

    Пробуете на локальном html файле (то есть открываете не через http сервер)? Если да, то просто не загружается скрипт openapi.js. Браузер пытается загрузить его, используя протокол, такой же как у странице с которой переходят по ссылке, то есть обращается к нему как "file://vk.com/js/api/openap...".
    Для теста с локальным html файлов замените

    src="//vk.com/js/api/openapi.js?116"


    на

    src="https://vk.com/js/api/openapi.js?116"
  • 2019-07-05Максим

    Что-то после размещения данного кода вообще ничего не отображается. Попробовал в том числе айди своего приложения. Что не так, не подскажете?