Главная › Новости

Как сделать виджеты комментариев Facebook и ВКонтакте во всю ширину блока

Опубликовано: 28.08.2018

Axure - навигационное меню, слайдер и табы

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

И если внутри сайта, разработчик еще может как-то предусмотреть и проконтролировать все вариации представления контента, то вот с подключенными внешними сервисами иногда возникают задачи, которые стандартными (рекомендованными) методами просто не решаются.

Adobe Muse уроки | 57. Полноэкранный блок - виджет Adobe Muse

Я не раз сталкивался с такой, казалось бы простой задачей, как установка на сайт виджетов комментирования Facebook и ВКонтакте. Все довольно просто: регистрируешь приложение, настраиваешь вывод, генерируешь код и вставляешь в нужное место на сайте. Все бы ничего, но вот ни тот, ни другой виджет не поддерживают резиновые размеры в процентах. И такая банальная задача, как растянуть виджет на весь экран или вписать в резиновый блок, средствами самого виджета просто не решалась. Из-за чего адаптивная верстка начинала терять весь смысл.

Одностраничник - Вставка комментариев социальных сетей ВКонтакте, HyperComments

На самом деле — все очень просто, и довольно легко решается. Достаточно внести в CSS-таблицу вашего сайта несколько уточняющих строк стилей для отображения виджетов комментирования.

CSS для растягивания на всю ширину виджета комментариев ВКонтакте

/* Full width VK comments from danilin.biz */ #vk_comments, #vk_comments iframe { width: 100% !important; }

CSS для растягивания на всю ширину виджета комментариев Facebook

/* Full width Facebook comments from danilin.biz */ .fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] { width: 100% !important; }

Обратите внимание, что стили Facebook будут работать только с кодом на HTML5, причем исключительно на актуальной на данный момент версии. На старых версиях использовалась немного иная структура стилей. Я думаю, это еще один повод, чтобы обновить наконец свои старые виджеты Facebook. Ну, а как будет выглядеть код в будущем, я, к сожалению, не знаю.

Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!