Адаптивные (резиновые) виджеты ВКонтакте и 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.
Вот и всё. Попробуйте поресайзить окно браузера, либо открыть сайт с мобильного устройства - всё должно работать.