粉丝页面上的 Facebook Like Widget，评论区域超出可见区域

Posted 2023-03-10

【中文标题】粉丝页面上的 Facebook Like Widget，评论区域超出可见区域

【英文标题】：Facebook Like Widget on Fan page, Comment area out of visible area

【发布时间】：2011-08-14 01:47:12

【问题描述】：

在粉丝页面上使用点赞或发送小部件时（无论您使用 iframe 标记还是 fbml），用于评论的叠加层始终位于右侧。看 http://twitpic.com/4q7ggi 例如。

我找不到让小部件尊重 facebook 选项卡的 520 像素边界的方法。 有关示例，请参见 http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842。 有人知道如何解决这个问题吗？

TIA 鲁菲纳斯

【问题讨论】：

我很想知道这个问题的答案，到目前为止，我能找到的唯一解决方案是将“赞”和“发送”按钮放在屏幕的最左侧。有一个 css hack 来解决这个问题，但它已经有一段时间没有工作了。

我只知道 JS hack，但这似乎只适用于对话框。 （然后仅在极少数情况下）。

@Rufinus 你能把你的代码贴在某个地方，或者你正在处理的页面的链接吗？

您有实时网页或我们可以在 Rufinus 上看到的代码 sn-p 吗？

+1 对 Liam 的问题 - 我找不到像您的屏幕截图一样显示小部件的粉丝页面。

【参考方案1】：

要修复它，我强烈建议将 Facebook 小部件放在页面左侧。任何其他解决方案都可以在一段时间内有效，但将来会失败。 原因是 Facebook 经常更新它的小部件。

【参考方案2】：

我不得不把小箭头移到底部，我就是这样做的。

1) 将弹出窗口移动到所需位置。使用 !important 语句覆盖默认样式。

.fb_edge_comment_widget 
    top: -224px !important; left: -246px !important; height: 191px;
    background: url(../img/arrow-down.gif) 0 100% no-repeat

此样式还包含一个新的箭头图像，它替换了弹出窗口的底线。它包含我自己的新底部箭头，默认为蓝色 (#283E6C)，内部为灰色 (#F2F2F2)。我们可以使用height来调整垂直位置，将背景图片移到底部。

图像将如下所示： 。

2) 将overflow: hidden 应用到包裹iframe 的span，我们将能够通过在步骤3 中应用margin-top 来切断部分iframe，并用我们自己的替换它们。

.fb_edge_comment_widget > span 
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;

我正在使用border-top 来创建我自己的上边框，因为在第3 步中我们正在剪切默认边框和箭头。

3) 将 iframe 向上移动一点以切断其上边框和箭头。

    .fb_edge_comment_widget > span > iframe 
        margin-top: -7px;
       

在我的情况下，结果如下所示：

【参考方案3】：

如果您使用的是 Facebook Like button 的 XFBML 实现，则可以使用 CSS 将“弹出”菜单相对于其在 发送 按钮附近的原始位置重新定位：

上面的例子使用jsFiddle和这个CSS：

.fb_edge_comment_widget 
    margin-left: -343px;

由于“弹出”的内容在 iframe 内，您将无法对其应用任何 CSS ——这意味着，将三角形指示器移动到“弹出”的右侧是不可能的。

由于欺骗和其他黑客攻击，Web 浏览器加强了跨框架脚本的安全性，因此 iframe 被视为具有自己的 CSS 和 javascript 的单独 html 页面。

对于任何高级 CSS 样式，您必须使用 DOM 脚本注入 Facebook Widget 的 iframe ...即使这样它也可能无法跨浏览器工作。

【讨论】：

上一个解决方案的精确副本

【参考方案4】：

尝试将其添加到您的 css 中：

.fb_edge_comment_widget 
    margin-left: -350px;

这会将评论框向左移动，但指向按钮的小箭头也会移动（您可以尝试用另一个元素覆盖它）。它仅在您使用 XFBML 而不是 iframe 时才有效。

这里是an example。

【讨论】：

大多数 FB 解决方法并不理想，但唯一重要的是它何时工作 :-) 感谢 seler。 （如果有人有更好的解决方案，我会等整整 4 天，但我想 100 分是你的）

@seler：我 f#@!#@!爱你。感谢您帮助我解决这种疯狂的问题，即 FB API

似乎它不再起作用了，至少对于 Like 按钮。现在，“活动”按钮和弹出窗口在同一个 Iframe 中……而 CSS 无能为力。

【参考方案5】：

不是一个很好的答案，但我发现的唯一选择是将小部件包装在一个绝对定位的 Div 中，以使其保持在窗口的左侧