logo标签列表

Facebook 粉丝页上的“赞”小部件，评论区域超出可见区域

cssfacebookfacebook-pagefacebook-widgets
20
我很想知道答案，到目前为止，我能找到的唯一解决方案是将“喜欢”和“发送”按钮放在屏幕的最左侧。虽然有一个 CSS hack 可以解决这个问题，但它已经很久没有起作用了。 - DannyKK
我只知道一个JS的hack，但这似乎只适用于对话框（而且只在极少数情况下有效）。 - Rufinus
6
@Rufinus你能否把你的代码放在某个地方，或者提供你正在工作的页面的链接？我希望你能分享一下。 - Thomas Shields
你有一个实时的网页或者一段代码片段可以在Rufinus上展示吗？ - Liam
给Liam的问题点赞-我找不到一个粉丝页面，能像你的截图一样显示小部件。 - Ben Hull
大家好，我添加了一个示例链接。 - Rufinus
5个回答
18

尝试将以下内容添加到您的CSS中：

.fb_edge_comment_widget {
    margin-left: -350px;
}

这将把评论框移动到左边，但指向按钮的小箭头也会移动（您可以尝试用另一个元素来覆盖它）。此方法仅适用于使用XFBML而不是iframe的情况。

这里是示例。

大多数 Facebook 的解决方法都不是理想的，但唯一重要的是它是否有效 :-) 感谢 seler。 （如果可能有更好的解决方案，我会等待完整的4天，但我猜这100个点数是属于你的） - Rufinus
@seler：我真的非常感谢你帮我解决了这个疯狂的FB API问题，我非常爱你。 - rburhum
3
看起来它不再起作用了，至少对于“点赞”按钮来说是这样。现在，“活动”按钮和弹出窗口都在同一个Iframe中...而CSS无能为力。 - theredled
3

我必须将小箭头移动到底部，这是我所做的。

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调整垂直位置，并将背景图片移到底部。
图像看起来像这样：Image overlay for facebook like button popup。
2) 对包裹 iframe 的 span 应用overflow: hidden，我们可以通过在第三步应用margin-top来裁剪 iframe 的某些部分，然后用我们自己的东西替换它们。
.fb_edge_comment_widget > span {
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}

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

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

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

在我的案例中，结果看起来像这样：

在此输入图片描述

2
如果您正在使用Facebook Like button的XFBML实现，您可以使用CSS重新定位“flyout”菜单，使其相对于原始位置（靠近发送按钮）重新定位：

enter image description here

上面的例子使用了 jsFiddle，以及以下 CSS：
.fb_edge_comment_widget {
    margin-left: -343px;
}

由于“flyout”的内容位于一个iframe中，您将无法对其应用任何CSS样式——这意味着将三角指示器移动到“flyout”的右侧是不可能的。
由于欺骗和其他黑客攻击，Web浏览器已经加强了跨框架脚本的安全性，因此iframes被视为具有自己的CSS和JavaScript的单独HTML页面。
对于任何高级CSS样式，您都必须使用DOM脚本插入Facebook Widget的iframe...即使这样，在不同的浏览器中也可能无法正常工作。
2
与上一个解决方案完全相同 - seler
0

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

0
为了解决这个问题，我强烈建议将Facebook小部件放在页面的左侧。任何其他解决方案可能在一定时间内有效，但在未来会失败。原因是Facebook经常更新其小部件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接