Facebook Like Button - how to disable Comment pop up?

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.

Hachman

Couldn't find an answer for you. Have you considered the "Like Box" as a work-around? developers.facebook.com/docs/reference/plugins/like-box. You can turn off "Show Stream" and "Show Header", and set "Connections" to 0, and it makes the resulting markup reasonably sized. – Putman

I've added an answer I found as a workaround. – Hachman

Answer 1

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.

Hachman

Funny to me that the other guy got all the votes. Perhaps his method saves three minutes, but if facebook changes their classes it will break. – Lythraceous

@tybro You can add class to fb tag and style it, so fb changing its class won't affect your code. – Magistral

@Gangesh Um no, you can't. The markup comes directly from Facebook which you don't have control over. – Lythraceous

@tybro0103, i added a method that will not break even if FB change their classes – Vulcanize

@Lythraceous That's because they're all copy-n-paste programmers. :P – Incapacitate

There is a problem with this technique in mobile web: my mobile browser is applying focus to the hidden comment box. Will post back if I find a reasonable work around. O_o – Instrumentalism

Are you sure this works? I have tried similar approach with HTML5 version of plugin - surrounding it with a <div> of suitable height and overflow meant that when I started typing part of the text box was displayed, when I pressed tab the buttons in the comment were displayed and it was possible to post. Surrounding it with a <td> with overflow hidden and using the same keystrokes had the same effect but nothing visible on the screen. This means it is possible for the user to accidentally post comments to their facebook wall without even knowing it. Could have embarrassing consequences! – Ontario

This solution is actually pretty bad since facebook localize these buttons. Then you have different widths for different languages. – Emancipated

Answer 2

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

Mccurdy

Thanks Jonathan though I amn't the best :) I struggled on the same and just tried out to resolve using CSS rather looking for the fancy solutions and it worked 'like a charm' :) – Mccurdy

Doesn't anyone think BrynJ answer may be best? If facebook changes their classes in the markup, this method will break. – Lythraceous

Amazing there isn't any option yet, where you actually can disable the comment pop-up. Works great. – Worldshaking

@tybro, if class names change by any chance from Facebook end then of course one can change the rule easily from the CSS as well, it doesn't require any kind of functional change, that's the easiest fix to hide the comment popup till the time FB doesn't make it configurable. – Mccurdy

I agree it's great and easy. I'm just surprised by all the upvotes on this and not the other answer. The other one seems just as easy to me, but better. – Lythraceous

It's all about user's acceptance, may be they finding it quit easy to implement and again it's not a solution just a work around to get rid off that thing. – Mccurdy

This didn't work for me as of Feb 12 2013. Had to use Kotzilla's solution – Pibroch

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-

Chook

After trying out the other solutions, this one worked best. Iframe not suitable because I need to subscribe to edge.create event. Re-rendering the div tag in the edge.create event handler had a bit of a lag to it. The other CSS solution using ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" didnt work for me either. – Casement

This is the only one that worked for me too. I am using the non iframe like embed method. – Flam

Doesn't really work (Jan 2014). It does not disable the comment box it just hides it. If you press the Like button (be careful to refresh your page after unliking the link you are testing with) and then start typing, the <div> stays the same size but shows the text entry box, then press tab and the Close and Post buttons become visible. Not good. I was testing with Firefox. – Ontario

yeeeaaahh, this solution that really works, thank you!! – Aerostatics

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

Dichroic

This is actually the best workaround I found. If you use the box count layout, use the following CSS : .fb-like { overflow: hidden; height: 61px; } You will just see the small notch over the like button but you won't be annoyed by this stupid popup anymore. – Delila

For shopify minimal theme, this use of a wrapping div worked on both web and mobile, while just overriding the fb-like class directly worked on web but not mobile (due to additional media specific classes being included) – Internationalism

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

Vulcanize

I've used this solution because with css styles I can't hide a div inside an iframe. – Sumatra

this is really smart, however, the comment box could be seen for very short time – Doralia

I wouldn't call this a "really smart" good solution -- it involves removing the Like button markup (but orphaning some event handling code), making a new addition to the DOM, reparsing the entire page's DOM for XFBML, and regenerating a new Like button, which means more event handlers, a repaint and reflow, a few new requests, etc. I would actually call this a bad solution, or perhaps not a solution at all since what you're doing is like upgrading your browser by buying a new computer. – Guaiacol

Got a better idea? That goddamn comment box won't go away otherwise. – Vitiligo

@Guaiacol - better idea then? – Cleghorn

Answer 6

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

Mchugh

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/

Halting

That doesn't provide an answer to the question. Please additional remarks as a comment. – Theatrician

That's ironic--it's the f*cking comment box that's hiding my like button!! – Vitiligo

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

Acaulescent

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>

Hurst

Can confirm that the 20px div container solution is the only working one. – Pibroch

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

Gpo

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:

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.

Impel

If you don't need the event listener, this is the best official answer. Thanks man !! – Capote

Answer 12

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

Canikin

Answer 13

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>

Adz

Nice, this was the best solution that I tried from the page. Thanks AGAIN @Rafael. – Revolt

Answer 14

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

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

Latrinalatrine

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.

Elagabalus

Answer 16

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

Ptisan

How am I supposed to create css rules for iframed content on another domain? Let alone css classes whose names will be different next month? – Vitiligo

Answer 17

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

Rottenstone

Answer 18

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

Cominform

Answer 19

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.

Barri

Answer 20

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

#fb_button{
overflow:hidden;
}

Eloign

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.

Alonsoalonzo