Bouton Login

Le bouton Login est un moyen simple de lancer facilement le processus Facebook Login sur votre site ou application web.

Si une personne ne s’est pas encore connectée à votre application, elle verra ce bouton sur lequel elle pourra cliquer pour ouvrir une boîte de dialogue Login et commencer le processus de connexion. Les personnes qui se sont déjà connectées ne verront aucun bouton, mais vous pouvez choisir de leur afficher un bouton de déconnexion.

Si vous affichez un bouton de déconnexion, lorsque les utilisateur·trices l’utiliseront pour se déconnecter, ils et elles se déconnecteront à la fois de votre application et de Facebook.

Le Bouton Login est conçu uniquement pour fonctionner avec le SDK JavaScript. Si vous créez une app mobile ou ne pouvez pas utiliser notre SDK JavaScript, vous devez suivre le guide du processus de connexion pour ce type d’application à la place.

Le bouton Continuer avec Facebook remplace les versions précédentes du bouton Login. Pour plus d’informations, consultez Migration.

Configurateur de plugins

Bouton Continuer en tant que {Name}

Le bouton Continuer en tant que {Name} affiche le texte « Continuer en tant que {nom de la personne} » et peut inclure la photo de profil Facebook de la personne si elle est connectée à Facebook sur 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 du SDK JavaScript. Activez le bouton Continuer en tant que {Name} en ajoutant data-use-continue-as="true" aux paramètres du bouton.

La hauteur du bouton Continuer en tant que {Name} ne peut pas être personnalisée.

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

Recommandations pour le bouton Continuer en tant que {Name}

Le bouton Continuer en tant que {Name} peut être un excellent moyen d’accroître le nombre de clics et d’interactions. Il permet à l’utilisateur·trice de voir sa photo de profil et son nom sur le bouton Login et de personnaliser davantage l’application.

Par conséquent, il peut aussi être source de confusion si l’utilisateur·trice ne s’attend pas à voir son nom et sa photo de profil dans ce contexte. Veuillez tenir compte de ce qui suit pour savoir si le bouton Continuer en tant que est approprié pour votre application.

Même si le bouton Continuer en tant {Name} n’est pas approprié pour votre application, vous pouvez toujours essayer les nouveaux boutons du SDK JavaScript qui affichent « Continuer avec Facebook ».

Suggestions de cas d’utilisation

Notre base d’utilisateur·trices est mondiale et les différentes régions ont différentes attentes. Tenez compte de ces attentes lorsque vous utilisez ce bouton.

Adapté lorsque

• Votre application est sociale :
  lorsque les utilisateur·trices utilisent des applications sociales, ils et elles souhaitent communiquer avec les autres. Le bouton Continuer en tant que {Name} est adapté dans ces cas.

• Les utilisateur·trices du marché cible partagent des téléphones :
  Lorsque plusieurs personnes utilisent le même téléphone, le bouton Continuer en tant que {Name} leur garantit qu’elles utilisent le bon compte.

À éviter lorsque

• Votre application est nouvelle :
  si votre application est nouvelle sur le marché, vos utilisateur·trices risquent d’être surpris·es de voir leur nom et photo de profil s’afficher automatiquement contrairement à une application établie ou familière qu’ils et elles prévoient d’utiliser régulièrement.

• Les personnes du marché cible sont sensibles à la confidentialité :
  dans de nombreux pays, les images de profil sont considérées comme très privées. Veuillez éviter également d’utiliser le bouton Continuer en tant que {Name} dans ce cas-là car la photo de profil de la personne connectée sera affichée.

Recommandations sur le bouton Login

Suivez les recommandations générales sur l’utilisation de Facebook Login. Il est particulièrement important de respecter les deux recommandations suivantes lors de l’utilisation du bouton Continuer en tant que {Name} :

• Prévoir un moyen de se déconnecter (imposé par la politique)
• Tester et mesurer - Identifiez l’impact sur les perceptions et la conversion des utilisateur·trices

Autres recommandations possibles :

• Être clair·e quant à la fonctionnalité de la connexion
• Utiliser un espace réservé/une icône lors du chargement du bouton Login et le ou la supprimer une fois le bouton chargé Exemple de 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 :

Migration

Les anciens boutons seront remplacés par les nouveaux. Le tableau suivant affiche les correspondances.

Les nouveaux boutons Continuer en tant que {Name} incluent un paramètre appelé button_type, non requis par les anciens boutons. Voici comment spécifier soit le bouton Continuer avec Facebook soit le bouton Se connecter avec Facebook. Si vous ne spécifiez aucun type de bouton, celui qui s’affiche est le nouveau bouton de petite taille. Cette taille correspond à la taille moyenne des anciens boutons. Pour le cas x-large, elle sera légèrement plus petite. Si vous ne spécifiez pas le paramètre button_type, vos boutons s’afficheront tel que spécifié.

Vous pouvez accélérer le chargement des boutons en lançant le SDK JavaScript dès que possible. Cependant, le système ne peut pas charger les boutons tant que la page web et JavaScript ne sont pas chargés. C’est alors qu’il peut créer l’iframe et charger les ressources pour 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 :

Charger le bouton dans une autre langue nécessite de charger le SDK JavaScript pour cette langue. Pour en savoir plus sur la localisation du SDK JavaScript, consultez Localisation avec les Plugins sociaux et le SDK JavaScript.

Questions/réponses

Comment l’utiliser pour connecter les utilisateur·trices ?

Lorsqu’une personne clique sur le bouton Login et accepte la boîte de dialogue Login, lançant ainsi le processus de connexion, votre application peut désormais utiliser le SDK Facebook pour JavaScript pour effectuer des appels d’API pour le compte de cette personne.

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

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

Oui. Cependant, vous aurez toujours besoin d’utiliser le SDK JavaScript de manière partielle. Une fois le processus de connexion déclenché via le bouton, le SDK aura accès à un objet authResponse utilisant FB.getLoginStatus(). Vous pouvez utiliser cette fonction pour transmettre l’objet de réponse à votre code côté serveur et effectuer toute inscription existante ici.

Puis-je utiliser le bouton Login pour redemander une autorisation refusée par une personne ?

Le bouton Login ne prend pas en charge les nouvelles demandes car le fait de demander des autorisations refusées ne correspond pas au type du bouton. Pour redemander une autorisation, configurez un bouton personnalisé et utilisez FB.login() comme décrit dans la documentation Facebook Login pour le web.

Le bouton ne s’affiche pas.

Les tags <div> sont convertis en boutons affichés à l’aide d’une technologie appelée XFBML, qui s’appuie sur JavaScript dans le SDK pour analyser la page et effectuer les remplacements. Si vous modifiez le contenu de la page de manière dynamique pour ajouter ces div après l’exécution de la méthode init du SDK (par ex. dans une boîte de dialogue créée de manière dynamique), vous devez appeler FB.XFBML.parse() une nouvelle fois pour appliquer la transformation.