Как уменьшить виджет «Like Box» от Facebook

В этом месяце (июнь 2013) Facebook решил внести правки в свои виджеты (по крайней мере в «Like Box») и после этого на одном сайте это блок вылез на часть текста, и стал шириной 292 пикселя. И это не смотря на то, что при его создании указана ширина — 200 пикселей.

Не могу утверждать что это затронуло все сайты, на на сайте оператора связи Лайф тоже замечен такой глюк.

глюк виджета Facebook likebox

глюк виджета Facebook likebox на сайте life.com.ua

глюк виджета Facebook likebox на моем сайтеглюк виджета Facebook likebox на моем сайте

глюк виджета Facebook likebox на моем сайте

После изучения проблемы, предпринял попытку уменьшить размер с помощью javascript.

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

Это выглядело примерно так:

<script type="text/javascript">
jQuery(document).ready(function() { 		
   jQuery('.fb_iframe_widget iframe').css('width', '200px'); 	
});
</script>

По этому полез ковырять css стили, и выяснил что в коде уже подгружаются стили, задающие ширину и высоту блока, когда грузиться javascript файлы фейсбука. По этому создал свои стили, сделав их !important, что-бы они заменили стандартные стили фейсбука.

.fb_iframe_widget iframe {
  height: 135px !important;
  width: 200px !important;
}

Теперь вам осталось добавить в свой файл стилей этот код, поменяв при необходимости ширину и высоту.

UP 21.06.2014

Более надежный и красивый способ подгона по ширине:

1. Создаем контейнер для виджета Facebook

  <div id="fb_container" style="width:100%;">

2. В футере прописываем скрипт (необходима библиоте jQuery), который при загрузке или обновлении страницы обновляет код виджета на новый с новой шириной.

<script>
	$(window).bind("load resize", function(){
	  var container_width = $('#fb_container').width();
		$('#container').html('<div class="fb-like-box" ' +
		'data-colorscheme="light" data-href="https://www.facebook.com/premiumlsclub"' +
		' data-width="' + container_width + '" data-height="344" data-show-faces="true" ' +
		'data-stream="false" data-header="true" data-show-border="true"></div>');
		FB.XFBML.parse( );
	});
</script>

Пример работы: http://premiumlsclub.com/