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

8 сентября 2013 1 055 4

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

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

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

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

  ПОДПИСАТЬСЯ

Комментарии
  1. Спасибо. Работает! (Попробовал использовать с комментариями ВКонтакте)

  2. как растянут виджет страницы от фейспука на ширину его контейнера. Не работает его дата-тэг «data-adapt-container-width» — полнейшая ересть!

  3. Спасибище! Замучилась с этим виджетом в мобильной версии. С Контактом все работает!

Добавить комментарий
Разгоните свой WordPress

Выбираем быстрый и надежный хостинг для своих сайтов

Подробнее