Pulsante Accedi

Il pulsante Accedi è un modo semplice per attivare la procedura di Facebook Login sul tuo sito web o sulla tua app web.

Se qualcuno non ha ancora effettuato l'accesso all'app, vedrà questo pulsante e cliccandovi sopra si aprirà una finestra di dialogo Accedi, che avvia il flusso di accesso. Le persone che hanno già effettuato l'accesso non vedranno alcun pulsante, oppure puoi anche scegliere di mostrare loro il pulsante Esci.

Se mostri il pulsante Esci, quando le persone lo usano per uscire, escono automaticamente sia dall'app sia da Facebook.

Il pulsante Accedi è stato progettato per funzionare solo in relazione all'SDK JavaScript se stai creando un'app mobile oppure se non puoi utilizzare il nostro SDK JavaScript, dovresti seguire invece le linee guida per il flusso di accesso per tale tipo di app.

Il pulsante Continua con Facebook sostituisce le versioni precedenti del pulsante Accedi. Per maggiori informazioni, consulta Migrazione.

Configuratore del plug-in

Pulsante Continua come {name}

Il pulsante Continua come {name} presenta il testo "Continua come {persons' name}" e, se lo desideri, include l'immagine del profilo Facebook della persona in questione se ha effettuato l'accesso a Facebook nello stesso browser. Per utilizzare il pulsante Continua come {name}, devi prima caricare l'SDK JavaScript. Per istruzioni sulla configurazione dell'SDK JavaScript, consulta l'avvio rapido di SDK JavaScript. Abilita Continua come {name} aggiungendo data-use-continue-as="true" alle impostazioni per il tuo pulsante.

L'altezza del pulsante Continua come {name} non è personalizzabile.

Se si seleziona una dimensione che supera i parametri massimi, il pulsante verrà impostato automaticamente sulla larghezza massima.

Best practice per il pulsante Continua come {name}

Il pulsante Continua come {name} può rappresentare un ottimo modo per aumentare i clic e le interazioni. Consente all'utente di vedere l'immagine del profilo e il nome sul nostro pulsante Accedi e può aiutare a personalizzare maggiormente l'app.

Questo, tuttavia, può anche creare confusione se l'utente non si aspetta di vedere il proprio nome e la foto del profilo in questo contesto. Prendi in considerazione i seguenti elementi per valutare se il pulsante Continua come è la scelta migliore per l'app.

Anche se Continua come {name} non rappresenta la scelta giusta per l'app, puoi ancora provare i nuovi pulsanti dell'SDK JavaScript che indicano "Continua con Facebook".

Casi d'uso suggeriti

Serviamo una base di utenti globale e a diverse aree geografiche corrispondono aspettative degli utenti differenti. Impegnati a rispettare tali aspettative quando utilizzi questo pulsante.

Si tratta di un'ottima scelta quando:

• La tua app è social:
  quando le persone utilizzano app social, si aspettano di connettersi ad altre persone. Abbiamo osservato che, in questi casi, il pulsante Continua come {name} è una buona soluzione.

• Le persone del mercato di riferimento condividono i telefoni:
  quando più persone utilizzano lo stesso telefono, il pulsante Continua come {name} può dare loro la certezza che stanno utilizzando l'account giusto.

Si tratta di una scelta da evitare quando:

• La tua app è nuova:
  se l'app è nuova sul mercato, è più probabile che gli utenti siano confusi sul motivo della visualizzazione automatica del loro nome e dell'immagine del profilo, rispetto a un'app consolidata o familiare che gli utenti intendono utilizzare con frequenza regolare.

• Le persone del mercato di riferimento sono preoccupate della privacy:
  in molti Paesi, le immagini del profilo sono considerate molto private. In questo caso potrebbe essere utile evitare di utilizzare il pulsante Continua come {name} poiché viene mostrata l'immagine del profilo della persona che effettua l'acceso.

Best practice per il pulsante Accedi

Segui le best practice generali per l'utilizzo di Facebook Login. Seguire queste due best practice quando utilizzi il pulsante Continua come {name} è molto importante:

• Fornisci un metodo per uscire (condizione richiesta dalla normativa)
• Test e misura: identifica l'impatto che tale condizione ha sulle percezioni e sulla conversione degli utenti

Alcune altre best practice possibili:

• Esprimi in modo chiaro quali sono le funzionalità dell'accesso
• Utilizza un segnaposto/una ruota durante il caricamento del pulsante Accedi e rimuovilo quando il pulsante è stato caricato. Un esempio di tale codice:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Impostazioni

Oltre alle impostazioni precedenti, puoi anche modificare quelle indicate di seguito:

Migrazione

Per i pulsanti precedenti verrà effettuata la migrazione a quelli nuovi. La seguente tabella mostra la mappatura.

I nuovi pulsanti Continua come {name} dispongono di un parametro denominato button_type, non necessario nei pulsanti precedenti. È con questo parametro che specifichi i pulsanti Continua con Facebook o Accedi con Facebook. Se non specifichi un tipo di pulsante, quest'ultimo viene visualizzato come il nuovo pulsante piccolo. Questa dimensione è media rispetto ai pulsanti precedenti. Per il caso x-large, il pulsante verrà rimpicciolito leggermente. Se specifichi il parametro button_type, i pulsanti verranno visualizzati come specificato.

Puoi caricare i pulsanti più rapidamente avviando l'SDK JavaScript il prima possibile. Tuttavia, il sistema non può caricare i pulsanti finché la pagina web e JavaScript non hanno terminato il caricamento, in seguito può creare l'iframe e caricare le risorse per la visualizzazione del pulsante.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Localizzazione:

Il caricamento di un pulsante in una lingua diversa necessita del caricamento dell'SDK JavaScript per tale lingua. Per maggiori informazioni sulla localizzazione dell'SDK JavaScript, consulta Localizzazione con i plug-in social e l'SDK JavaScript.

FAQ

Come faccio a utilizzare questo pulsante per far eseguire l'accesso agli utenti?

Dopo che una persona ha cliccato sul pulsante Accedi e ha accettato la finestra di dialogo Accedi, completando il flusso di accesso, la tua app può utilizzare l'SDK di Facebook per Javascript per effettuare chiamate all'API per conto di tale persona.

Non è necessaria un'ulteriore configurazione, ma puoi utilizzare l'impostazione onlogin del pulsante per attivare la tua funzione JavaScript che verrà eseguita al momento dell'accesso.

Posso utilizzare il pulsante Accedi con il codice di registrazione lato server?

Sì, ma hai ancora bisogno di utilizzare parzialmente l'SDK JavaScript. Dopo il completamento della procedura di accesso avviata cliccando sul pulsante, l'SDK avrà accesso a un oggetto authResponse utilizzando FB.getLoginStatus(). Puoi utilizzare questa funzione per passare l'oggetto response al codice lato server per completare eventuali registrazioni esistenti.

Posso utilizzare il pulsante Accedi per richiedere nuovamente un'autorizzazione che è stata rifiutata da una persona?

Il pulsante Accedi non supporta le richieste ripetute perché richiedere nuovamente autorizzazioni rifiutate non si adatta alla terminologia impiegata sul pulsante. Se hai bisogno di richiedere nuovamente un'autorizzazione, configura un pulsante personalizzato e utilizza FB.login() come descritto nella documentazione su Facebook Login per il web.

Il pulsante non viene visualizzato.

I tag <div> vengono trasformati in pulsanti visualizzati utilizzando una tecnologia denominata XFBML, che si basa su JavaScript nell'SDK per analizzare la pagina ed effettuare le sostituzioni. Se stai modificando in modo dinamico il contenuto della pagina per aggiungere div dopo che il metodo init dell'SDK è stato eseguito, (ad es. in una finestra di dialogo costruita dinamicamente), devi chiamare di nuovo FB.XFBML.parse() affinché venga realizzata la trasformazione.