jquery - personalizado - Los botones Me gusta de Facebook no se muestran cuando se cargan ocultos

no aparece el boton me gusta en mi pagina de facebook

Question

Estoy un poco atascado con este. Tengo una lista de artículos con fragmentos que enlazan con el artículo completo. cuando se desplaza sobre cada una, aparece una barra en la parte inferior de la que contiene los botones de compartir en las redes sociales (FB, Twitter y G + 1).

http://jsfiddle.net/6Ukmb/

Tenga en cuenta que el formato se ha simplificado en el ejemplo de jsfiddle y que G + 1 no funciona, lo que no es importante para esta pregunta.

Mi problema es que el botón FB like no se carga correctamente. En Chrome, todo funciona como se espera. En FF o IE, los botones FB se cargan ''ocultos'' y no puedo hacer que aparezcan.

Si cuando la página aún está cargando el mouse está sobre uno de los botones de artículo, el botón FB para ese artículo se carga bien. Si el efecto de desplazamiento está oculto cuando FB termina de cargarse, no aparecerá por amor ni por dinero.

Lo he separado y he encontrado que si quito la display: none; css display: none; de content-box .story-hover , se carga bien. Por supuesto, eso también significa que los paneles ocultos se cargan visibles hasta que alguien se coloca sobre ellos para ocultarse, lo que no funcionará.

No puedo averiguar cómo resolver esto. Además, debido al volumen de FB como botones, es un poco más lento en mi compilación de desarrollo, por lo que retrasar la display:none hasta el final de la carga de la página tampoco funcionará.

Answer 1

Cada navegador funciona de manera diferente en jsfiddle. Si intenta cargar el código en un archivo html de prueba que puede crear. Todavía podría funcionar. Simplemente no en js fiddle ... A veces jquery no anula el código css en los archivos o etiquetas css. Por lo tanto, si se hace de esa manera. Es posible que se quede escondido.

Lo he visto suceder al azar cuando trabajo en mis violines en computadoras y navegadores.

Answer 2

El método de opacidad funciona, sin embargo, los botones están activos en la página, pero no son visibles.

Por lo tanto, si tiene la div con opacidad 0 superpuesta a cualquier otra cosa en la que deba hacer clic, hará clic en los botones ocultos por accidente.

Esperaba que este método funcionara, lamentablemente para mi sitio no es así debido a esto.

Answer 3

En lugar de configurar display: none, intente ocultarlo utilizando margin-top o z-index. Ambos no romperán el botón FB como.

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}

Answer 4

Establecer la opacidad a 0 no es una solución para mí porque oculta y se superpone a todo lo que necesita para hacer clic y también la función jquery fadein usa la propiedad de visualización css y no la opacidad.

así que la solución que se me ocurrió es mostrar el contenedor como bloque pero fuera de la ventana de la izquierda: -9999px, luego programé un temporizador para 1s ~ 2s (tiempo necesario para que todos los botones sociales se procesen) y cambiar la visualización a ninguno y de vuelta a la posición original:

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $(''#bnts_container'').css("display", "none");
     $(''#bnts_container'').css("left", "50%");
    } , 2000);

});

Haga clic en el botón + Compartir here para probar esta solución.

Answer 5

Prefiero hacerlo absoluto dentro de un contenedor.

  iframe{
     position: absolute !important;
     height: 500px !important;
  }

Answer 6

Tuvimos el mismo problema y lo resolvimos estableciendo el ancho inicial y el alto del div que contiene a cero con CSS y luego, cuando se activa el disparador, use jQuery para:

• establezca la opacidad en cero (para ocultar el div mientras se expande)
• Establecer ancho y alto (ampliar el div)
• opacidad animada a 1 (desvanecerse en la div)

Cuando se desvanece, no es necesario restablecer el ancho y la altura a cero. Solo configúralo para mostrar: ninguno después de animar la opacidad a cero. Ahora que el botón de Facebook está cargado y tiene sus dimensiones establecidas, no va a cambiar.

Answer 7

Una alternativa que utilicé fue no renderizar el botón "me gusta" hasta que se muestre el contenedor; esto se puede lograr usando

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

Luego para renderizar el botón me gusta puedes usar

FB.XFBML.parse(); // This will render all tags on the page

o el siguiente es un ejemplo de Jquery sobre cómo representar todos los XFBML dentro de un elemento

FB.XFBML.parse($(''#step2'')[0]); 

o Javascript simple

FB.XFBML.parse(document.getElementById("step2"));

Answer 8

Usa este CSS:

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

La técnica detrás: sobrescribes los datos de Facebook con tu CSS usando "! Important"

Answer 9

Usar la opacity CSS es una buena opción aquí ... algo básico como esto:

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

¡Desde allí puedes agregar transiciones para que se vea bien!

Answer 10

Esto no es una respuesta, esto es un comentario! Espero volver y trabajar en ello y convertirlo en una respuesta.

Tratar el mismo problema. Firefox + contenedor oculto. La única diferencia es que estoy usando onclick slideDown / slideUp para mostrar / ocultar, pero creo que eso es irrelevante.

Despojado, mi html se ve así:

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

He notado que la diferencia entre el contenedor oculto y el oculto, es decir, eliminar mi clase ''hide'' de div # fb_like_button, <span> y <iframe> que Facebook coloca dentro de div.fb-like cambia los atributos de estilo width y height .

Por lo tanto, cuando la página se representa (de nuevo, html muy reducido)

no oculto

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

oculto:

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

Jugar con el estilo de anchura y altura usando las herramientas de desarrollador de Firefox después de una representación completa me permitió volver a mostrar el botón "Me gusta".

Aún no hay solución, pero seguiré actualizando a medida que encuentre más información. Voy a esforzarme mucho para no agregar javascript adicional que restablezca estos atributos de estilo, sino más bien descodificar lo que está haciendo wtf facebook. Solo espero que esto ayude a alguien.