Botón Me gusta de Facebook – ¿ocultar conteo?

En el cuadro de diálogo de configuración para el botón Me gusta, solo hay dos opciones para el diseño:

Enlace muerto – Alternativa 1 Enlace muerto – Alternativa 2

Desafortunadamente, los números para el sitio web de mi empleador no son cerca de 22,000, por lo que los poderes han decidido que no debemos mostrar el número de “me gusta” hasta que dicho número sea un poco más a nuestro favor. Hasta donde yo sé, no tengo acceso al diseño del botón a través de Javascript o CSS (está en un iframe servido por Facebook). ¿Hay alguna otra forma de ocultar el conteo?

El botón “Me gusta” codificado para mostrar “Recomendar” tiene 84 píxeles de ancho y el botón “Me gusta” es 44 píxeles, ¡ahorrará tiempo a los chicos de CSS como yo que necesitan ocultar lo impopular que es mi página actualmente! Puse este código en la parte superior de mi página de inicio, por lo que inicialmente no quiero que anuncie lo pocos que me gustan.

Si overflow:hidden , tenga en cuenta que también ocultará el cuadro de comentarios que aparece en la versión XFBML … después de que el usuario lo prefiera. Así que mejor si haces esto …

 /* make the like button smaller */ .fb_edge_widget_with_comment iframe { width:47px !important; } /* but make the span that holds the comment box larger */ span.fb_edge_comment_widget.fb_iframe_widget iframe { width:401px !important; } 

La respuesta aceptada es buena, pero tenga cuidado con las páginas multilingües. El texto difiere en longitud:

Inglés: Me gusta

Holandés: Vind ik leuk

Alemán: Gefällt mir

Solo un aviso.

Solo engloba el iframe en un div, establece el ancho del ancho del botón, configura el desbordamiento en el modo oculto, es decir,

  

Ahora es oficialmente compatible con Facebook. Simplemente seleccione el diseño ‘Botón’.

https://developers.facebook.com/docs/plugins/like-button/

Si está utilizando el botón de JavaScript de Facebook (para que pueda capturar como eventos), esto es lo que teníamos que hacer:

Debido a un cambio en Facebook recientemente realizado en la forma en que se muestran los diálogos de comentarios, tuvimos que cambiar la forma en que lo estábamos ocultando. La forma en que muestran el diálogo de comentarios ha sido ‘mover’ el contenido dentro del elemento my overflow: hidden para que el botón parezca realmente extraño para el usuario después de que haga clic en el botón Me gusta.

Además de agregar un elemento de ajuste con un estilo ‘desbordamiento: ninguno’, deberá ocultar el elemento de comentario que Facebook está poniendo en su página:

Estilos:

 span.no_overflow { overflow: none; width: 50px; } .no_overflow span.fb_edge_comment_widget.fb_iframe_widget { display: none; } 

Margen:

    

Sin embargo, todavía estamos usando el marcado fb: like. No he probado esto con el nuevo marcado basado en div que Facebook ofrece en su sitio ahora.

Sé que ya se han publicado muchas soluciones, pero la mía aún es algo diferente. Funciona para la Versión HTML5 del botón Me gusta y solo usa CSS para ocultar el cuadro de conteo. No olvides agregar la aplicación appId para probar.

CSS:

  

Botón FB Like:

 

Parece que FaceBook ha cambiado recientemente algún código: cada vez que hacía clic en “Me gusta”, el contenido saltaba hacia la izquierda, arruinando la interfaz de usuario. No hay trucos CSS / JS que funcionen. Fui con una solución más simple, usando un iframe .

AVISO : aunque algunos dispositivos ya son compatibles con iFrames, no todos los dispositivos móviles sí. iFrames en realidad son viejos y no se recomiendan en absoluto, pero me sirvió de algo.

Tomemos el script predeterminado de generación similar de Facebook y generemos un cuadro como iFrame;

Haga clic aquí para generar el botón Me gusta

Ve por el estilo “Box_Count”, con un contador en la parte superior.

Cuando presiona “agarrar el código”, busque el código iFrame. Obtendrás algo similar a esto;

  

Ahora vamos a envolver un div por allí.

  

Dale el siguiente CSS:

 .like_wrap { width:55px; height:25px; overflow:hidden; } 

Ahora probablemente verá la esquina superior izquierda del mostrador. Ahora tenemos que arreglar el iFrame. Dale una clase;

  

Y haga que sea siempre inglés, agregando “& locale = en_US” a la URL. Esto es para evitar diseños extraños en otros países: en holandés sería “Vind ik leuk” y en inglés “Me gusta”. Supongo que todos, en todos los idiomas, conocen un “me gusta” así que vamos a seguir con eso.

Ahora agregaremos más CSS para like_box;

 .like_box { margin-top:-40px; } 

Así que todo el código se ve así (he eliminado el id_aplicado porque no lo necesitaba)

HTML:

  

CSS:

 .like_wrap { width:55px; height:25px; overflow:hidden; } .like_box { margin-top:-40px; } 

Y ahora tengo una caja pequeña y decente, que funciona bien y no da saltos. Déjame saber cómo funciona esto para ti y si hay algún problema que estés enfrentando.

La mayoría de las sugerencias son ahora, ya no son válidas.

La solución correcta a partir de hoy es utilizar el diseño de ‘botón’.

p.ej.

Imagen del botón en FB Docs

Los documentos de FB parecen no estar completamente actualizados todavía … si te desplazas hacia abajo verás que solo indican 3 diseños disponibles, pero el menú desplegable sugiere 4.

enter image description here

¡Esto significa que ahora puede usar una solución menos hacky!

esto funcionó para mí:

 .fb-like.fb_edge_widget_with_comment.fb_iframe_widget { height: 26px; overflow: hidden; width: 138px; } 

Mi solución es una pequeña campana pero funciona. Lo que hago es básicamente detectar dónde va a estar el número y usar css para tener una cubierta sobre él. Supongo que también puedes engañar al sistema y agregar más visitas si lo deseas. Aquí está mi código usando jquery pero será diferente de otros dependiendo de dónde coloque el botón Me gusta en su página.

No es el más glamuroso, pero la seguridad es muy estrecha para manipular el contenido en el lado de un marco.

  
  

Agregar lo siguiente a su CSS debe ocultar el elemento de texto para los usuarios y mantener FB Happy

 .connect_widget_not_connected_text { display:none !important; /*in your stylesheets to hide the counter!*/ } 

– Actualización

Intenta usar un enfoque diferente.

http://www.facebook.com/share/

Facebook ahora admite ocultar el conteo, use esto en el marcado:

 data-layout="button" 

Esto es lo que he intentado y funciona bien en ff, chrome y ie8:

 /* set width for the  tag */ .fb-button { width:51px; } /* set width for the iframe below, to hide the count label*/ .fb-button iframe{ width:45px!important; } 

Todo lo que necesita hacer es editar el código iframe que Facebook le da y cambiar el ancho a 47 (debe cambiarlo en 2 lugares). Parece funcionar perfectamente para mí hasta ahora.