106

我想禁用当用户单击我放置在我的网站上的 Facebook (fbml) Like 按钮时弹出的评论框。这可能吗？我在文档中找不到任何详细信息。

4

21 回答 21

125

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

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

将 CSS 样式放在任何 CSS 文件中，看看它的神奇之处：)

于 2011-02-02T05:55:32.490 回答
80

将 iframe 放在适当大小的 div 中，溢出设置为隐藏解决了这个问题 - 尽管这实际上只是隐藏了问题本身。

于 2010-07-22T19:20:03.420 回答
68

我在我的 CSS 中使用它：

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

并使用普通的 HTML5 代码呈现 Facebook 按钮，如下所示：

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

gr-

于 2012-10-21T12:59:48.053 回答
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;
}
于 2012-11-01T07:04:00.407 回答
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 按钮代码

于 2012-06-18T20:29:12.683 回答
5

有效的清洁解决方案（截至2014 年5 月）-

  1. 首先确保将<div class="fb-like" 具有数据布局属性作为按钮-

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

  2. 只需添加这个 CSS-

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

就是这样！

演示

于 2014-05-28T10:06:27.273 回答
4

不要在这里成为黛比·唐纳，但隐藏评论框不违反 Facebook 政策吗？

四。应用程序集成点 d. 您不得遮盖或遮盖我们社交插件的元素，例如点赞按钮或点赞框插件。

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

于 2013-05-17T20:27:05.750 回答
3

我无法display: none选择使用 HTML 5 版本的按钮。相反，我定位了创建类似按钮按钮的 div，并将溢出设置为隐藏。

在我的主 css 文件中删除以下内容就可以了：

#fb_button{
    overflow:hidden;
}
于 2012-08-23T01:05:51.297 回答
3

同意 BrynJ，目前最好的解决方案是将点赞按钮放在 20px 高的 div 容器中，并将溢出设置为隐藏（我在某处读到 FB 最近将评论弹出框移到 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>
于 2013-01-16T18:24:51.667 回答
2

如果点击“like”时like按钮消失，并且有一个容器div来隐藏评论弹窗，那么使用以下解决方案：

创建一个容器 div 以放置类似 fb 的按钮并为其提供以下 css：

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}
于 2013-07-05T15:48:58.107 回答
2

我设法通过实现 IFRAME 版本来规避 Facebook 喜欢按钮评论弹出问题。为此，我采取了以下步骤：

  1. 访问https://developers.facebook.com/docs/plugins/like-button/
  2. 将“喜欢的 URL”更改为您的 Facebook 页面 URL
  3. 根据需要选择任何其他选项（布局、操作类型等）
  4. 按“获取代码”按钮
  5. 选择 IFRAME 版本
  6. 确保选择您的 Facebook 应用程序，其中显示“此脚本使用您的应用程序的应用程序 ID”
  7. 在您的应用程序中实现提供的代码

据我所知，带有 IFRAME 实现的like按钮不会触发任何弹出窗口。它只是用作一个赞按钮。这是我想要的结果。

祝你好运。

于 2014-04-18T21:46:13.533 回答
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();
 });
于 2013-03-04T16:37:05.997 回答
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&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="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>
于 2013-06-13T06:11:37.287 回答
1

正如我所做的那样，评论弹出窗口将在以下情况下被禁用：

  1. 显示面孔：-> 取消选中它
  2. 获取代码：-> 选择 IFRAME 选项
于 2013-08-21T10:21:31.030 回答
1

如果您使用较新的 HTML5 按钮，并且应该向前兼容并由 Facebook 建议，那么这很容易，与其他人所说的不同：

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

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

于 2013-11-13T09:22:52.717 回答
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);        
});
于 2012-06-26T18:55:59.473 回答
0

上面提到的溢出高度选项不应该在show-faces=true. 否则，它将隐藏面孔。

于 2013-03-13T19:22:15.400 回答
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;
}
于 2013-05-28T12:14:19.700 回答
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>

它正确地隐藏了评论弹出窗口。

于 2013-06-06T21:59:52.613 回答
0

将溢出设置为隐藏可能会有所帮助。在您的主 css 文件中执行此操作..

#fb_button{
overflow:hidden;
}
于 2013-10-04T04:36:06.167 回答
0

如何让包含类似按钮的 iframe 与按钮的大小相同：

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

就是这样。

于 2016-06-15T00:21:25.440 回答