videos verde source reproduce problemas funciona found for error con compatible alenta facebook firefox iframe facebook-like

facebook - verde - problemas con firefox



El botón Me gusta de Facebook no aparece en Firefox (10)

Estoy usando el siguiente código para mi botón Me gusta

<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 que el botón Me gusta no aparece. 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.

¿Puedes intentar llamar al botón Me gusta así?

<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 avíseme si todavía está viendo problemas.

Acabo de pasar una hora en esto y en un nivel mucho más básico, necesita saber que los botones de Facebook no se mostrarán cuando pruebe su página localmente.

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

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

Para evitar esto, cree el elemento con javascript después de que se muestre el contenedor, y luego ejecútelo:

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();

Dejando una respuesta porque no puedo dejar comentarios todavía ...

El bonito truco CSS de Oli parecía funcionar al principio:

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

pero recortó el cuadro de comentario que intentó aparecer cuando hicimos clic en el botón Me gusta.

La solución parse demorada de Per parece hacer el trabajo; aquí hay un poco más de detalle. En nuestro caso, teníamos el botón "me gusta" 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 un código que muestra el menú desplegable ul cuando el usuario se desplaza sobre el elemento control_menu . Usamos este código para manejar el análisis retrasado:

$(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); } }); });

Encuentra los botones fb-like-inactive , luego busca el árbol para encontrar los elementos de control_menu que lo contienen, luego conecta un evento a los elementos de control_menu para detectar cuando el usuario pasa 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 como fb-like y luego analiza solo el contenido de ese elemento.

Espero que esto le ahorre a alguien algo de tiempo.

Este CSS lo resolvió para mí

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

Esto sigue siendo un problema, como se puede ver aquí (también contiene una corrección): http://codepen.io/wiledal/pen/cGnyq

Firefox no dibuja el estilo de Facebook si el div está oculto 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 anteriormente.

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

La solución de Per está basada en la versión XFBML del botón fb y no estaba seguro de cómo hacer esto con la "versión html5" o si es realmente posible, pero encontré una solución CSS / JS que no recorta el contenido en su lugar. 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; }

jQuery:

$(''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 usar una regla importante (tanto en css como en js) o anidar la clase aaural en función del resto de su CSS. Si no funciona, sugeriría tratar de cambiar el diseño predeterminado para que no anule .aural ni anide .aural y, como último recurso, ¡lo importante!

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

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

Tan pronto como cambié el nombre de mi identificación, la acción comenzó a funcionar nuevamente; 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 eliminar elementos hasta que las cosas funcionaron, así que estoy bastante seguro de que fue esto.

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 de la representación.