使 Facebook Like Box 响应式答案

【问题标题】：Make a Facebook Like Box responsive使 Facebook Like Box 响应式
【发布时间】：2014-09-02 22:56:21
【问题描述】：

当我们想要插入 Facebook like box 时，会自动生成代码以插入到我们的网站中。

不幸的是，like box 的宽度很难融入代码中：

<div class="fb-like-box" data-href="https://www.facebook.com/bibandtucker.net.au" data-width="450" data-colorscheme="light" data-show-faces="false" data-width="300" data-header="true" data-stream="true" data-show-border="false"></div>

我怎样才能使 Facebook 喜欢的框响应，以便它会减小宽度以容纳小于硬编码宽度值的内容区域？

您可以在this website 上查看问题。观察减小视口宽度时会发生什么。

【问题讨论】：

标签： responsive-design facebook-like

【解决方案1】：

您可以通过这样做使其流畅（谷歌搜索）：

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

您可以通过查找它开始弄乱布局的位置来使其具有响应性：

@media (max-width:1100px) { 
    .fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget span iframe[style] {
        width: 100% !important;
        min-width: 200px;
    }
}

由于它是您无法控制的 iframe，因此无法进一步设置样式。

演示：http://jsbin.com/mehil/1

【讨论】：

【解决方案2】：

<div class="fb-wrap">
<div class="fb-like-box" data-href="http://www.facebook.com/#"
data-width="100%" data-height="#"
data-show-faces="true" data-stream="false" data-header="false"></div>
</div>

.fb-wrap {
padding-top: 10px; width:90%; margin: 0 auto;}

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

这对我很有效

【讨论】：

【解决方案3】：

这适用于我的真实面孔

.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style] 

{max-width: 100% !important;}

【讨论】：

【解决方案4】：

这在 2015 年不再有效 - facebook 已更新其代码，以便最小宽度为 180 像素。

要解决这个问题，您必须使用 JS。

在这种情况下，.facebook-likebox 是包装器（相对于其他元素动态缩放），.fb-page 是 iframe 的容器。代码是跨浏览器的。

这是我的代码片段：

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 180;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $(window).on('resize', facebookScale);
  })

编辑：还要确保您的 CSS 中包含以下内容：

.fb-page{ 
  transform-origin: 0 0;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
}

编辑 2：facebook 似乎已将小部件更新为现在的最小宽度为 180。因此代码已更新以反映这一点。小部件应调整大小以适应容器的宽度，否则

【讨论】：