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

107

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.

BrynJ
fuente
2
No pude encontrar una respuesta para ti. ¿Ha considerado el "Cuadro Me gusta" como una solución alternativa? developers.facebook.com/docs/reference/plugins/like-box . Puede desactivar "Mostrar flujo" y "Mostrar encabezado", y establecer "Conexiones" en 0, y hace que el marcado resultante tenga un tamaño razonable.
zombat
Agregué una respuesta que encontré como solución alternativa.
BrynJ

Respuestas:

125

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

Mohammad Arif
fuente
Gracias Jonathan, aunque no soy el mejor :) Luché en lo mismo y solo intenté resolver usando CSS en lugar de buscar soluciones sofisticadas y funcionó 'como un encanto' :)
Mohammad Arif
8
¿Nadie cree que la respuesta de BrynJ sea la mejor? Si Facebook cambia sus clases en el marcado, este método se romperá.
tybro0103
Increíble, todavía no hay ninguna opción en la que pueda desactivar la ventana emergente de comentarios. Funciona genial.
Messing
@tybro, si los nombres de las clases cambian por casualidad desde el final de Facebook, entonces, por supuesto, también se puede cambiar la regla fácilmente desde el CSS, no requiere ningún tipo de cambio funcional, esa es la solución más fácil para ocultar la ventana emergente de comentarios hasta el time FB no lo hace configurable.
Mohammad Arif
14
Esto no funcionó para mí a partir del 12 de febrero de 2013. Tuve que usar la solución de Kotzilla
Bashevis
81

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.

BrynJ
fuente
5
Es gracioso para mí que el otro haya obtenido todos los votos. Quizás su método ahorre tres minutos, pero si facebook cambia sus clases se romperá.
tybro0103
@tybro Puede agregar una clase a la etiqueta fb y darle estilo, por lo que fb cambiar su clase no afectará su código.
Gangesh
1
@Gangesh Um no, no puedes. El marcado proviene directamente de Facebook, sobre el que no tienes control.
tybro0103
@ tybro0103, agregué un método que no se romperá incluso si FB cambia sus clases
Zorox
Muchas gracias @BrynJ
Abhishek
69

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-

Elmer
fuente
4
Después de probar las otras soluciones, esta funcionó mejor. Iframe no es adecuado porque necesito suscribirme al evento edge.create. Volver a renderizar la etiqueta div en el controlador de eventos edge.create tuvo un poco de retraso. La otra solución CSS que usa ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr" tampoco funcionó para mí.
CodeWarrior
Este es el único que también me funcionó. Estoy usando el método de incrustación sin iframe.
TK123
4
Realmente no funciona (enero de 2014). No deshabilita el cuadro de comentarios, solo lo oculta. Si presiona el botón Me gusta (tenga cuidado de actualizar su página después de que no le gusta el enlace con el que está probando) y luego comienza a escribir, <div>permanece en el mismo tamaño pero muestra el cuadro de entrada de texto, luego presione la pestaña y los botones Cerrar y Publicar se harán visibles . No está bien. Estaba probando con Firefox.
Annabel
yeeeaaahh, esta solución que realmente funciona, gracias !!
Michael
14

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;
}
Kotzilla
fuente
4
En realidad, esta es la mejor solución que encontré. Si usa el diseño de recuento de cajas, use el siguiente CSS: .fb-like {overflow: hidden; altura: 61px; } Solo verá la pequeña muesca sobre el botón Me gusta, pero esta estúpida ventana emergente ya no le molestará.
NicolasBernier
Para el tema mínimo de Shopify, este uso de un div de envoltura funcionó tanto en la web como en el móvil, mientras que anulaba la clase similar a fb directamente en la web pero no en el móvil (debido a que se incluyen clases específicas de medios adicionales)
gamozzii
9

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

Zorox
fuente
4
He usado esta solución porque con los estilos CSS no puedo ocultar un div dentro de un iframe.
Pons
esto es realmente inteligente, sin embargo, el cuadro de comentarios se pudo ver por muy poco tiempo
pinkdawn
1
No llamaría a esto una buena solución "realmente inteligente": implica eliminar el marcado del botón Me gusta (pero dejar huérfano de algunos códigos de manejo de eventos), hacer una nueva adición al DOM, analizar el DOM de toda la página para XFBML y regenerar un nuevo botón Me gusta, lo que significa más controladores de eventos, un repintado y un reflujo, algunas solicitudes nuevas, etc. En realidad, lo llamaría una mala solución, o quizás no una solución en absoluto, ya que lo que está haciendo es como actualizar su navegador comprar una computadora nueva.
AndrewF
1
¿Tienes una idea mejor? Ese maldito cuadro de comentarios no desaparecerá de otra manera.
Amalgovinus
@AndrewF - ¿mejor idea entonces?
Jeremy Haile
5

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

Sahil Mittal
fuente
4

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/

Daniel Krueger
fuente
1
Eso no proporciona una respuesta a la pregunta. Por favor, comentarios adicionales como comentario.
Trinimon
2
Eso es irónico, ¡es el puto cuadro de comentarios el que esconde mi botón Me gusta!
Amalgovinus
3

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;
}
simulacion
fuente
3

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>
Gerbus
fuente
Puede confirmar que la solución de contenedor div de 20px es la única que funciona.
Bashevis
2

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;
}
MaxK
fuente
2

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.

Shay Narang
fuente
Si no necesita el detector de eventos, esta es la mejor respuesta oficial. Gracias hombre !!
Yahel
1

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>
Rafael
fuente
Bien, esta fue la mejor solución que probé desde la página. Gracias OTRA VEZ @Rafael.
Stuart
1

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();
 });
Aamir Afridi
fuente
1

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
Trực Phạm
fuente
1

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.

Bill Pairaktaridis
fuente
0

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

tleo
fuente
0

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.

jollyr0ger
fuente
0

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);        
});
Stephane Brillant
fuente
¿Cómo se supone que debo crear reglas css para contenido iframed en otro dominio? Y mucho menos las clases de CSS cuyos nombres serán diferentes el próximo mes.
Amalgovinus
0

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;
}
usuario0000001
fuente
0

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

#fb_button{
overflow:hidden;
}
Akshat
fuente
0

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

Graham McLellan
fuente