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


107

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.


2
Não foi possível encontrar uma resposta para você. Você considerou o "Like Box" como uma solução alternativa? developers.facebook.com/docs/reference/plugins/like-box . Você pode desligar "Mostrar Fluxo" e "Mostrar Cabeçalho" e definir "Conexões" como 0, o que torna a marcação resultante de tamanho razoável.
zombat

Eu adicionei uma resposta que encontrei como uma solução alternativa.
BrynJ de

Respostas:


125

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


Obrigado Jonathan, embora eu não seja o melhor :) Eu me esforcei para fazer o mesmo e apenas tentei resolver usando CSS em vez de procurar as soluções sofisticadas e funcionou 'como um encanto' :)
Mohammad Arif

8
Ninguém acha que a resposta de BrynJ pode ser a melhor? Se o Facebook alterar suas classes na marcação, esse método será interrompido.
tybro0103

É incrível que ainda não haja nenhuma opção, onde você possa desativar o pop-up de comentário. Funciona bem.
Messing

@tybro, se os nomes das classes mudam por acaso no final do Facebook, então é claro que também se pode mudar a regra facilmente no CSS, não requer nenhum tipo de mudança funcional, essa é a solução mais fácil para ocultar o pop-up de comentário até o time FB não o torna configurável.
Mohammad Arif

14
Isso não funcionou para mim em 12 de fevereiro de 2013. Tive que usar a solução de Kotzilla
Bashevis

81

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.


5
Engraçado para mim que o outro cara tenha recebido todos os votos. Talvez seu método economize três minutos, mas se o Facebook mudar de classe, ele será interrompido.
tybro0103

@tybro Você pode adicionar uma classe à tag fb e estilizá-la, de modo que a alteração da classe fb não afetará seu código.
Gangesh

1
@Gangesh Hum não, você não pode. A marcação vem diretamente do Facebook, sobre a qual você não tem controle.
tybro0103

@ tybro0103, adicionei um método que não funcionará mesmo se o FB mudar de classe
Zorox

Muito obrigado @BrynJ
Abhishek

69

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-


4
Depois de experimentar as outras soluções, esta funcionou melhor. Iframe não é adequado porque preciso me inscrever no evento edge.create. A renderização da tag div no manipulador de eventos edge.create teve um certo atraso. A outra solução CSS usando ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" também não funcionou para mim.
CodeWarrior

Este é o único que funcionou para mim também. Estou usando o método de incorporação não iframe.
TK123

4
Realmente não funciona (janeiro de 2014). Não desativa a caixa de comentários, apenas a oculta. Se você pressionar o botão Curtir (tenha cuidado para atualizar sua página depois de cancelar o link com o qual está testando) e, em seguida, começar a digitar, o <div>permanecerá do mesmo tamanho, mas exibirá a caixa de entrada de texto, pressione a guia e os botões Fechar e Postar ficarão visíveis . Não é bom. Eu estava testando com o Firefox.
Annabel de

yeeeaaahh, essa solução que realmente funciona, obrigado !!
Michael

14

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

4
Esta é realmente a melhor solução alternativa que encontrei. Se você usar o layout de contagem de caixa, use o seguinte CSS: .fb-like {overflow: hidden; altura: 61px; } Você verá apenas o pequeno entalhe sobre o botão curtir, mas não será mais incomodado por esse pop-up estúpido.
NicolasBernier

Para o tema mínimo do shopify, esse uso de um div de embrulho funcionou na web e no celular, enquanto apenas substituía a classe semelhante ao fb diretamente na web, mas não no celular (devido à inclusão de classes específicas de mídia adicionais)
gamozzii

9

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


4
Usei essa solução porque com estilos de css não consigo ocultar uma div dentro de um iframe.
Pons

isso é muito inteligente, no entanto, a caixa de comentários pode ser vista por muito pouco tempo
pinkdawn

1
Eu não chamaria isso de uma boa solução "realmente inteligente" - envolve remover a marcação do botão Curtir (mas tornar órfão algum código de manipulação de eventos), fazer uma nova adição ao DOM, reanalisar o DOM da página inteira para XFBML e regenerar um novo botão Curtir, o que significa mais manipuladores de eventos, uma repintura e refluxo, algumas novas solicitações, etc. Eu chamaria isso de uma solução ruim, ou talvez nem uma solução, já que o que você está fazendo é como atualizar seu navegador comprar um novo computador.
AndrewF

1
Tem uma ideia melhor? Essa caixa de comentários maldita não vai embora de outra forma.
Amalgovinus

@AndrewF - ideia melhor então?
Jeremy Haile

5

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


4

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/


1
Isso não responde à pergunta. Por favor, observações adicionais como um comentário.
Trinimon

2
Isso é irônico - é a porra da caixa de comentários que está escondendo meu botão de curtir !!
Amalgovinus

3

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

3

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>

Posso confirmar que a solução de contêiner div de 20px é a única que funciona.
Bashevis

2

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

2

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.


Se você não precisa do ouvinte do evento, esta é a melhor resposta oficial. Obrigado cara !!
Yahel,

1

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>

Legal, essa foi a melhor solução que experimentei da página. Obrigado MAIS UMA VEZ @Rafael.
Stuart

1

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

1

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

1

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.


0

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.


0

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.


0

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

Como devo criar regras css para conteúdo com iframes em outro domínio? Muito menos classes css cujos nomes serão diferentes no próximo mês?
Amalgovinus

0

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

0

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

#fb_button{
overflow:hidden;
}

0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.