Facebook Like Button-如何禁用评论弹出？

107

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

facebook  facebook-like  fbml 
— 布林
source
2
找不到适合您的答案。您是否将“ Like Box”视为解决方法？ developers.facebook.com/docs/reference/plugins/like-box。您可以关闭“显示流”和“显示标题”，并将“连接”设置为0，这样可以使生成的标记具有合理的大小。
— 僵尸
我添加了一个作为解决方法的答案。
— BrynJ

Answers:

125

给出了在Facebook Like（XFBML版本不是iframe版本）后隐藏评论框的最简单的解决方法：

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

将CSS样式放在您的任何CSS文件中，然后看一下魔术，它可以正常工作:)

— 穆罕默德·阿里夫（Mohammad Arif）
source
谢谢乔纳森，尽管我不是最好的：)我在同一个方面苦苦挣扎，只是尝试使用CSS来解决问题，而不是寻找奇特的解决方案，它的工作原理像“魅力” :)
— Mohammad Arif
8
没有人认为BrynJ答案可能是最好的吗？如果facebook在标记中更改其类，则此方法将中断。
— tybro0103 2012年
令人惊讶的是，还没有任何选项，您实际上可以在其中禁用评论弹出窗口。效果很好。
— 2012年
@tybro，如果从Facebook端偶然更改了类名，那么当然也可以从CSS轻松更改规则，它不需要任何功能上的更改，这是最简单的解决方法，可将注释弹出窗口隐藏到时间FB使其不可配置。
— Mohammad Arif 2012年
14
截至2013年2月12日，这对我不起作用。必须使用Kotzilla的解决方案
— Bashevis，
81

将iframe放入适当大小的div中，并将溢出设置为隐藏即可解决此问题-尽管实际上只是这样隐藏了问题。

— 布林
source
5
对我来说有趣的是，另一个人获得了所有选票。也许他的方法可以节省三分钟，但是如果Facebook更改其类，它将中断。
— tybro0103 2012年
@tybro您可以将类添加到fb标签并设置其样式，因此fb更改其类不会影响您的代码。
— Gangesh 2012年
1
@Gangesh嗯，不，你不能。标记直接来自您无法控制的Facebook。
— tybro0103 2012年
@ tybro0103，我添加了一个即使FB更改其类也不会中断的方法
— Zorox 2012年
非常感谢@BrynJ
— Abhishek
69

我在CSS中使用它：

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

并使用正常的HTML5代码渲染Facebook按钮，如下所示：

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

gr-

— 埃尔默
source
4
在尝试了其他解决方案之后，该解决方案效果最佳。iframe不适合，因为我需要订阅edge.create事件。在edge.create事件处理程序中重新渲染div标签有点滞后。使用“ .fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr”的其他CSS解决方案对我也不起作用。
— CodeWarrior 2013年
这也是唯一为我工作的人。我正在使用非iframe之类的嵌入方法。
— TK123
4
确实不起作用（2014年1月）。它不会禁用注释框，而只是将其隐藏。如果您按“ 赞”按钮（取消与您的测试链接的链接后要刷新页面），然后开始输入，则<div>保持相同的大小，但显示文本输入框，然后按Tab键，然后“ 关闭”和“ 发布”按钮变为可见。不好。我正在使用Firefox进行测试。
— Annabel 2014年
yeeeaaahh，此解决方案确实有效，谢谢！！
— Michael
14

我所做的是为“ like”按钮创建一个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;
}
— Kotzilla
source
4
这实际上是我发现的最佳解决方法。如果使用盒子计数布局，请使用以下CSS：.fb-like {overflow：hidden; 高度：61像素；}您只会在“喜欢”按钮上看到一个小缺口，但不会再被这个愚蠢的弹出窗口所困扰。
— NicolasBernier 2014年
对于shopify最小主题，使用包装div既可以在网络上使用，也可以在移动设备上使用，而仅覆盖类似fb的类可以直接在网络上使用，但不能用于移动设备（由于包含了其他特定于媒体的类）
— gamozzii，2015年
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

— 佐罗克斯
source
4
我使用此解决方案是因为使用CSS样式无法将div隐藏在iframe中。
— Pons，
这确实很聪明，但是可以在很短的时间内看到评论框
— pinkdawn
1
我不会称其为“真正聪明”的好解决方案-它涉及删除Like按钮标记（但孤立一些事件处理代码），为DOM添加新功能，为XFBML重新解析整个页面的DOM并重新生成新的Like按钮，这意味着更多的事件处理程序，重绘和重排，一些新的请求等。我实际上将其称为一个不好的解决方案，或者根本不是一个解决方案，因为您所做的就像是通过以下方式升级浏览器购买新电脑。
— AndrewF
1
有更好的主意吗？那个该死的评论框不会消失。
— Amalgovinus 2013年
@AndrewF-更好的主意吗？
— 杰里米·海尔
5

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

  1. 首先，请确保<div class="fb-like" 具有data-layout属性为按钮 -

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

  2. 只需添加此CSS-

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

而已！

演示版

— 萨希尔·米塔尔
source
3

我无法display: none选择使用HTML 5版本的按钮。相反，我针对的是在其中创建了like按钮按钮的div，并将溢出设置为隐藏。

在我的主要css文件中删除以下内容即可达到目的：

#fb_button{
    overflow:hidden;
}
— 象征性
source
3

同意BrynJ的观点，目前最好的解决方案是将like按钮放在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>
— 格布斯
source
可以确认20px div容器解决方案是唯一可行的解​​决方案。
— Bashevis
2

如果在单击“喜欢”时“喜欢”按钮消失，并且您有一个容器div来隐藏注释弹出窗口，请使用以下解决方案：

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

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

.fb_like iframe {
  left: 0 !important;
}
— 麦克斯
source
2

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

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

从我可以看到，具有IFRAME实现的like按钮不会触发任何弹出窗口。它只是用作一个赞按钮。这是我想要的结果。

祝好运。

— 谢伊·纳朗（Shay Narang）
source
如果您不需要事件监听器，这是最好的官方答案。谢啦 ！！
— Yahel 2014年
1

这是使“喜欢”按钮与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>
— 拉斐尔
source
很好，这是我从页面尝试的最佳解决方案。再次感谢@Rafael。
— 斯图尔特
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();
 });
— 亚米尔·阿弗里迪（Aamir Afridi）
source
1

如我所知，在以下情况下，评论弹出窗口将被禁用：

  1. 显示面孔：->取消选中
  2. 获取代码：->选择IFRAME选项
— TrạcPhạm
source
1

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

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

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

— 比尔·帕纳克塔里迪斯（Bill Pairaktaridis）
source
0

上述的溢出高度选项不应在时使用show-faces=true。否则，它将隐藏面部。

— 莱索
source
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>

它正确隐藏了注释弹出窗口。

— 欢乐
source
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);        
});
— 斯蒂芬·布莱恩特（Stephane Brillant）
source
我应该如何为另一个域上的iframed内容创建CSS规则？更不用说下个月名称将有所不同的CSS类了吗？
— Amalgovinus 2013年
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;
}
— 用户0000001
source
0

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

#fb_button{
overflow:hidden;
}
— 阿克沙特
source
0

仅使包含like按钮的iframe与按钮具有相同的大小，该怎么做：

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

而已。

— 格雷厄姆·麦克莱伦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.