Facebook Like Button - how to disable Comment pop up?

问题

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.

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

回答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.

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

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

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

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

回答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/

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

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

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

回答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.

回答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&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:

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

回答14:

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

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

回答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.

回答16:

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

回答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.

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

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

回答20:

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

#fb_button{
overflow:hidden;
}

回答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.

来源：https://stackoverflow.com/questions/3247855/facebook-like-button-how-to-disable-comment-pop-up

标签

facebook

facebook-like

fbml