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

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

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

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