Facebook Like Button no aparece en Firefox

Question

estoy usando el siguiente código para mi botón

<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like> 

Algunos usuarios han experimentado el botón no presentarse. Observado en 3.6.17 pero observado en otras versiones. Estoy un poco familiar con el error del iframe de Firefox, pero estaba curioso si alguien tiene algún problema para el botón Me gusta de Facebook.

Answer 1

¿Se puede intentar llamar al botón de esta manera:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&amp;xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like> 

y quiero saber si todavía está viendo problemas.

Answer 2

Al igual que los botones que se representan con javascript (<div class="fb-like"/> y <fb:like/>) obtener height = 0 si están inicialmente ocultos (display:none).

Para evitar esto, cree el elemento con javascript después de que aparezca el contenedor y ejecute:

FB.XFBML.parse(); 

Ejemplo:

result.show(); 
var like_box = $(".fb-like-inactive", result); 
like_box.removeClass("fb-like-inactive"); 
like_box.addClass("fb-like"); 
FB.XFBML.parse(); 

Answer 3

Este CSS resuelto por mí

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important} 

Answer 4

Deje una respuesta porque no puedo dejar más comentarios ...

buen truco CSS de Oli parecía que funcionaba inicialmente:

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important} 

pero recorta el cuadro de comentarios que intentó hacer estallar para arriba cuando realmente hace clic en el botón.

La solución de parse diferida de Per parece hacer el trabajo; aquí hay un poco más de detalle. En nuestro caso tuvimos el botón en un menú desplegable, que parecía:

<ul> 
    <li class="control_menu"> 
    <span>menu name</span> 
    <ul style="display: none;"> 
     <li><div class="fb-like-inactive" data-href=...></li> 
     ... 
    </ul> 
    </li> 
    ... 
</ul> 

con código que muestra el menú desplegable ul cuando el usuario se desplaza sobre el elemento control_menu. Se utilizó este código para manejar el análisis retraso:

$(document).ready(function() { 
    $('.fb-like-inactive').closest('.control_menu').hover(function() { 
    var inactive = $(this).find('.fb-like-inactive'); 
    if (inactive.length && (typeof FB != 'undefined')) { 
     inactive.removeClass('fb-like-inactive').addClass('fb-like'); 
     FB.XFBML.parse(this); 
    } 
    }); 
}); 

que encuentra los botones fb-like-inactive, a continuación, busca el árbol para encontrar los control_menu elementos que contienen, a continuación, adjunta un evento para los control_menu elementos para detectar cuando el usuario se desplaza sobre ellos. Cuando detecta un elemento emergente para un elemento de menú particular, busca botones inactivos como ese dentro de ese elemento, los marca como normales fb-like, y luego analiza solo el contenido de ese elemento.

Espero que esto le ahorre a alguien algo de tiempo.

Answer 5

Esto sigue siendo un problema, como puede verse aquí (también contiene fix): http://codepen.io/wiledal/pen/cGnyq

Firefox no saca el Facebook-como si el div se oculta en el momento del análisis. En el ejemplo anterior, demoro la presentación de un div después de diferentes tiempos. Puede ver que un botón similar mostrado después de 500 ms no se procesa en Firefox.

Logré un trabajo que no corta el diálogo de comentarios después de me gusta, simplemente usando min-height y min-width en lugar de establecer los valores que se propusieron previamente.

.fb-like span, .fb-like iframe { 
    min-width: 100px !important; 
    min-height: 20px !important; 
} 

Answer 6

solución de Per se basa en la versión XFBML del botón FB y yo no estaba seguro de cómo hacer esto con la "versión HTML5" o si es realmente posible, pero he encontrado una solución/JS CSS que no clip de contenido en lugar de lo que aquí está:

html

<button class="like-button">I like this stuff</button> 

<!-- This is a hidden like-box --> 
<div class="social-share aural">...stuff...</div> 

CSS:

html body .aural { 
    position: absolute; 
    font-size: 0; 
    left: -9999px; 
} 

jQuer Y:

$('body').on("click", '.like-button', function(e) { 
    var $socialShare = $('.social-share'); 
    $socialShare.css({'font-size':'1em'}); 
    var sw = $socialShare.width(); 
    $socialShare.animate({left: sw-80}, 400); 
}); 

Puede que tenga que utilizar regla importante (tanto en CSS y JS) o nido de la clase .aural dependiendo del resto de su css!. Si no funciona, sugeriría tratar de cambiar el diseño predeterminado para que no anule .aural o nest .aural y como último recurso! Importante ...

Answer 7

Tuve el mismo problema solo en Firefox (v.29.0.1) y resultó ser AdBlock plus (v.2.6) bloqueando los botones Me gusta y Compartir del renderizado.

Answer 8

Tuve el mismo problema pero el culpable fue establecer la protección de seguimiento en about: config en true.

Este consejo me habló de la idea inicial: Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster

Answer 9

solo pasé una hora en este y en un nivel mucho más básico, lo que necesita saber que los botones de Facebook no rendirán al probar su página en la zona.

Parece obvio, pero solo funcionará cuando se renderice desde un servidor web.

Answer 10

Mi solución es completamente diferente a cualquiera de las anteriores.

Tengo una animación de caracteres en mi página, y uno de los elementos tiene el id = "cuerpo" (lo cual es perfectamente razonable) sin embargo, esto pareció matar el script FB.

Tan pronto como cambié el nombre de mi identificación, la acción comenzó a funcionar de nuevo; Solo puedo suponer que hubo algún tipo de conflicto, ya que los elementos id se pueden referenciar como variables globales.

Descubrí esto a través del proceso habitual de eliminación de elementos hasta que las cosas funcionen, así que estoy bastante seguro de que fue esto.