personalizado - como poner el boton me gusta en mi pagina de facebook

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

Question

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?

Answer 1

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/

Answer 2

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

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

Answer 3

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.

Answer 4

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

/* set width for the <fb:like> tag */

.fb-button {
    width:51px;
}

/* set width for the iframe below, to hide the count label*/

.fb-button iframe{
    width:45px!important;
}

Answer 5

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

data-layout="button"

Answer 6

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. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

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.

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

Answer 7

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.

Answer 8

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.

<script type="text/javascript">
    var facebook_load = '''';
    $(document).ready(function() {
        facebook_load = setInterval(''checkIframeFacebookLoad()'',100);
    });

    function checkIframeFacebookLoad() {
        if($(''iframe.fb_ltr'').length) {
            var parent = $(''iframe.fb_ltr'').parent();
            var hide_counter = $(''<div></div>'').attr(''id'', ''hide_count'');
            parent.append(hide_counter);
            clearInterval(facebook_load);
        }
    }
</script>

<style type="text/css">
    #hide_count {
        position:absolute;
        top:-8px;
        left:122px;
        background:#becdd5;
        padding:5px 10px; 
    }
</style>

Answer 9

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;

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>

Ahora vamos a envolver un div por allí.

<div class="like_wrap">
    <iframe (...)></iframe>
</div>

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;

<iframe class="like_box" (...)> </iframe>

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:

<div class="like_wrap">
    <iframe class="like_box" 
        src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;locale=en_US" 
        scrolling="no" 
        frameborder="0" 
        style="border:none; overflow:hidden; width:45056px; height:90px;" 
        allowTransparency="true"></iframe>
</div>

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.

Answer 10

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:

<style type="text/css">
    .fb-like span {
        display: block;
        height: 22px;
        overflow: hidden;
        position: relative;
        width: 140px /* set this to fit your needs when support international sites */;
    }

    .fb-like iframe {
        height: 62px;
        overflow: hidden;
        position: absolute;
        top: -41px;
        width: 55px;
    }
</style>

Botón FB Like:

<div id="fb-root"></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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));</script>

<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>

Answer 11

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:

<span class="no_overflow">
<fb:like></fb:like>
</span>

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.

Answer 12

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

  <div style="width:52px;overflow:hidden;">
      <fb:like layout="button_count"></fb:like>

      <div id="fb-root"></div>
          <script>
              window.fbAsyncInit = function() {
                  FB.init({
                    appId: ''YOUR_APP_ID'',
                    status: true,
                    cookie: true,
                    xfbml: true
                  });
              };
              (function() {
                  var e = document.createElement(''script'');
                  e.type = ''text/javascript'';
                  e.src = document.location.protocol +
                  ''//connect.facebook.net/en_US/all.js'';
                  e.async = true;
                  document.getElementById(''fb-root'').appendChild(e);
              }());
          </script>
      </div>

Answer 13

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.

Answer 14

esto funcionó para mí:

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

Answer 15

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