Bouton Login

Le bouton Login offre un moyen simple de déclencher le processus Facebook Login sur votre site web ou votre app web.

Si un utilisateur ne s’est pas encore connecté à votre app, ce bouton apparaît à l’écran. Un clic dessus permet d’afficher une boîte de dialogue Login et de commencer le processus de connexion. Si l’utilisateur s’est déjà connecté, ce bouton n’apparaît pas à l’écran, mais vous pouvez choisir d’afficher à la place un bouton de déconnexion.

Dans ce cas, lorsqu’il est utilisé, la personne est déconnectée de votre app et de Facebook.

Le bouton Login fonctionne uniquement avec le SDK JavaScript. Si vous développez une app mobile ou ne pouvez pas utiliser le SDK JavaScript, nous vous conseillons plutôt de suivre le guide sur le processus de connexion pour ce type d’app.

Le bouton Continuer avec Facebook remplace les anciennes versions du bouton Login. Pour en savoir plus, consultez la section Migration.

Configurateur de plugins

Width

Taille du bouton

large

Texte du bouton

continue_with

Activer le bouton Déconnexion

Inclure le nom et la photo de profil lorsque l’utilisateur est connecté sur Facebook [?]

Obtenir le code

Bouton Continuer en tant que {Name}

Le bouton Continuer en tant que {Name} contient le texte « Continuer en tant que {persons' name} » et comporte éventuellement la photo de profil Facebook de la personne si elle est connectée à Facebook dans le même navigateur. Pour utiliser le bouton Continuer en tant que {Name}, vous devez d’abord charger le SDK JavaScript. Pour obtenir des instructions sur la configuration du SDK JavaScript, consultez le guide de démarrage rapide relatif au SDK JavaScript. Activez l’option Continuer en tant que {Name} en ajoutant data-use-continue-as="true" aux paramètres de votre bouton.

La hauteur des boutons Continuer en tant que {Name} n’est pas personnalisable.

Taille du bouton	Hauteur	Largeur	Largeurs personnalisées ?
Réduite	20 px	200 px	Non
Moyenne	28 px	200 à 320 px	Oui
Grande	40 px	240 à 400 px	Oui

Si vous sélectionnez une taille supérieure aux paramètres maximum, le bouton sera défini par défaut sur la largeur maximum.

Recommandations concernant le bouton Continuer en tant que {Name}

Le bouton Continuer en tant que {Name} peut être un excellent moyen d’augmenter le nombre de clics et le taux d’interaction. Il permet à l’utilisateur de voir sa photo de profil et son nom sur notre bouton Login et peut vous aider à personnaliser votre app.

Par conséquent, il peut aussi prêter à confusion si l’utilisateur ne s’attend pas à voir son nom et sa photo de profil dans ce contexte. Veuillez considérer ce qui suit pour savoir si le bouton Continuer en tant que est le meilleur choix pour votre app.

Même si le bouton Continuer en tant que {Name} ne convient pas à votre app, vous pouvez toujours essayer les nouveaux boutons du SDK pour JavaScript qui indiquent « Continuer avec Facebook ».

Cas d’utilisation suggérés

Nous servons une base mondiale d’utilisateurs qui, dans chaque région, ont différentes attentes. Vous devez respecter ces attentes lorsque vous utilisez ce bouton.

Idéal lorsque...

Vous disposez d’une app sociale :
Lorsque les gens utilisent des apps sociales, ils cherchent à entrer en contact avec d’autres personnes. Nous savons que le bouton Continuer en tant que {Name} fonctionne bien dans ces cas.
Les personnes du marché cible partagent leurs téléphones :
Lorsque plusieurs personnes utilisent le même téléphone, le bouton Continuer en tant que {Name} les assure d’utiliser le bon compte.

À éviter lorsque...

Votre app est nouvelle :
Si votre app est nouvelle sur le marché, vos utilisateurs seront probablement plus déconcertés de voir leur nom et leur photo de profil s’afficher automatiquement, par rapport à une base d’utilisateurs établis ou familiers qui se servent régulièrement de l’app.
Les personnes du marché cible sont préoccupées par la confidentialité :
Dans de nombreux pays, les photos de profil sont considérées comme très privées. Dans ce cas, vous devez éviter d’utiliser le bouton Continuer en tant que {Name}, car il affiche la photo de profil de la personne connectée.

Recommandations pour le bouton Login

Veuillez suivre les recommandations générales relatives à l’utilisation de Facebook Login. Il est particulièrement important de suivre ces deux recommandations lorsque vous utilisez le bouton Continuer en tant que {Name} :

Prévoyez un moyen de se déconnecter (exigé par le règlement).
Testez et mesurez : identifiez l’impact de son utilisation sur les perceptions de l’utilisateur et les conversions.

Voici d’autres recommandations possibles :

Expliquez clairement ce que la connexion implique.
Utilisez un espace réservé ou un bouton fléché pendant le chargement du bouton Login et supprimez-le une fois le bouton chargé. Voici un exemple de ce code :

<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>

Paramètres

En plus des paramètres ci-dessus, vous pouvez modifier les éléments suivants :

Paramètre	Attribut HTML5	Description	Options
`auto_logout_link`	`data-auto-logout-link`	S’il est activé, le bouton devient un bouton de déconnexion lorsque l’utilisateur est connecté.	`false`, `true`
`onlogin`	`data-onlogin`	Une fonction JavaScript à déclencher une fois le processus de connexion terminé.	`Function`
`scope`	`data-scope`	La liste des autorisations à demander pendant le processus de connexion.	`public_profile` (par défaut) ou une liste d’autorisations séparées par des virgules
`size`	`data-size`	Choix de l’une des tailles disponibles pour le bouton.	`small`, `medium`, `large`
`default_audience`	`data-default-audience`	Paramètre permettant de choisir l’audience sélectionnée par défaut lorsque vous demandez des autorisations d’écriture.	`everyone`, `friends`, `only_me`

Migration

Les anciens boutons seront remplacés par les nouveaux. Le tableau suivant illustre le mappage.

Ancien bouton	Ancienne hauteur	Nouveau bouton	Nouvelle hauteur
Icône	18 px	Obsolescence	Obsolescence
Réduite	18 px	Réduite	20 px
Moyenne	22 px	Réduite	20 px
Grande	25 px	Réduite	20 px
Très grande	39 px	Réduite	20 px

Les nouveaux boutons Continuer en tant que {Name} comportent un paramètre intitulé button_type dont les anciens boutons n’ont pas besoin. De cette manière, vous pouvez choisir entre les boutons Continuer avec Facebook ou Connexion avec Facebook. Si vous ne définissez aucun type de bouton, le nouveau bouton de petite taille s’affiche. La taille est moyenne par rapport aux anciens boutons. La taille x-large sera légèrement réduite. Si vous définissez le paramètre button_type, vos boutons apparaîtront selon la valeur précisée.

Vous pouvez faire en sorte que les boutons se chargent plus rapidement en lançant le SDK JavaScript dès que possible. Toutefois, le système peut charger les boutons uniquement après le chargement de la page web et de JavaScript. Il peut alors créer l’iframe et charger les ressources afin d’afficher le bouton.

 <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>
}

Localisation :

Le chargement d’un bouton dans une autre langue nécessite que le SDK JavaScript correspondant à cette langue soit chargé. Pour en savoir sur la localisation du SDK JavaScript, consultez Localisation avec les Social Plugins et le SDK JavaScript.

Questions/réponses

Comment utiliser cette fonctionnalité pour permettre à des utilisateurs de se connecter ?

Une fois qu’un utilisateur a cliqué sur le bouton Login et a accepté de se connecter à l’aide de la boîte de dialogue Login, terminant ainsi le processus de connexion, votre app peut utiliser le SDK Facebook pour JavaScript afin de passer des appels d’API pour le compte de cet utilisateur.

Aucune configuration supplémentaire n’est requise, mais vous pouvez utiliser le paramètre onlogin dans le bouton pour déclencher votre propre fonction JavaScript qui s’exécutera après la connexion.

Puis-je utiliser le bouton Login avec un code d’inscription côté serveur ?

Oui, mais vous devez tout de même utiliser partiellement le SDK JavaScript. Une fois que l’utilisateur a cliqué sur le bouton et que le processus de connexion est terminé, le SDK a accès à un objet authResponse grâce à FB.getLoginStatus(). Vous pouvez utiliser cette fonction pour transmettre l’objet de réponse à votre code côté serveur afin de terminer toute inscription existante de ce côté.

Le bouton Login ne permet pas d’introduire à nouveau des demandes d’autorisation en cas de refus étant donné que cette demande ne correspond pas au verbiage utilisé sur le bouton. Si vous souhaitez demander à nouveau une autorisation, créez un bouton personnalisé et utilisez FB.login(), comme expliqué dans le document sur Facebook Login pour le web.

Le bouton ne s’affiche pas.

Les balises <div> sont transformées en boutons affichés à l’aide d’une technologie que nous appelons XFBML, qui repose sur JavaScript dans le SDK pour analyser la page et effectuer les remplacements. Si vous modifiez dynamiquement le contenu d’une page pour ajouter ces balises div après l’exécution de la méthode SDK init (par exemple dans une boîte de dialogue construite de façon dynamique), vous devez rappeler FB.XFBML.parse() pour que la transformation soit effectuée.