Facebook点赞并发送插件弹出按钮剪辑
我正在实现一个Facebook应用程序，显示为一个粉丝页上的标签。
该应用程序有一个产品详细信息页面，其中有喜欢，发送和评论插件。
问题是当单击send和like按钮时，弹出对话框(单击按钮后弹出的窗口)被iframe的左边缘裁剪(应用程序使用从右到左的语言)。
从图形设计的角度来看，按钮的位置不能改变，滚动条也不允许。应用程序必须是520px宽，不能超过也不能小于520px。
是否有任何选项可以控制弹出型按钮的位置以防止其被剪裁？有没有其他方法可以防止剪裁？
我在这里搜索了类似的问题，但没有成功。
回答 2
Stack Overflow用户
发布于 2012-03-05 18:50:37
由于这些按钮在页面中包含HTML结构，因此可以通过CSS设置样式。所以你可以用CSS来移动弹出对话框。
一些代码
如果你仔细观察facebook提供的弹出窗口，你会发现它有一些附加的样式：
您现在唯一需要做的就是通过CSS将此弹出窗口移动到正确的位置。
例如:如果你想完全隐藏like按钮的评论弹出窗口，你可以使用这个CSS：
.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}如果您现在想要移动它，您不能使用.fb_edge_comment_widget.fb_iframe_widget，因为元素属性(由JavaScript设置)将覆盖您的CSS。你必须使用比它低一个元素的span：
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}这段代码会将弹出窗口向左移动300px：
这不是最好的解决方案(请注意，框顶部的小箭头现在不指向任何内容)，但它是有效的。
完整的测试代码：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
#wrap {
width: 650px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=336384849737745";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
</div>
</body>
</html>Stack Overflow用户
发布于 2012-12-02 18:00:46
这不是你问题的确切答案。看起来您根本无法控制弹出型按钮。我很高兴通过将我的fb按钮代码放在一个和按钮一样高的div中，并设置了overflow: hidden，从而完全摆脱了弹出按钮。那么弹出窗口就完全不可见了。
<div class="fb-wrap">
<div class="fb-like" data-href="http://www.facebook.com/YOURURL="false" data-width="200" data-show-faces="false" data-colorscheme="dark"></div></div>
<style>
.fb-wrap {
height: 36px;
overflow: hidden;
}
</style>https://stackoverflow.com/questions/8957009
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号