Адаптивные (резиновые) виджеты ВКонтакте и Facebook для сайтов

Что не говори, а адаптивная вёрстка - это некий тренд, под который приходится подстраиваться. Спорить о её необходимости нет смысла даже из за того, что Google начал повышать в выдаче сайты с адаптивными шаблонами.

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

Уже приготовившись к долгим поискам решения проблемы я просто решил прописать в CSS ширину виджета 100% и выставить ширину auto в самих виджетах. И да, это даже заработало!

А теперь поподробней.

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

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

	#vk_groups, #vk_groups iframe, .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[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.

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