Botão Curtir do Facebook - como desativar o pop-up de comentários?

Gostaria de desativar a caixa de comentários que aparece quando um usuário clica no botão Curtir do Facebook (fbml) que coloquei em meu site. Isso é possível fazer? Não consigo encontrar nenhum detalhe na documentação.

A correção mais simples para ocultar a caixa de comentário após o Curtir do Facebook (versão XFBML, não a do iframe) é a seguinte:

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

Coloque o estilo CSS em qualquer um de seus arquivos CSS e veja a mágica, funciona :)

Colocar o iframe em uma div de tamanho apropriado com overflow definido como oculto resolveu esse problema - embora isso só esteja realmente ocultando o problema.

Eu uso isso no meu CSS:

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

e renderizar o botão do Facebook com o código HTML5 normal, mais ou menos assim:

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

gr-

O que fiz foi criar um div para o botão "curtir" assim:

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

E este é o CSS:

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

Gosto da solução de Mohammed Arif e a escolho como a melhor resposta. Mas no caso de o FB mudar de classe, o seguinte sempre funcionará.

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

onde "like_button_holder" é "SEU" div id contendo o código do botão Curtir do Facebook

A solução mais limpa que funciona (em maio de 2014 ) -

1. Primeiro de tudo make certeza que o do <div class="fb-like" tem -layout de dados propriedade como botão -

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

2. Basta adicionar este CSS-

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

É isso aí!

Demo

Não ser uma Debby Downer aqui, mas ocultar a caixa de comentários não viola a Política do Facebook?

IV. Pontos de integração do aplicativo d. Você não deve ocultar ou cobrir elementos de nossos plug-ins sociais, como o botão Curtir ou o plug-in da caixa Curtir.

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

Não consegui a display: noneopção de trabalhar com a versão HTML 5 do botão. Em vez disso, direcionei o div em que o botão like foi criado e defini o overflow como oculto.

Soltar o seguinte em meu arquivo css principal funcionou:

#fb_button{
    overflow:hidden;
}

Concordo com BrynJ, a melhor solução atualmente é colocar o botão curtir em um contêiner div de 20px de altura e definir o overflow como oculto (li em algum lugar que o FB recentemente moveu o menu desdobrável de comentário para o iFrame, então a solução que modifica o estilo de . fb_edge_widget_with_comment provavelmente não é mais útil para usuários iFrame).

Usando AddThis? Faça isso:

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

Se o botão curtir desaparecer quando você clicar em "curtir" e você tiver um div de contêiner para ocultar o pop-up de comentário, use a seguinte solução:

crie um div de contêiner para colocar o botão semelhante a fb e forneça a ele o seguinte css:

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

.fb_like iframe {
  left: 0 !important;
}

Consegui contornar o problema do pop-up de comentário do botão Curtir do Facebook implementando a versão IFRAME. Eu executei as seguintes etapas para fazer isso:

1. Visite https://developers.facebook.com/docs/plugins/like-button/
2. Altere o 'URL para curtir' para o URL da sua página do Facebook
3. Selecione quaisquer outras opções (Layout, Tipo de ação, etc) conforme desejado
4. Pressione o botão 'Obter código'
5. Selecione a versão IFRAME
6. Certifique-se de selecionar seu aplicativo do Facebook onde diz 'Este script usa o ID do aplicativo do seu aplicativo'
7. Implementar o código fornecido em seu aplicativo

Pelo que posso ver, o botão like com implementação de IFRAME não aciona nenhum pop-up. Ele simplesmente funciona como um botão semelhante. Este era o meu resultado desejado.

Boa sorte.

Aqui está o código para que o botão Curtir funcione apenas como um botão padrão junto com o Twitter e o Linkedin. Espero que ajude.

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

Vamos tentar este:

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

Como já fiz, o pop-up de comentário será desativado quando:

1. Mostrar rostos: -> desmarque
2. Obter código: -> escolha a opção IFRAME

Se você usar o botão HTML5 mais recente, e deve, visto que é compatível com versões futuras e sugerido pelo Facebook, é fácil, saindo do que outros disseram:

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

A segunda classe é um bônus para quem usa o plugin AddThis.

As opções de altura de estouro mencionadas acima não devem ser usadas quando show-faces=true. Caso contrário, ele ocultará os rostos.

No meu caso (com a versão XFBML) adicionei à tag isto:

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

Portanto, o resultado final é:

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

Ele está ocultando corretamente o pop-up de comentário.

Ocultar a caixa de comentário funciona, mas pode criar problemas se você tiver um elemento clicável atrás da caixa de submenu de comentário.

Você tem que escondê-lo e removê-lo da postagem DOM como.

Aqui está o CSS para ocultar a caixa de comentários:

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

Esta é a maneira JQuery de remover o elemento DOM:

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

Esta é a maneira pura de javascript usando o widget fornecido no retorno de chamada:

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

Se você quiser mostrar apenas o botão curtir, você pode tentar algo assim

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

Definir overflow como oculto pode ajudar. Faça isso em seu arquivo css principal.

#fb_button{
overflow:hidden;
}

Que tal tornar o iframe que contém o botão curtir do mesmo tamanho do botão:

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

É isso aí.