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

Добавлено 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?116"></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"}, 26292363);
  };
  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.

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


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


Сообщить об ошибке