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

Опубликовано 10 лет назад

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

Для этого достаточно задать в стилях сайта принудительную ширину блока и фрейма виджета равную 100%. В Вордпресс изменения вносятся в основной стиль шаблона, который обычно расположен в каталоге шаблона и чаще всего называется 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

Подробнее
Комментарии
  1. Будет работать только до того как пользователь изменить размер окна браузера без перезагрузки страницы… Про параметр auto написано и в документации API VK.
  2. Нашел на просторах, работает получше:






    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);
    • Получше, но не так как надо. Блок инициализируется несколько раз и дублируется..
  3. Большое спасибо за решение! ))
    Просто и понятно. =)
    P.S. для таких умников как Антон, хочу разъяснить один момент. — У вас никогда не получится полностью резиновый виджет, тк во фрейм подгружается только то количество участников — сколько влазит. И при увеличения элемента вам не подгружаются новые участники, а при уменьшении они ни куда не исчезают — тк разработчиками не предусмотрена динамика.
    А сетовать вам нужно не на автора данного поста, а на разработчиков виджета.

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