personalizado para likes gusta generador fotos conseguir como boton facebook facebook-like fbml

para - Botón Me gusta de Facebook: cómo desactivar el comentario emergente?



generador de me gusta en facebook (21)

¿No ser un Debby Downer aquí, pero no ocultar el cuadro de comentarios que 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 de cuadro Me gusta.

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

Me gustaría desactivar el cuadro de comentarios que aparece cuando un usuario hace clic en el botón me gusta de Facebook (fbml) que coloqué en mi sitio. ¿Es posible hacer esto? No puedo encontrar ningún detalle en la documentación.

¿Qué tal si el marco flotante que contiene el botón Me gusta tiene el mismo tamaño que el botón?

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

Eso es.

Aquí está el código para que el botón Me gusta funcione como solo 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>

Como he hecho bien, el comentario emergente se desactivará cuando:

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

De acuerdo con BrynJ, la mejor solución actualmente es poner el botón similar en un contenedor div alto de 20px, y establecer el overflow como oculto (leí en algún lugar que FB recientemente movió el comentario flotante al iFrame, entonces la solución que modifica el estilo de . fb_edge_widget_with_comment probablemente ya no sea útil para los usuarios de iFrame).

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

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>

Está ocultando correctamente el comentario emergente.

Establecer el desbordamiento a oculto podría ayudar. Haz esto en tu archivo CSS principal ...

#fb_button{ overflow:hidden; }

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

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

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

  2. Simplemente agregue este CSS-

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

¡Eso es!

Demo

La solución más simple para ocultar el cuadro de comentarios después de que Facebook me gusta (la versión XFBML no es el iframe) es como se indica:

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

Pon el estilo CSS en cualquiera de tus archivos CSS y observa la magia, funciona :)

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

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 cambie las clases, entonces la 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 "YOUR" div id sosteniendo el código de botón de Facebook

Me las arreglé para eludir el problema emergente de comentario tipo botón de Facebook implementando la versión de IFRAME. Tomé los siguientes pasos para hacerlo:

  1. Visita https://developers.facebook.com/docs/plugins/like-button/
  2. Cambia la ''URL a Me gusta'' a la URL de tu 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 IFRAME
  6. Asegúrese de seleccionar su aplicación de Facebook donde dice ''Esta secuencia de comandos usa la aplicación ID de su aplicación''
  7. Implemente el código provisto en su aplicación

Por lo que puedo ver, el botón similar 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.

No pude obtener la display: none opción para trabajar con la versión HTML 5 del botón. En su lugar, apunté al div en el que se crea el botón del botón similar y establecí el desbordamiento como oculto.

Dejar caer lo siguiente en mi archivo css principal hizo el truco:

#fb_button{ overflow:hidden; }

Ocultar el cuadro de comentarios funciona, pero puede crear un problema 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 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 utilizando el widget provisto de la devolución de llamada:

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

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

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

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

crea un contenedor div para colocar el botón fb y dale el siguiente css:

.fb_like { overflow: hidden; width: 90px; } .fb_like iframe { left: 0 !important; }

Si usa el botón HTML5 más nuevo, y debe ser compatible con versiones anteriores y sugerido por Facebook, es fácil, desviándose de lo que otros han dicho:

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

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

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

Yo uso esto en mi CSS:

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

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