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.
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.
Respostas:
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-
<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.
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 ) -
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>
Basta adicionar este CSS-
.fb-like{
overflow: hidden !important;
}
É isso aí!
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.
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:
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&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&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();
});
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.
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;
}
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í.