Как сделать адаптивный виджет

Для начала следует отредактировать CSS-файл. Если у вас на сайте оба виджета - вставьте такой код:

#vk_groups, #vk_groupsiframe, .fb_iframe_widget, .fb_iframe_widgetspan, .fb_iframe_widgetspaniframe[style]{ width: 100% !important; }

Если только ВКонтакте:

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

Если только Facebook:

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {width: 100% !important;}

Затем в самом коде виджета у width нужно прописать auto.

Пример кода для ВКонтакте:

<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "250", color1: 'FFFFFF', color2: '#19232d', color3: 'E54E53'}, тут_id_паблика);
</script>

Пример кода для Facebook:

<div class="fb-like-box" data-href="тут_ссылка_на_страницу" data-width="auto" data-height="250" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

Как сделать адаптивные комментарии ВКонтакте и Facebook

Рекомендую делать адаптивными не только виджеты, но и комментарии. Если стоят комментарии обеих социальных сетей:

#vk_comments, #vk_comments iframe, .fb-comments, .fb-comments iframe[style], .fb-comments span, .fb-comments iframe span[style] {width: 100% !important;}

Если только ВКонтакте:

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

Если только Facebook:

.fb-comments, .fb-comments iframe[style], .fb-comments span, .fb-comments iframe span[style] {width: 100% !important;}

В случае с комментариями тоже необходимо в самом коде виджета у width прописать auto.

Вот и всё. Попробуйте поресайзить окно браузера, либо открыть сайт с мобильного устройства - всё должно работать.