Как сделать Facebook Like Box отзывчивым?

Ответ 1

ПРИМЕЧАНИЕ: этот ответ устарел. См. ответ wiki сообщества ниже для актуального решения.

Я нашел этот Gist сегодня, и он отлично работает: https://gist.github.com/2571173

(Большое спасибо https://gist.github.com/smeranda)

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

Ответ 2

Пример Colin для меня столкнулся с подобной кнопкой. Поэтому я адаптировал его, чтобы ориентироваться только на Like Box.

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

Протестировано в большинстве современных браузеров.

Ответ 3

ПРИМЕЧАНИЕ. Решение Colin не работает для меня. Возможно, Facebook изменил разметку. Использование * должно быть более надежным в будущем.

Оберните поле Like с помощью div:

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

и добавьте это в свой файл css:

#likebox-wrapper * {
   width: 100% !important;
}

Ответ 4

По состоянию на 4 августа 2015 года на родной фреймворке, подобном блоку, есть отзывчивый фрагмент кода, доступный на странице разработчиков Facebook.

Здесь вы можете создать свой отзывчивый Facebook.

https://developers.facebook.com/docs/plugins/page-plugin

Это лучшее решение, а не взлом CSS.

Ответ 5

Ответ, который вы ищете по состоянию на июнь 2013 года, можно найти здесь:

https://gist.github.com/dineshcooper/2111366

Выполняется с помощью jQuery для перезаписи внутреннего HTML родительского контейнера, который содержит виджет facebook.

Надеюсь, это поможет!

Ответ 6

Ни один из трюков css не работал у меня (в моем случае fb-подобная коробка была вытащена прямо с помощью "float: right" ). Однако то, что работало без каких-либо дополнительных трюков, - это версия кода кнопки IFRAME. То есть:.

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

(Обратите внимание на пользовательскую ширину в стиле и не нужно включать дополнительный javascript.)

Ответ 7

Я пытался сделать это на Drupal 7 с модулем "fb_likebox" (https://drupal.org/project/fb_likebox). Чтобы он был отзывчивым. Оказывается, мне пришлось написать свой собственный вариант модуля Contrib и изменить настройку ширины. (параметр высоты по умолчанию для меня не имеет значения). Как только я удалил ширину, я добавил <div id="likebox-wrapper"> в fb_likebox.tpl.php.

Вот мой CSS, чтобы его стиль:

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`

Ответ 8

Вы можете увидеть способ facebook для создания адаптивной ширины

Утверждается, что:

• Плагин определит его ширину при загрузке страницы
• Он не будет реагировать на изменения в коробке после загрузки страницы.

Если вы хотите отрегулировать ширину плагина при изменении размера окна, вам необходимо вручную обновить плагин.

Итак, вот решение, которое работает:

HTML

 <div class="fb-page">
   <!-- Iframe code -->
 </div>

Javascript

  (function($){ 
    $(window).on('resize', function() {
      $(".fb-page").attr("data-width", $('.fb-column').width()).attr("data-height", $('.fb-column').height());
        if (typeof FB !== 'undefined' ) {
          FB.XFBML.parse();
        }
    });
  })(jQuery);