Facebook 喜欢按钮-如何禁用弹出评论？

Putting the iframe in a appropriately sized div with overflow set to hidden resolved this issue - although this is only actually hiding the problem as such.

Simplest fix to hide the comment box after Facebook Like (XFBML version not the iframe one) is as given:

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

Put the CSS style in any of your CSS file and see the magic, it works :)

I like Mohammed Arif's solution and I choose it as the best answer. But in case FB changed classes, then the below will always work..

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

where "like_button_holder" is "YOUR" div id holding the facebook like button code

Hiding the comment box work but can create problem if you have clickable element behind the comment flyout box.

You have to hide it and remove it from the DOM post like.

Here is the CSS to hide the comment box:

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

Here is the JQuery way of removing the DOM element:

 FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});

Here is the pure javascript way using provided widget from the callback:

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

I couldn't get the display: none option to work with the HTML 5 version of the button. Instead I targeted the div that the like button button is created in and set the overflow to hidden.

Dropping the following in my main css file did the trick:

#fb_button{
overflow:hidden;
}

I use this in my CSS:

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

and render the Facebook button with the normal HTML5 code, something like this:

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

gr-

What I did is crate a div for the "like" button like this:

<div class="fb_like">
<fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

And this is the CSS :

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

Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).

Using AddThis? Do this:

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

Lets try this one:

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

The overflow height options mentioned above shouldn't be used when show-faces=true. Otherwise, it will hide the faces.

Not to be a Debby Downer here, but doesn't hiding the comments box violate Facebook Policy?

IV. Application Integration Points d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.

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

If you want to show only the like button, you may try something like this

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

In my case (with the XFBML version) I've added to the tag this:

width="90" height="20" style="overflow: hidden;"

So the end result is:

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

It's hiding correctly the comment popup.

Here is the code to have the Like button working as just a standard button along with Twitter and Linkedin. Hope it helps.

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

If the like button disappears when you click "like" and you have a container div to hide the comment pop-up, then use the following solution:

create a container div to place the fb-like button in and give it the following css:

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


.fb_like iframe {
left: 0 !important;
}

As i have done ok, the comment popup will be disabled when:

1. Show faces: -> uncheck it
2. Get Code: -> choose IFRAME option

Setting overflow to hidden might help. Do this in your main css file..

#fb_button{
overflow:hidden;
}

If you use the newer HTML5 button, and you should as it's forward compatible and suggested by Facebook, it's easy, going off from what others have said:

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

The second class is a bonus for those using the AddThis plugin.

I managed to circumvent the Facebook like button comment pop-up issue by implementing the IFRAME version instead. I took the following steps to do so:

1. Visit https://developers.facebook.com/docs/plugins/like-button/
2. Change the 'URL to Like' to your Facebook page URL
3. Select any other options (Layout, Action Type, etc) as desired
4. Press the 'Get Code' button
5. Select the IFRAME version
6. Make sure you select your Facebook application where it says 'This script uses the app ID of your app'
7. Implement the provided code in your application

From what I can see, the like button with IFRAME implementation does not trigger any pop-up. It simply functions as a like button. This was my desired outcome.

Good luck.

The cleaner solution that works (as of May 2014)-

1. First of all make sure the the <div class="fb-like" has data-layout property as button-

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

2. Just add this CSS-

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

That's it!

Demo

How about just make the iframe that contains the like button the same size as the button:

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

That's it.