我想禁用当用户点击我放置在我网站上的Facebook(fbml)Like按钮时弹出的评论框。这可能吗?我在文档中找不到任何细节。
答案 0 :(得分:125)
最简单的修复方法是在Facebook赞(XFBML版本而不是iframe版本)之后隐藏评论框:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
将CSS样式放在任何CSS文件中并看到魔术,它可以工作:)
答案 1 :(得分:81)
将iframe放在一个大小合适的div中,溢出设置为hidden,解决了这个问题 - 尽管这实际上只是隐藏了这个问题。
答案 2 :(得分:69)
我在CSS中使用它:
.fb-like{
height: 20px;
overflow: hidden;
}
使用普通的HTML5代码呈现Facebook按钮,如下所示:
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
GR -
答案 3 :(得分:14)
我所做的是为这样的“喜欢”按钮创建一个div:
<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>
这就是CSS:
.fb_like {
overflow: hidden;
width: 90px;
}
答案 4 :(得分:9)
我喜欢Mohammed Arif的解决方案,我选择它作为最佳答案。但是如果FB改变了类,那么下面的代码将始终有效。
FB.Event.subscribe('edge.create', function(response) {
$('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
FB.XFBML.parse();
});
其中“like_button_holder”是“你的”div id,其中包含像按钮代码一样的facebook
答案 5 :(得分:5)
清洁解决方案有效(截至 2014年5月) -
首先确保<div class="fb-like"
数据布局属性为按钮 -
<div class="fb-like" data-layout="button"........></div>
只需添加此CSS -
即可.fb-like{
overflow: hidden !important;
}
那就是它!
答案 6 :(得分:4)
这里不是Debby Downer,但是没有隐藏评论框违反Facebook政策?
IV。应用集成点 d。您不得隐藏或覆盖社交插件的元素,例如Like按钮或Like框插件。
答案 7 :(得分:3)
同意BrynJ,目前最好的解决方案是将类似按钮放在20px高div容器中,并将溢出设置为隐藏(我读到FB最近将注释flyout移动到iFrame中的某处,因此解决方案修改了 .fb_edge_widget_with_comment 的样式可能对iFrame用户不再有用。
使用AddThis?这样做:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
答案 8 :(得分:3)
我无法使用display: none
选项来使用HTML 5版本的按钮。相反,我将创建了类似按钮按钮的div作为目标,并将溢出设置为隐藏。
在我的主css文件中删除以下内容可以解决问题:
#fb_button{
overflow:hidden;
}
答案 9 :(得分:2)
如果单击“喜欢”时相似按钮消失,并且您有一个容器div来隐藏注释弹出窗口,请使用以下解决方案:
创建一个容器div来放置类似fb的按钮并为其提供以下css:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
答案 10 :(得分:2)
我设法通过实施IFRAME版本绕过Facebook,就像按钮评论弹出问题一样。我采取了以下步骤:
从我所看到的,具有IFRAME实现的like按钮不会触发任何弹出窗口。它只是一个像按钮一样的功能。这是我期望的结果。
祝你好运。答案 11 :(得分:1)
让我们尝试一下:
FB.Event.subscribe('edge.create', function(response) {
var $parent = $('[href="'+response+'"]').parent();
$parent.empty();
$parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
FB.XFBML.parse();
});
答案 12 :(得分:1)
以下是使用Like按钮作为标准按钮以及Twitter和Linkedin的代码。希望它有所帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB</title>
<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; }
.social ul li { float: left; margin-right: 10px; }
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="social">
<ul>
<li class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe>
</li>
<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
</li>
<li class="linkedin">
<script type="IN/Share" data-url="http://www.smh.com.au/"></script>
</li>
</ul>
</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/en_US/all.js#xfbml=1&appId=333450970117655";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
</body>
</html>
答案 13 :(得分:1)
正如我做的那样,在以下情况下将禁用评论弹出窗口:
答案 14 :(得分:1)
如果您使用较新的HTML5按钮,并且您应该向前兼容并由Facebook建议,那么很容易,与其他人所说的不同:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
对于使用AddThis插件的人来说,第二类是奖励。
答案 15 :(得分:0)
show-faces=true
时不应使用上述溢出高度选项。否则,它会隐藏面孔。
答案 16 :(得分:0)
如果您只想显示相似的按钮,可以尝试这样的
HTML:
<div class="fb_like">
<div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
<div class="like_counter_hider"></div>
</div>
CSS:
.fb_like {
overflow: hidden;
width: 80px;
height: 20px;
}
.like_counter_hider {
position: absolute;
top: 0;
left: 45px;
width: 35px;
height: 20px;
background-color: #f3f3f3; /*you'll have to match background color*/
z-index: 200;
}
答案 17 :(得分:0)
在我的情况下(使用XFBML版本)我已添加到标签:
width="90" height="20" style="overflow: hidden;"
所以最终的结果是:
<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>
它正确隐藏了评论弹出窗口。
答案 18 :(得分:0)
将溢出设置为隐藏可能会有所帮助。在主css文件中执行此操作..
#fb_button{
overflow:hidden;
}
答案 19 :(得分:0)
隐藏评论框但如果评论弹出框后面有可点击元素,则可能会产生问题。
你必须隐藏它并将其从DOM帖子中删除,如。
这是隐藏评论框的CSS:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
以下是删除DOM元素的JQuery方法:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
以下是使用回调提供的小部件的纯javascript方式:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
答案 20 :(得分:0)
如何让包含like按钮的iframe与按钮的大小相同:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
那就是它。