Facebook Like Button - how to disable Comment pop up? - facebook

Question

I'd like to disable the Comment box that pops up when a user clicks the Facebook (fbml) Like button I've placed on my site. Is this possible to do? I can't find any details in the documentation.

Answer 1

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

Answer 2

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.

Answer 3

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-

Answer 4

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

Answer 5

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

Answer 6

The cleaner solution that works (as of May 2014)-
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>
Just add this CSS-
.fb-like{
overflow: hidden !important;
}
That's it!
Demo

Answer 7

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/

Answer 8

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

Answer 9

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>

Answer 10

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

Answer 11

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:
Visit https://developers.facebook.com/docs/plugins/like-button/
Change the 'URL to Like' to your Facebook page URL
Select any other options (Layout, Action Type, etc) as desired
Press the 'Get Code' button
Select the IFRAME version
Make sure you select your Facebook application where it says 'This script uses the app ID of your app'
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.

Answer 12

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&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe>
</li>
<li class="twitter">
Tweet
</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>

Answer 13

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

Answer 14

As i have done ok, the comment popup will be disabled when:
Show faces: -> uncheck it
Get Code: -> choose IFRAME option

Answer 15

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.

Answer 16

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

Answer 17

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.

Answer 18

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

Answer 19

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

Answer 20

Setting overflow to hidden might help. Do this in your main css file..
#fb_button{
overflow:hidden;
}

Answer 21

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.