Botón Me gusta de Facebook: ¿cómo deshabilitar la ventana emergente de comentarios?

Me gustaría desactivar el cuadro Comentario que aparece cuando un usuario hace clic en el botón Me gusta de Facebook (fbml) que he colocado en mi sitio. ¿Es posible hacerlo? No encuentro ningún detalle en la documentación.

La solución más simple para ocultar el cuadro de comentarios después de Me gusta en Facebook (la versión XFBML, no la del iframe) es la siguiente:

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

Ponga el estilo CSS en cualquiera de sus archivos CSS y vea la magia, funciona :)

Poner el iframe en un div de tamaño apropiado con el desbordamiento configurado como oculto resolvió este problema, aunque esto solo oculta el problema como tal.

Yo uso esto en mi CSS:

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

y renderice el botón de Facebook con el código HTML5 normal, algo como esto:

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

gramo-

Lo que hice fue crear un div para el botón "me gusta" como este:

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

Y este es el CSS:

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

Me gusta la solución de Mohammed Arif y la elijo como la mejor respuesta. Pero en caso de que FB cambiara de clase, lo siguiente siempre 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();
});

donde "like_button_holder" es "SU" div id sosteniendo el código del botón Me gusta de Facebook

La solución más limpia que funciona (a partir de mayo de 2014 ) -

1. En primer lugar, asegúrese de que <div class="fb-like" tenga la propiedad de diseño de datos como botón -

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

2. Solo agregue este CSS-

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

¡Eso es!

Manifestación

No ser un Debby Downer aquí, pero ¿ocultar el cuadro de comentarios no viola la política de Facebook?

IV. Puntos de integración de aplicaciones d. No debe ocultar o cubrir elementos de nuestros complementos sociales, como el botón Me gusta o el complemento Me gusta.

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

No pude conseguir el display: none opción de trabajar con la versión HTML 5 del botón. En su lugar, apunté al div en el que se crea el botón Me gusta y configuré el desbordamiento en oculto.

Soltar lo siguiente en mi archivo css principal hizo el truco:

#fb_button{
    overflow:hidden;
}

De acuerdo con BrynJ, la mejor solución actualmente es poner el botón Me gusta en un contenedor div de 20px de alto y configurar el desbordamiento en oculto (leí en alguna parte que FB recientemente movió el control flotante de comentarios al iFrame, por lo que la solución que modifica el estilo de . fb_edge_widget_with_comment probablemente ya no sea útil para los usuarios de iFrame).

¿Utiliza AddThis? Hacer esto:

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

Si el botón Me gusta desaparece cuando hace clic en "Me gusta" y tiene un div contenedor para ocultar la ventana emergente de comentarios, utilice la siguiente solución:

crea un div contenedor para colocar el botón similar a fb y dale el siguiente CSS:

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

.fb_like iframe {
  left: 0 !important;
}

Logré eludir el problema de la ventana emergente de comentarios del botón Me gusta de Facebook implementando la versión IFRAME en su lugar. Tomé los siguientes pasos para hacerlo:

1. Visitar https://developers.facebook.com/docs/plugins/like-button/
2. Cambie la 'URL a Me gusta' a la URL de su página de Facebook
3. Seleccione cualquier otra opción (diseño, tipo de acción, etc.) como desee
4. Presione el botón 'Obtener código'
5. Seleccione la versión de IFRAME
6. Asegúrese de seleccionar su aplicación de Facebook donde dice 'Este script usa el ID de la aplicación de su aplicación'
7. Implemente el código provisto en su aplicación

Por lo que puedo ver, el botón Me gusta con la implementación de IFRAME no activa ninguna ventana emergente. Simplemente funciona como un botón similar. Este fue mi resultado deseado.

Buena suerte.

Aquí está el código para que el botón Me gusta funcione como un botón estándar junto con Twitter y Linkedin. Espero eso ayude.

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

Probemos 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 he hecho bien, la ventana emergente de comentarios se desactivará cuando:

1. Mostrar caras: -> desmarque
2. Obtener código: -> elegir la opción IFRAME

Si usa el botón HTML5 más nuevo, y debería, ya que es compatible con versiones posteriores y lo sugiere Facebook, es fácil, alejándose de lo que otros han dicho:

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

La segunda clase es una ventaja para quienes usan el complemento AddThis.

Las opciones de altura de desbordamiento mencionadas anteriormente no deben usarse cuando show-faces=true. De lo contrario, ocultará las caras.

En mi caso (con la versión XFBML) agregué a la etiqueta esto:

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

Entonces el resultado final es:

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

Oculta correctamente la ventana emergente de comentarios.

Ocultar el cuadro de comentarios funciona, pero puede crear problemas si tiene un elemento en el que se puede hacer clic detrás del cuadro flotante de comentarios.

Tienes que ocultarlo y eliminarlo de la publicación DOM como.

Aquí está el CSS para ocultar el cuadro de comentarios:

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

Aquí está la forma de JQuery de eliminar el elemento DOM:

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

Aquí está la forma pura de JavaScript usando el widget provisto desde la devolución de llamada:

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

Si desea mostrar solo el botón Me gusta, puede intentar algo como esto

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

Configurar el desbordamiento en oculto podría ayudar. Haga esto en su archivo css principal.

#fb_button{
overflow:hidden;
}

¿Qué tal si hacemos que el iframe que contiene el botón Me gusta tenga el mismo tamaño que el botón?

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

Eso es.