Адаптивный виджет ВКонтакте
В последние пару лет большую популярность приобрела адаптивная верстка сайтов, когда внешний вид сайта, расположение блоков и размер элементов меняется в зависимости от того, на каких экранах просматривается сайт. То есть, на узком экране смартфона сайт будет по прежнему красиво смотреться и им будет удобно пользоваться.
К сожалению, виджеты Вконтакте не поспевают за тенденцией. Например, виджет для сообществ имеет фиксированные размеры ширины и высоты, и при изменении размеров экрана (например, при изменении ориентации планшета) верстка сайта может “поплыть”.
Я вам хочу предложить одно из возможных решений данной особенности, которое подходит для любого виджета Вконтакте и Фейсбуке, как для виджета сообщества, так и, например, для виджета комментариев.
Суть решения в том, чтобы код вызывался не только при загрузке страницы, но и при изменении размеров экрана. В качестве примера вот измененный код виджета для сообществ Вконтакте:
<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.
Аналогичные манипуляции можно проводить и с другими виджетами Вконтакте и Фейсбука, делая их действительно адаптивными!