2

我在我的网站上有我们 facebook 页面的 google like 框。我使用这个设置

<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。但我想要那里的面...... :)

有什么想法可能是错的吗？

4

5 回答 5

4

是的，今天早上这是一个很大的惊喜，但是...... Facebook Likebox 现在的最小宽度是 292 像素...... http://developers.facebook.com/docs/reference/plugins/like-box/ 这总是一种乐趣。 ..

于 2013-06-12T08:51:28.187 回答
4

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

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

于 2013-06-13T03:21:31.173 回答
0

以为我会尝试重新实现 fb like box 代码，并且根据选择的选项，我会得到不同的结果。如果选择了所有选项（面孔、流、边框、标题），它会起作用，只是忽略我较窄的宽度（240 像素）。关闭“面孔”会导致我的选项卡面板一次全部显示（jquery ui 选项卡）。关闭“流”会单独显示选项卡面板，但会删除它们的上边距和填充。

于 2013-06-12T16:47:32.540 回答
0

我用溢出=隐藏的div包装了like box 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>
于 2013-06-13T04:54:29.480 回答
0

问题

正如其他人所说，Facebook 似乎已经改变了 Like-Box 插件的行为，假设最小宽度为 292 像素。任何data-width低于 292 像素的属性都会被忽略。这个问题也可以在Facebook 自己的参考版本中重现。

解决方案

暂时，我最终使用以下样式声明作为临时解决方案，直到 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;
}

参见 jsFiddle 演示

注意事项

这个解决方案的主要问题是，虽然盒子非常适合小于 292 像素的容器，但盒子的内容却不能。如果包含该data-stream="true"属性，则帖子的文本会变得非常狭窄且难以阅读。类似地，包含该data-show-faces="true"属性可以紧密配合个人资料图像的行，因为iframe的内部样式假定有问题的最小宽度。总之，虽然这个解决方案可以防止插件破坏网站的设计，但它确实阻碍了插件本身的整体可用性。

于 2013-06-13T07:58:04.360 回答