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

8 сентября 2013 763 3

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

ThemeForest: Лучшие темы интернет-магазинов для WordPress
ThemeForest: Лучшие темы интернет-магазинов для WordPress

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

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

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

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

Комментарии
  • prukon

    12

  • Alexei Vinidiktov

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

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

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее