类似Facebook的按钮-如何禁用弹出评论?

21 回复 | 直到 13 年前

1

125

sakibmoon 11 年前

在类似Facebook(XFBML版本不是iframe版本)之后隐藏评论框的最简单修复方法如下所示:

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

将CSS样式放在任何CSS文件中,就可以看到它的魔力,它可以工作:)

2

81

BrynJ 14 年前

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

3

68

nourish Elmer 11 年前

我在CSS中使用这个:

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

并用普通的HTML5代码呈现Facebook按钮,如下所示:

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

4

14

S.L. Barth is on codidact.com Monika Restecka 12 年前

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

5

9

Nick Cox 11 年前

我喜欢穆罕默德·阿里夫的解决方案,我选择它作为最佳答案。但是如果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\u button\u holder”是“你的”div id,它持有类似facebook的按钮代码

6

5

Sahil Mittal 10 年前

这个 清洁剂溶液 有效的 2014年5月

首先要确保 <div class="fb-like" 数据布局 属性为按钮 -
```
<div class="fb-like" data-layout="button"........></div>
```

只要添加这个CSS-

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

就这样!

Demo

7

4

Daniel Krueger 11 年前

在这里不想成为一个德比唐纳,但隐藏评论框不违反Facebook的政策吗?

四、应用程序集成点

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

8

3

j0k gauthamp 12 年前

我拿不到钥匙 display: none

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

#fb_button{
    overflow:hidden;
}

9

3

sakibmoon 11 年前

.fb\u带有注释的边缘\u小部件\u

用这个?请执行以下操作:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>

10

2

MaxK 11 年前

如果单击“like”时like按钮消失,并且您有一个容器div来隐藏注释弹出窗口,则使用以下解决方案:

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

.fb_like iframe {
  left: 0 !important;
}

11

2

Shay Narang 10 年前

我设法通过实现IFRAME版本来避免类似Facebook的按钮评论弹出问题。为此,我采取了以下步骤:

https://developers.facebook.com/docs/plugins/like-button/
将“URL to Like”更改为您的Facebook页面URL
根据需要选择任何其他选项(布局、动作类型等)
在应用程序中实现提供的代码

从我所看到的,带有IFRAME实现的like按钮不会触发任何弹出窗口。它只是一个类似按钮的功能。这是我想要的结果。

祝你好运。

12

1

sakibmoon 11 年前

<!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>

13

1

sakibmoon 11 年前

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

14

1

Zaheer Ahmed 11 年前

正如我所做的,在下列情况下,注释弹出窗口将被禁用:

显示面:->取消选中它
获取代码:->选择IFRAME选项

15

1

Bill Pairaktaridis 11 年前

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

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

16

0

tleo 12 年前

在下列情况下不应使用上述溢出高度选项: show-faces=true . 否则,它会隐藏人脸。

17

0

Nick Cox 11 年前

在我的例子中(对于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

sakibmoon 11 年前

隐藏注释框是可行的,但如果在注释弹出框后面有可单击的元素,则可能会产生问题。

下面是隐藏注释框的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()       
});

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

19

0

sakibmoon 11 年前

如果只想显示like按钮,可以尝试这样的操作

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

20

0

Aishvarya Jaiswal 11 年前

#fb_button{
overflow:hidden;
}

21

0

Graham McLellan 8 年前

让包含like按钮的iframe与按钮大小相同如何:

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

就这样。