Facebook的像button – 如何禁用评论popup？

我想要禁用当用户点击我放在我的网站上的Facebook（fbml）Likebutton时popup的评论框。 这可能吗？ 我在文档中找不到任何细节。

最简单的修复方法是隐藏Facebook Like（XFBML版本不是iframe之一）之后的评论框： 

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr { display: none !important; }

把CSS样式放在你的任何CSS文件中，看看它的效果:)

把iframe放在一个大小适当的div中，溢出设置为隐藏，解决了这个问题 – 尽pipe这实际上只是隐藏了这个问题。

我在我的CSS中使用这个： 

 .fb-like{ height: 20px; overflow: hidden; }

并使用正常的HTML5代码呈现Facebookbutton，如下所示： 

 <div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

GR-

我所做的是创造一个像这样的“喜欢”button的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; }

我喜欢穆罕默德阿里夫的解决scheme，我select它作为最好的答案。 但是，如果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举行像button代码的Facebook

更清洁的解决scheme （截至2014年5月 ） –

  1. 首先确保<div class="fb-like"具有data-layout属性作为button – 

     <div class="fb-like" data-layout="button"........></div>

  2. 只需添加这个CSS- 

     .fb-like{ overflow: hidden !important; }

而已！

演示

不是在这里的Debby唐纳，但不隐藏评论框违反Facebook的政策？

IV。 应用程序集成点d。 您不得遮盖或遮盖我们社交插件的元素，例如Likebutton或Like框插件。

https://developers.facebook.com/policy/

我无法使用display: none选项来处理HTML 5版本的button。 相反，我的目标是创build像buttonbutton的div，并将溢出设置为隐藏。

在我的主要css文件中删除以下内容的窍门是： 

 #fb_button{ overflow:hidden; }

同意BrynJ，目前最好的解决scheme是把类似的button放在一个20px的高div容器，并设置溢出隐藏（我读了FB最近把注释展开移动到iFrame的地方，所以解决scheme修改了样式。对于iFrame用户， fb_edge_widget_with_comment可能不再有用）。

使用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>

如果类似button消失，当你点击“喜欢”，你有一个容器div来隐藏评论popup，然后使用以下解决scheme：

创build一个容器div放置类似fb的button，并给它下面的CSS： 

 .fb_like { overflow: hidden; width: 90px; } .fb_like iframe { left: 0 !important; }

我设法通过实现IFRAME版本来绕开Facebook的button注释popup问题。 我采取了以下步骤来做到这一点：

  1. 访问https://developers.facebook.com/docs/plugins/like-button/
  2. 将“Like to URL”更改为您的Facebook页面URL
  3. 根据需要select任何其他选项（布局，操作types等）
  4. 按“获取代码”button
  5. selectIFRAME版本
  6. 确保你select你的Facebook应用程序，它说'这个脚本使用你的应用程序的应用程序ID'
  7. 在您的应用程序中实现提供的代码

从我所看到的，像IFRAME实现的button不会触发任何popup窗口。 它只是一个像button一样的function。 这是我想要的结果。

祝你好运。

以下是使Likebutton与Twitter和Linkedin一起工作的标准button的代码。 希望它有帮助。 

 <!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&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;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="in.js" type="text/javascript">lang: en_US</script> </body> </html>

让我们试试这个： 

 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(); });

正如我所做的那样，评论popup窗口将被禁用时：

  1. 显示面孔： – >取消选中它
  2. 获取代码： – >selectIFRAME选项

如果您使用较新的HTML5button，并且您应该向前兼容并由Facebookbuild议，那么很容易，从其他人所说的话： 

 .fb-like, .addthis_button_facebook_like height: 25px overflow: hidden

第二类是使用AddThis插件的人的奖金。

当show-faces=true时，不应使用上面提到的溢出高度选项。 否则，它会隐藏脸部。

在我的情况下（与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>

它正确隐藏评论popup窗口。

隐藏评论框的工作，但可以创build问题，如果你有评论popup框后面的可点击的元素。

你必须隐藏它，并从DOMpost中删除它。

这里是隐藏评论框的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() });

以下是使用callback中提供的小部件的纯JavaScript方法： 

 FB.Event.subscribe('edge.create', function (href, widget) { widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode); });

如果你只想显示类似的button，你可以尝试这样的事情

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; }

设置溢出隐藏可能会有所帮助。 在你的主要CSS文件中做这个 

 #fb_button{ overflow:hidden; }

如何使包含类似button的iframe与button的大小相同： 

 .fb_iframe_widget_lift { width: 49px !important; height: 20px !important; }

而已。

Interesting Posts