Pulsante Accedi

Il pulsante Accedi è un metodo semplice per attivare il processo Facebook Login nel tuo sito web o nella tua app.

Se l'accesso all'app non è stato effettuato, il pulsante sarà visibile e cliccando su di esso verrà aperta una finestra di dialogo Accedi che avvia il flusso di accesso. Se l'accesso è già stato effettuato, il pulsante non sarà visibile, ma puoi scegliere di mostrare un pulsante Esci.

Se decidi di mostrare un pulsante Esci, quando gli utenti lo useranno, usciranno sia dall'app che da Facebook.

Il pulsante Accedi è configurato per l'uso con l'SDK JavaScript. Se stai creando un'app mobile o non sei in grado di usare tale SDK, segui la guida al flusso di accesso per quel tipo di app.

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

Configuratore del plug-in

Dimensioni pulsante
Testo del pulsante
Forma del pulsante "Layout"
[?]
Width

Pulsante Continua come {Name}

Il pulsante Continua come {Name} presenta il testo "Continua come {persons' name}" e, facoltativamente, include l'immagine del profilo Facebook dell'utente se ha effettuato l'accesso a Facebook nello stesso browser. Per usare il pulsante Continua come {Name}, devi prima caricare l'SDK JavaScript. Per istruzioni sulla configurazione dell'SDK JavaScript, consulta la relativa guida di avvio rapido. 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.

Dimensioni dei pulsantiAltezzaLarghezzaLarghezze personalizzate?

Piccolo

20 pixel

200 pixel

No

Medio

28 pixel

200-320 pixel

Grande

40 pixel

240-400 pixel

Se selezioni una dimensione maggiore dei parametri massimi, il pulsante torna alla larghezza massima per impostazione predefinita.

Best practice per il pulsante Continua come {Name}

Il pulsante Continua come {Name} può essere un ottimo modo per aumentare clic e interazioni. Consente all'utente di vedere la propria immagine del profilo sul pulsante Accedi e può aiutarti a rendere la tua app più personalizzata.

Di conseguenza, potrebbe anche generare confusione, se l'utente non si aspetta di vedere il proprio nome e l'immagine del profilo in questo contesto. Prendi in considerazione quanto segue per stabilire se Continua come sia davvero la soluzione più adatta per la tua app.

Anche se Continua come {Name} non è adatto alla tua app, puoi comunque provare i nuovi pulsanti dell'SDK JavaScript con la dicitura "Continua con Facebook".

Casi d'uso suggeriti

Gestiamo una base di utenti a livello globale, pertanto le aspettative possono variare in base all'area geografica. Quando usi il pulsante, rispetta sempre tali aspettative.

Uso consigliato
  • Se la tua app è di tipo social:
    Quando gli utenti usano app social, si aspettano di connettersi con altri. In questi casi, il pulsante Continua come {Name} offre buoni risultati.

  • Se gli utenti nel mercato di riferimento condividono i cellulari:
    Quando più utenti condividono lo stesso cellulare, Continua come {Name} può aiutarli a usare sempre l'account giusto.

Uso sconsigliato
  • Se la tua app è nuova:
    Se hai appena immesso l'app nel mercato, gli utenti potrebbero non capire perché il loro nome e l'immagine del profilo vengano mostrate automaticamente, a differenza di quanto succede con app conosciute o familiari che gli utenti prevedono di usare regolarmente.

  • Se gli utenti nel mercato di riferimento sono preoccupati per la privacy:
    In molti Paesi, le immagini del profilo sono considerate estremamente private. Ti consigliamo di evitare l'uso del pulsante Continua come {Name} in questi casi, dal momento che mostrerebbe l'immagine del profilo dell'utente che effettua l'accesso.

Best practice per il pulsante Accedi

Attieniti alle best practice generali per l'uso di Facebook Login. Quando usi il pulsante Continua come {Name}, è fondamentale seguire queste due best practice:

  • Fornisci un metodo di disconnessione (obbligatorio secondo la normativa).
  • Esegui test e misurazioni: stabilisci l'impatto sulla percezione degli utenti e sulla conversione.

Altre possibili best practice:

  • Spiega con chiarezza cosa succede dopo l'accesso.
  • Inserisci un placeholder/un'icona visibile durante il caricamento del pulsante Accedi, che sparisca una volta caricato. Ecco un esempio di 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:

Impostazione Attributo HTML5 Descrizione Opzioni

auto_logout_link

data-auto-logout-link

Se abilitato, gli utenti che hanno effettuato l'accesso vedranno il pulsante Esci.

false, true

onlogin

data-onlogin

Una funzione JavaScript da attivare una volta completato l'accesso.

Function

scope

data-scope

La lista delle autorizzazioni da richiedere durante l'accesso.

public_profile (predefinita) o una lista di autorizzazioni separate da virgola

size

data-size

Seleziona un'opzione per le dimensioni del pulsante.

small, medium, large

default_audience

data-default-audience

Determina il pubblico selezionato per impostazione predefinita alla richiesta di un'autorizzazione di scrittura.

everyone, friends, only_me

Migrazione

Verrà eseguita la migrazione ai nuovi pulsanti. La tabella seguente mostra la mappatura.

Pulsante precedenteAltezza precedentePulsante nuovoAltezza nuova

Icona

18 pixel

Elementi obsoleti

Elementi obsoleti

Piccolo

18 pixel

Piccolo

20 pixel

Medio

22 pixel

Piccolo

20 pixel

Grande

25 pixel

Piccolo

20 pixel

Molto grande

39 pixel

Piccolo

20 pixel

I nuovi pulsanti Continua come {Name} presentano un parametro denominato button_type, non richiesto dai pulsanti precedenti. Questo è il modo in cui devi specificare i pulsanti Continua con Facebook e Accedi con Facebook. Se non specifichi un tipo di pulsante, viene visualizzato il nuovo pulsante piccolo. Questa dimensione è considerata media rispetto ai pulsanti precedenti. Se scegli x-large, si ridurrà leggermente. Se specifichi il parametro button_type, i pulsanti verranno visualizzati di conseguenza.

Puoi fare in modo che i pulsanti vengano caricati più velocemente avviando l'SDK JavaScript il prima possibile. Tuttavia, il sistema non può caricare i pulsanti fino al termine del caricamento della pagina web di JavaScript, dopodiché vengono caricati l'iframe e le risorse necessarie 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 del pulsante in altre lingue richiede il caricamento dell'SDK JavaScript relativo alla lingua scelta. Per maggiori informazioni sulla localizzazione dell'SDK JavaScript, consulta Localizzazione con i plug-in social e l'SDK JavaScript.

FAQ

Come faccio a usare questo metodo per l'accesso degli utenti?

Dopo che qualcuno avrà cliccato sul pulsante Accedi e accettato la finestra di dialogo Accedi completando il flusso di accesso, la tua app potrà usare l'SDK di Facebook per JavaScript per effettuare chiamate API per conto di tale utente.

Non sono necessarie altre configurazioni, ma puoi usare l'impostazione onlogin nel pulsante per attivare la tua funzione JavaScript all'accesso.

Posso usare il pulsante Accedi con un codice di registrazione lato server?

Sì, ma in parte dovrai usare l'SDK JavaScript. Una volta completato l'accesso, avviato cliccando sul pulsante, l'SDK avrà accesso all'oggetto authResponse usando FB.getLoginStatus(). Puoi usare questa funzione per passare l'oggetto restituito al codice lato server e completare la registrazione.

Posso usare il pulsante Accedi per richiedere di nuovo un'autorizzazione negata?

Il pulsante Accedi non supporta questa opzione, in quanto il verbo non è associabile alla richiesta di autorizzazioni rifiutata. Se desideri richiedere nuovamente un'autorizzazione, crea un pulsante personalizzato e usa FB.login() come descritto nella documentazione di Facebook Login per il Web.

Il pulsante non viene visualizzato.

I tag <div> vengono trasformati in pulsanti visualizzati usando una tecnologia chiamata XFBML, che usa JavaScript nell'SDK per analizzare la pagina ed effettuare sostituzioni. Se stai modificando dinamicamente il contenuto della Pagina per aggiungere questi div dopo l'esecuzione del metodo init dell'SDK (ad esempio, in una finestra di dialogo costruita dinamicamente), devi chiamare nuovamente FB.XFBML.parse() affinché la trasformazione venga applicata.