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.

Couldn't find an answer for you. Have you considered the "Like Box" as a work-around? http://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. — zombat, Jul 15 '10 at 05:19

score 125 · Answer 1 · edited Jun 22 '13 at 00:10

125

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

edited Jun 22 '13 at 00:10

sakibmoon

2,026
3
22
32

answered Feb 02 '11 at 05:55

Mohammad Arif

6,987
4
40
42

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' :) – Mohammad Arif Feb 20 '12 at 10:45
8

Doesn't anyone think BrynJ answer may be best? If facebook changes their classes in the markup, this method will break. – tybro0103 Mar 07 '12 at 02:53
Amazing there isn't any option yet, where you actually can disable the comment pop-up. Works great. – Messing Mar 27 '12 at 05:26
@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. – Mohammad Arif Mar 28 '12 at 10:06
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. – tybro0103 Mar 28 '12 at 14:17
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. – Mohammad Arif Mar 29 '12 at 03:42
14

This didn't work for me as of Feb 12 2013. Had to use Kotzilla's solution – Bashevis Feb 13 '13 at 01:37

score 80 · Accepted Answer · answered Jul 22 '10 at 19:20

80

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.

answered Jul 22 '10 at 19:20

BrynJ

8,322
14
65
89

5

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. – tybro0103 Mar 07 '12 at 02:52
@tybro You can add class to fb tag and style it, so fb changing its class won't affect your code. – Yatix Mar 26 '12 at 09:35
1

@Gangesh Um no, you can't. The markup comes directly from Facebook which you don't have control over. – tybro0103 Mar 26 '12 at 16:31
@tybro0103, i added a method that will not break even if FB change their classes – Zorox Jun 18 '12 at 20:33
@tybro0103 That's because they're all copy-n-paste programmers. :P – poitroae Jul 03 '13 at 18:42
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 – BananaNeil Oct 03 '13 at 20:51
Are you sure this works? I have tried similar approach with HTML5 version of plugin - surrounding it with a `
` 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 `` 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!
– Annabel Jan 21 '14 at 17:30
This solution is actually pretty bad since facebook localize these buttons. Then you have different widths for different languages. – Lucas Apr 20 '14 at 02:31

score 68 · Answer 3 · edited Oct 04 '13 at 06:14

68

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-

edited Oct 04 '13 at 06:14

nourish

1,425
1
11
9

answered Oct 21 '12 at 12:59

Elmer

9,147
2
48
38

4

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. – CodeWarrior Mar 19 '13 at 16:37
This is the only one that worked for me too. I am using the non iframe like embed method. – May 01 '13 at 21:06
4

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 `
` 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.
– Annabel Jan 21 '14 at 17:15
yeeeaaahh, this solution that really works, thank you!! – Michael Jul 01 '15 at 20:17

score 14 · Answer 4 · edited Nov 01 '12 at 07:24

14

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

edited Nov 01 '12 at 07:24

S.L. Barth is on codidact.com

8,198
71
51
66

answered Nov 01 '12 at 07:04

Kotzilla

1,333
18
27

4

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. – NicolasBernier Jun 25 '14 at 13:29
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) – gamozzii Dec 01 '15 at 05:28

score 9 · Answer 5 · edited Jun 22 '13 at 00:11

9

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

edited Jun 22 '13 at 00:11

Nick Cox

35,529
6
31
47

answered Jun 18 '12 at 20:29

Zorox

2,040
2
21
28

4

I've used this solution because with css styles I can't hide a div inside an iframe. – Pons Jan 21 '13 at 11:03
this is really smart, however, the comment box could be seen for very short time – pinkdawn Aug 08 '13 at 06:50
1

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. – AndrewF Aug 23 '13 at 06:13
1

Got a better idea? That goddamn comment box won't go away otherwise. – Alkanshel Sep 23 '13 at 22:50
@AndrewF - better idea then? – Jeremy Haile Oct 07 '13 at 20:02

score 5 · Answer 6 · answered May 28 '14 at 10:06

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

score 4 · Answer 7 · answered May 17 '13 at 20:27

4

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/

answered May 17 '13 at 20:27

Daniel Krueger

41
1

1

That doesn't provide an answer to the question. Please additional remarks as a comment. – Trinimon May 17 '13 at 20:46
2

That's ironic--it's the f*cking comment box that's hiding my like button!! – Alkanshel Sep 23 '13 at 22:23

score 3 · Answer 8 · edited Oct 04 '12 at 08:08

3

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

edited Oct 04 '12 at 08:08

j0k

22,600
28
79
90

answered Aug 23 '12 at 01:05

symulation

31
1

score 3 · Answer 9 · edited Jun 22 '13 at 00:13

3

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>

edited Jun 22 '13 at 00:13

sakibmoon

2,026
3
22
32

answered Jan 16 '13 at 18:24

Gerbus

2,554
27
22

Can confirm that the 20px div container solution is the only working one. – Bashevis Feb 13 '13 at 01:37

score 2 · Answer 10 · answered Jul 05 '13 at 15:48

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

Akshay Narang · Answer 11 · 2014-04-18T21:52:27.800

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.

If you don't need the event listener, this is the best official answer. Thanks man !! — Yahel, Oct 09 '14 at 00:04

score 1 · Answer 12 · edited Jun 22 '13 at 00:11

1

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

edited Jun 22 '13 at 00:11

sakibmoon

2,026
3
22
32

answered Mar 04 '13 at 16:37

Aamir Afridi

6,364
3
42
42

score 1 · Answer 13 · edited Jun 22 '13 at 00:11

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>

Nice, this was the best solution that I tried from the page. Thanks AGAIN @Rafael. — Stuart, May 19 '16 at 14:00

score 1 · Answer 14 · edited Aug 21 '13 at 10:41

1

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

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

edited Aug 21 '13 at 10:41

Zaheer Ahmed

28,160
11
74
110

answered Aug 21 '13 at 10:21

Trực Phạm

11
1

score 1 · Answer 15 · answered Nov 13 '13 at 09:22

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.

score 0 · Answer 16 · edited Jun 22 '13 at 00:10

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

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? — Alkanshel, Sep 23 '13 at 22:51

score 0 · Answer 17 · answered Mar 13 '13 at 19:22

0

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

answered Mar 13 '13 at 19:22

tleo

351
3
16

score 0 · Answer 18 · edited Jun 22 '13 at 00:11

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

score 0 · Answer 19 · edited Jun 22 '13 at 00:10

0

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.

edited Jun 22 '13 at 00:10

Nick Cox

35,529
6
31
47

answered Jun 06 '13 at 21:59

Cla

1,810
3
22
36

score 0 · Answer 20 · answered Oct 04 '13 at 04:36

0

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

#fb_button{
overflow:hidden;
}

answered Oct 04 '13 at 04:36

Aishvarya Jaiswal

1,793
6
34
72

score 0 · Answer 21 · answered Jun 15 '16 at 00:21

0

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.

answered Jun 15 '16 at 00:21

Graham McLellan

26
2

Facebook Like Button - how to disable Comment pop up?

21 Answers21

Linked

Related