2009-05-01 12 views
9

La mia implementazione di Facebook Connect (solo un semplice pulsante di accesso, fb: login-button) funziona perfettamente su Firefox e IE.Pulsante Facebook Connect non visualizzato in Safari/Chrome

Ma lo stesso pulsante non viene visualizzato in Safari/Chrome (Webkit).

Ecco cosa è ironico. Nel mio tentativo di debug, ho salvato la pagina (che contiene fb: login-button) come una pagina statica e quindi caricarla in Safari. E il pulsante si presenta, tutto funziona!

La stessa pagina esatta (con la stessa identica sorgente HTML) resa dal mio PHP non ha modo di far apparire il pulsante.

Sto provando a supportare Webkit qui ma sono vicino a rinunciare. Qualcuno può aiutare?

+0

Puoi pubblicare il tuo codice sorgente, o meglio ancora, un collegamento ad un esempio dal vivo? –

+0

Sicuro. La pagina dinamica - http://dev.hailer.my/main/fbconnect La pagina statica - http://dev.hailer.my/test_fb.html Sia pagina visualizzata gli stessi codici; e solo la pagina statica funziona in Webkit. –

+0

Ho lo stesso problema. La pagina di test funziona ancora se la metti nella cartella "principale"? – cole

risposta

1

Questo può essere dovuto all'installazione di ClickToFlash. Disabilitarlo o selezionare "Carica automaticamente viste Flash invisibili" nelle impostazioni di ClickToFlash.

0

Questo è accaduto quando avevo il dominio sbagliato in callback_url in config/facebooker.yml. Apparentemente lo usa per caricare i file js.

0

Ho avuto lo stesso problema ma l'ho risolto assicurandomi che l'URL nelle impostazioni della mia app fosse esattamente uguale a quello del mio sito (cioè non funzionava quando ho avuto accesso al mio sito senza www.).

1

Quello che abbiamo scoperto è che Safari (e forse alcune vecchie versioni di Chrome o altri browser WebKit) hanno un problema con il codice di Facebook utilizzando la funzione innerHTML JS se la pagina arriva con un'intestazione di risposta XHTML (application/xhtml + xml). L'utilizzo di text/html risolve il problema.

In caso di JSF2, che usiamo, l'attuazione della correzione è stata semplice come avvolgere il pulsante FB in questo modo:

<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 Bug Report qui:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545

4

ho trovato un altro modo in cui ciò può accadere (il modo incolpare me stesso-per-essere-stupido); probabilmente non è comune, ma nel caso in cui si risparmi qualcun altro, ecco qui:

Questo sintomo può anche essere causato da vari strumenti di sicurezza che bloccano le risorse di Facebook.

Nel mio caso, ho installato Facebook Disconnect anni fa in Chrome come plug-in e ho dimenticato tutto sull'installazione. Ho anche avuto una seconda installazione di Chrome che era apparentemente identica (ma non aveva Facebook Disconnect). Il primo caricherà correttamente il pulsante fb: login e l'altro no; Mi ci sono voluti anni prima che guardassi i plugin, perché Facebook Disconnect non aveva un'icona e quindi la sua presenza era piuttosto facile per me mancare.

Ecco cosa vedrete se un qualche tipo di plugin di sicurezza impedisce il caricamento delle risorse di Facebook. Basta guardare l'html che esegue il rendering nel browser utilizzando gli strumenti di sviluppo.

In una sessione di cromo normale vi ritroverete con qualcosa di simile:

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

Ma nella versione con le risorse di Facebook disabilitati vi ritroverete con questo:

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

Come ho detto, piuttosto ovvio in retrospettiva.

+0

+1 per aver menzionato l'estensione di disconnessione. Ci ho messo un po 'a capirlo :-) –

1

Ho avuto questo problema con il pulsante di Facebook non mostrato affatto e mi ci è voluto un tempo per capire di cosa si trattava. Fortunatamente dopo giorni di tirate dei capelli ora condividerò la risposta con tutti. Nella mia situazione semplicemente non avevo abilitato xfbml. Nel mio FB.init avevo impostato su 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 
    }); 

l'ho cambiato a "vera" (XFBML) ei pulsanti di accesso funziona alla grande ora! : P Buona fortuna!

3

Aveva lo stesso problema ma non era correlato a qualcosa come un plug-in o un contenuto non valido. Sembra che se abiliti il ​​filtro paese sulla tua pagina facebook ha un problema con il pulsante mi piace, questo dovrebbe essere abbastanza ovvio. Facebook ottiene la tua posizione dal tuo profilo e non il tuo indirizzo IP.

Assicurarsi di disattivare il blocco paese se si prevede di utilizzare i social plugin.

0

Ho provato tutte le soluzioni suggerite qui e non ha funzionato per me. Ma ora ho finalmente trovato la soluzione.

Facebook richiede ora un secure (https) per Canvas (Secure Canvas URL). Il non protetto verrà presto ritirato.

Ecco la differenza principale: a Chrome non piacciono le connessioni https con certificazioni non valide. Su un localhost, è molto probabile che stunnel sia installato per consentire la connessione https per l'host locale. Firefox va bene con il certificato SSL creato da te stesso e ti consente di aggiungere un'eccezione quando provi ad accedere a quel sito. Chrome non lo consente immediatamente.

enter image description here

Quando carico la mia app in Chrome la pagina è vuota e non vedo alcun pulsante di accesso.

Clicca F12 e fare clic sulla scheda Netwrok in Chrome:

enter image description here

si vede che la richiesta POST al localhost viene annullata. DOPPIA Fare clic su di esso.

Ora si vedrebbe che Chrome sta bloccando il localhost a causa del certificato:

enter image description here

click sul procedere comunque.

ora per ritornare a un'altra scheda e ricaricare la pagina:

enter image description here

Chrome ora funziona come Firefox e mostra il pulsante di accesso. enter image description here

Problemi correlati