Question

我在我的网站谷歌像我们的Facebook页面框。我用这个设置

<div class="fb-like-box" data-href="http://www.facebook.com/pages/valka_cz/120204797463" 
data-width="250" data-height="350" data-show-faces="true" 
data-stream="false" data-header="false">

它已经好几个月了，但今天，FB盒子要宽得多，流到页面的其余部分。 Chrome表示框的宽度为292，它忽略了data-width属性中的250宽度设置。我尝试从Facebook重新生成代码，得到相同的结果，因此语法没有任何改变。

当我关掉脸时，盒子的宽度还可以，250。但是我想要那些脸...... :)

任何想法可能出错？

Answer 1

是的，今天上午这是一个很大的惊喜，但是......现在Facebook Likebox的最小宽度是292px ... http://developers.facebook.com/docs/reference/plugins/like-box/ 这总是很愉快...

Answer 2

今天遇到同样的问题。谢谢你的脸书。类似框的HTML5版本现在强制实施292px的最小宽度，但类似框的iframe版本仍然会响应手动调整代码中的宽度。

要使用iframe替换类似HTML5的框，请转到https://developers.facebook.com/docs/reference/plugins/like-box/并重新生成您的首选项代码调整设置，然后单击“获取代码”，然后取代HTML5代码，绘制iframe代码。插入侧边栏中的文本小部件。根据您的需要调整宽度和高度。我发现宽度为232px允许4列，非常适合我的主题。

Answer 3

以为我会尝试重新实现fb之类的盒子代码，并且根据所选择的选项，我得到不同的结果。如果选择了所有选项（面，流，边框，标题）它可以工作，只需忽略我的较窄宽度（240px）。关闭“faces”会导致我的选项卡面板全部显示（jquery ui tabs）。关闭“流”会单独显示选项卡面板显示，但会删除其顶部边距和填充。

Answer 4

我用带有overflow = hidden

的div包装了类似的框html代码

<div style="overflow:hidden; width: 175px">
    <legend>Like us on Facebook</legend>
    <div class="fb-like-box"
        data-href="https://www.facebook.com"
        data-width="175"
        data-height="70"
        data-show-faces="true"
        data-stream="false"
        data-header="true">
    </div>
</div>

Answer 5

<强>问题

正如其他人所说，Facebook似乎改变了Like-Box插件的行为，假设最小宽度为292像素。忽略低于292像素的任何data-width属性。此问题也可以在Facebook's own reference version中重现。

<强>解决方案

目前，我最终使用以下样式声明作为临时解决方案，直到Facebook找出这个烂摊子。它们基于facebook_like-box_responsive.css。 .fi_container是添加插件的块级容器。在我的情况下，我需要将宽度限制为180像素，但显然这可以更改为低于270像素的任何值。

.fi_container {
    width:180px;overflow:hidden;
}

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

See jsFiddle demo

<强>注意事项

这个解决方案的主要问题是，虽然盒子很适合窄于292像素的容器，但盒子的内容却没有。如果您包含data-stream="true"属性，则帖子的文本会变得非常狭窄且几乎无法读取。同样，包括data-show-faces="true"属性会使轮廓图像行紧密贴合，因为iframe的内部样式假设有问题的最小宽度。总而言之，虽然这个解决方案可以防止插件破坏网站的设计，但它确实阻碍了插件本身的整体可用性。

为什么Like-Box社交插件会忽略低于292的数据宽度属性？

5 个答案:

See jsFiddle demo