ВКонтакте

Как сделать виджет сообщества ВКонтакте резиновым

11 ноября 2013 5 078 8

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

Reg.ru: Неограниченный бесплатный трафик
Reg.ru: Неограниченный бесплатный трафик

Для этого достаточно задать в стилях сайта принудительную ширину блока и фрейма виджета равную 100%. В WordPress изменения вносятся в основной стиль шаблона, который обычно расположен в каталоге шаблона и чаще всего называется style.css.

#vk_groups,
#vk_groups iframe {
     width: 100% !important;
}

А непосредственно в коде виджета нужно указать автоматическую ширину (width: «auto»)

VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "400", color1: 'FFFFFF', color2: '50a9c3', color3: '50a9c3'}, Ваш_ID);

Как это работает вы можете увидеть на моем сайте справа в сайдбаре. Не забудьте подписаться на обновления!

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии
  • Антон

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

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

  • Дмитрий

    Большое спасибо за решение! ))
    Просто и понятно. =)
    P.S. для таких умников как Антон, хочу разъяснить один момент. — У вас никогда не получится полностью резиновый виджет, тк во фрейм подгружается только то количество участников — сколько влазит. И при увеличения элемента вам не подгружаются новые участники, а при уменьшении они ни куда не исчезают — тк разработчиками не предусмотрена динамика.
    А сетовать вам нужно не на автора данного поста, а на разработчиков виджета.

    Ну уж если вам так не терпится сделать полностью резиновый виджет — сделайте его перезагрузку при изменении размера окна — самый простой вариант.

  • Спасибо! Очень кстати ваш код! Успехов!

  • fdr

    Нашел на просторах, работает получше:

    function VK_Widget_Init(){
    document.getElementById(‘vk_groups’).innerHTML = «»;
    var vk_width = document.getElementById(‘vk_tabpanel’).clientWidth;
    VK.Widgets.Group(«vk_groups», {
    mode: 0,
    width: «auto»,
    height: «250»,
    color1: ‘FFFFFF’,
    color2: ‘2B587A’,
    color3: ‘5B7FA6’
    }, ID_ВАШЕЙ_ГРУППЫ);
    };
    window.addEventListener(‘load’, VK_Widget_Init, false);
    window.addEventListener(‘resize’, VK_Widget_Init, false);

    • Fear Fear

      Получше, но не так как надо. Блок инициализируется несколько раз и дублируется..

  • Просто великолепно. Спасибо!

  • Fear Fear

    Будет работать только до того как пользователь изменить размер окна браузера без перезагрузки страницы… Про параметр auto написано и в документации API VK.

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее