El botón Facebook Connect no aparece en Safari/Chrome

Question

Mi implementación de Facebook Connect (solo un simple botón de inicio de sesión, fb: botón de inicio de sesión) funciona perfectamente en Firefox e IE.

Pero el mismo botón no se muestra en Safari/Chrome (Webkit).

Esto es lo irónico. En mi esfuerzo de depuración, guardé la página (que contiene fb: botón de inicio de sesión) como una página estática y luego la cargo en Safari. Y el botón aparece, ¡todo funciona!

La misma página exacta (con la misma fuente HTML) representada por mi PHP no tiene forma de abrir el botón.

Estoy tratando de soportar Webkit aquí pero estoy a punto de darme por vencido. ¿Alguien puede ayudar?

Answer 1

Esto puede deberse a la instalación de ClickToFlash. Deshabilítelo o seleccione "Cargar automáticamente vistas de Flash invisibles" en la configuración de ClickToFlash.

Answer 2

Esto sucedió cuando tenía el dominio incorrecto en callback_url en config/facebooker.yml. Aparentemente usa eso para cargar los archivos js.

Answer 3

Tuve el mismo problema pero lo resolví al asegurarme de que la URL en la configuración de mi aplicación era exactamente la misma que la de mi sitio (es decir, no funcionaba cuando accedía a mi sitio sin la www.).

Answer 4

Lo que descubrimos es que Safari (y tal vez algunas versiones anteriores de Chrome y otros navegadores WebKit) tienen un problema con el código de Facebook usando la función innerHtml JS si su página llega con un encabezado de respuesta XHTML (application/xhtml + xml). El uso de texto/html resuelve el problema.

En caso de JSF2, que utilizamos, la aplicación de la solución era tan simple como envolver el botón FB así:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://www.facebook.com/2008/fbml" 
    xmlns:f="http://java.sun.com/jsf/core"> 

... 

    <f:view contentType="text/html"> 
     <fb:login-button>Login using Facebook</fb:login-button> 
    </f:view> 

Facebook informe de errores aquí:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545

Answer 5

encontré una manera más de que esto puede ocurrir (la culpa-yo-de-ser-estúpida); probablemente no sea común, pero en el caso de que le salve la molestia a alguien más, aquí está:

Este síntoma también puede deberse a varias herramientas de seguridad que bloquean los recursos de Facebook.

En mi caso, instalé Facebook Desconectar hace siglos en Chrome como un complemento y lo olvidé por completo. También tuve una segunda instalación de Chrome que era aparentemente idéntica (pero no tenía Facebook Disconnect). El primero cargaría correctamente el botón fb: login, y el otro no; me llevó años antes de mirar los complementos, porque Facebook Disconnect no tenía un ícono y por eso su presencia fue bastante fácil de perder.

Esto es lo que verá si algún tipo de complemento de seguridad impide que los recursos de Facebook se carguen. Solo mire el html que se muestra en el navegador usando las herramientas de desarrollador.

En una sesión normal de cromo que va a terminar con algo como esto:

<fb:login-button><a class="fb_button fb_button_medium"><span class="fb_button_text">Your text here</span></a></fb:login-button>

Sin embargo, en la versión con recursos de facebook con discapacidad que va a terminar con esto:

<fb:login-button>Your text here</fb:login-button>

Como dije, bastante obvio en retrospectiva.

Answer 6

Tuve este problema con el botón de Facebook no se muestra en absoluto y me llevó una eternidad averiguar qué era. Afortunadamente, después de días de tirar del pelo, ahora compartiré la respuesta con todos. En mi situación, simplemente no tenía xfbml habilitado. En mi FB.init lo tenía establecido en false:

FB.init({ 
     appId  : 'app_id', // App ID 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : false, // parse XFBML 
     oauth  : true // enable OAuth 2.0 
    }); 

me cambiaron a esta "verdadera " (XFBML) y los botones de inicio de sesión funciona muy bien ahora! : P ¡Buena suerte!

Answer 7

Tenía el mismo problema pero no estaba relacionado con nada como un complemento o contenido mal formado. Parece que si habilita el filtro de país en su página de Facebook tiene un problema con el botón Me gusta, esto debería ser bastante obvio. Facebook obtiene su ubicación de su perfil y no su dirección IP.

Asegúrese de deshabilitar el bloqueo de país si planea usar los complementos sociales.

Answer 8

He intentado todas las soluciones sugeridas aquí y no funcionó para mí. Pero ahora finalmente encontré la solución.

Facebook requiere ahora un seguro (https) para lienzo (Secure Canvas URL). El no seguro será depreciado pronto.

Aquí está la diferencia principal, Chrome no le gusta las conexiones https con certificaciones no válidas. En un host local, es muy probable que tenga instalado stunnel para permitir la conexión https para el host local. Firefox está bien con el certificado SSL creado por el usuario y le permite agregar una excepción cuando intenta acceder a ese sitio. Chrome no lo permite de la caja.

Cuando cargo mi aplicación en Chrome la página está en blanco y no veo ningún botón de inicio de sesión.

Haga clic en F12 y haga clic en la pestaña en Chrome Netwrok:

se ve que la solicitud posterior a su servidor local se cancela. DOBLE Haga clic en él.

Ahora se vería que el cromo es el bloqueo de la máquina local debido al certificado:

clic en continuar de todos modos.

Ahora a volver a su otra pestaña y volver a cargar la página:

Chrome funciona ahora como Firefox y muestra el botón de inicio de sesión.