Comment ajouter la connexion sociale à WordPress (La méthode facile)

L'ajout de connexions sociales à votre site WordPress facilite le processus d'inscription pour vos visiteurs. Il permet aux utilisateurs de créer un compte en utilisant leurs profils de médias sociaux existants.

Ainsi, au lieu de créer un nouveau nom d'utilisateur et mot de passe, ils peuvent se connecter avec des plateformes comme Facebook ou Google.

Cela fait gagner du temps et réduit les tracas pour vos visiteurs. De plus, avec leur permission, vous pouvez accéder à leur nom et à leur adresse e-mail.

Cela peut être un excellent moyen de constituer une liste d'e-mails afin de pouvoir continuer à contacter vos visiteurs et les ramener sur votre site.

Nous avons passé du temps à étudier la meilleure façon de configurer cela. Et dans ce guide, nous vous montrerons comment ajouter des connexions sociales à WordPress.

Pourquoi ajouter une connexion sociale à WordPress ?

Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir autoriser l'inscription des utilisateurs sur votre site WordPress.

Si vous gérez une boutique en ligne, l'inscription des utilisateurs permet aux clients de sauvegarder leurs informations de paiement et de livraison. Cela leur permet d'acheter plus facilement à l'avenir.

L'inscription des utilisateurs est également une partie importante de la création d'un site d'adhésion WordPress. Elle vous permet de construire une communauté d'utilisateurs engagés qui ont accès à du contenu exclusif.

Cependant, la plupart des gens n'aiment pas remplir de longs formulaires d'inscription et se souvenir d'une combinaison nom d'utilisateur-mot de passe supplémentaire.

Les connexions sociales permettent aux visiteurs de créer un compte sur votre site Web en un seul clic. Ils peuvent utiliser le nom d'utilisateur et le mot de passe de leurs comptes de médias sociaux existants, tels que leurs identifiants de connexion Facebook.

Comme c'est très pratique, la connexion sociale peut encourager plus de personnes à s'inscrire sur votre site Web. Dans cette optique, voyons comment ajouter une connexion sociale à WordPress.

• How to Add Social Login to WordPress
  • Étape 1 : Installer et activer Nextend Social Login
  • Étape 2 : Créer votre application développeur Facebook
  • Étape 3 : Connecter votre site Web à l'application Facebook
  • Étape 4 : Configurer les politiques et les détails de l'application
  • Étape 5 : Mettre en ligne et vérifier les autorisations de l'application
  • Étape 6 : Ajouter l'ID et le secret de l'application à WordPress
  • Étape 7 : Personnaliser vos boutons de connexion sociale
  • Étape 8 : Afficher le bouton de connexion sociale sur votre site
• Tutoriel vidéo
• Questions fréquemment posées sur la connexion sociale

Comment ajouter une connexion sociale à WordPress

Le moyen le plus simple d'ajouter une connexion front-end à votre site Web WordPress est d'utiliser le plugin Nextend Social Login and Register.

Ce plugin gratuit permet aux visiteurs de se connecter en utilisant Facebook, Twitter ou Google.

Étape 1 : Installer et activer Nextend Social Login

Tout d'abord, vous devrez installer et activer le plugin Nextend. Pour plus de détails, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Une fois activé, vous devrez accéder à Paramètres » Nextend Social Login depuis l'espace d'administration de WordPress. Sur cet écran, vous verrez toutes les différentes options de connexion sociale que vous pouvez ajouter à votre site WordPress.

Le processus d'ajout d'une connexion sociale à votre site variera selon que vous ajoutez la connexion Facebook, Twitter ou Google.

Prenons Facebook comme exemple.

Pour ajouter une connexion Facebook à votre site Web WordPress, cliquons sur le bouton « Démarrer » sous le logo Facebook.

À ce stade, vous pourriez recevoir un avertissement de Facebook. C'est parce que Facebook exige une connexion sécurisée pour fonctionner, ce qui est une exigence de sécurité standard.

Cela signifie que votre site doit utiliser HTTPS avant de pouvoir ajouter une connexion Facebook à WordPress. Pour le configurer, consultez notre guide sur la transition de HTTP vers HTTPS dans WordPress.

Étape 2 : Créer votre application développeur Facebook

Une fois que vous utilisez HTTPS, votre prochaine tâche consiste à créer une application Facebook. Cela vous permettra d'obtenir une clé d'application et un secret d'application, que vous ajouterez au plugin Nextend.

Créer une « application Facebook » peut sembler technique, mais ne vous inquiétez pas. Cela ne signifie pas que vous construisez une application mobile. C'est juste un processus pour enregistrer votre site Web auprès de Facebook, ce qui vous permet de connecter en toute sécurité leur système de connexion à votre site.

Vous n'avez pas besoin de connaître de code, et nous vous guiderons à travers toutes les étapes.

Pour créer cette application, vous devez passer de votre tableau de bord WordPress au site Web Meta for Developers. Dans cet esprit, il est conseillé de laisser votre tableau de bord WordPress ouvert dans l'onglet actuel et de visiter Meta for Developers dans un nouvel onglet.

Dans votre onglet Meta for Developers, cliquez simplement sur le bouton « Créer une application ».

Vous entrerez alors dans le processus de configuration.

La première chose que vous devrez faire est de choisir un portefeuille d'entreprise que vous souhaitez connecter à la nouvelle application. Le réglage par défaut est activé pour « Je ne souhaite pas connecter de portefeuille d'entreprise pour le moment ». Vous pouvez laisser cela tel quel et cliquer sur « Suivant ».

À l’étape « Cas d’utilisation », vous choisirez ce que votre application doit faire.

Comme nous voulons ajouter la connexion sociale à WordPress, sélectionnez l’option « Authentifier et demander des données aux utilisateurs avec Facebook Login ».

Après cela, vous devrez cliquer sur le bouton « Suivant ».

Ensuite, dans le champ « Nom d’affichage », saisissons le nom que vous souhaitez utiliser pour l’application Facebook. Ce nom sera montré aux visiteurs, vous voudrez donc utiliser quelque chose qu’ils reconnaîtront, comme le titre de votre site Web WordPress.

Après avoir nommé votre application, vous pouvez saisir votre adresse e-mail dans le champ « E-mail de contact de l’application ». C’est l’adresse que Facebook utilisera pour vous avertir des violations potentielles de politique et des restrictions de l’application, ou pour partager des informations sur la façon dont vous pouvez récupérer un compte supprimé.

Dans cet esprit, vous voudrez saisir une adresse e-mail que vous consultez régulièrement. Cliquez sur « Suivant » pour continuer.

Vous verrez alors une page de révision. Sur cette page, Meta for Developers vous montrera tous les paramètres que vous avez configurés pour la nouvelle application.

Si tout semble correct, cliquez simplement sur le bouton « Créer une application ».

Vous devriez maintenant voir une notification contextuelle avec un bouton « Accéder au tableau de bord ».

Cliquons dessus.

Étape 3 : Connecter votre site Web à l'application Facebook

Vous êtes maintenant prêt à ajouter des produits à l’application Facebook.

À partir d’ici, vous pouvez cliquer sur « Personnaliser l’ajout d’un bouton Facebook Login ».

Ensuite, vous devrez vous rendre dans « Quickstart » depuis le menu « Facebook Login ».

À partir d’ici, vous pouvez choisir l’option « Web ».

Cela ouvrira la section de personnalisation.

Dans le champ « URL du site », tapez simplement l’URL de votre site Web.

Assurez-vous d’obtenir la bonne URL. Même une petite faute de frappe entraînera l’échec de la connexion, et vous verrez probablement un message d’erreur tel que « URL de redirection invalide ».

Pour ce faire, revenez simplement à l'onglet qui affiche votre tableau de bord WordPress. Cet écran fournit des instructions détaillées sur la façon de lier Nextend à Facebook, y compris l'URL exacte que vous devriez utiliser.

Après avoir saisi l'URL de votre site dans le champ « URL du site », assurons-nous que vous cliquez sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Ensuite, passons à la section « Paramètres ».

Sur cet écran, vous devrez coller un URI de redirection oAuth valide. Pour obtenir cette valeur, revenez simplement à votre onglet WordPress.

Ces instructions incluent une URL intitulée « URIs de redirection OAuth valides ». Vous pouvez copier cette URL.

Ensuite, revenons au site Web Meta for Developers et collons l'URL dans le champ « URI de redirection à vérifier ».

Après cela, vous êtes prêt à cliquer sur le bouton « Enregistrer les modifications » en bas.

Étape 4 : Configurer les politiques et les détails de l'application

Une fois terminé, allons dans Paramètres » Général dans le menu de gauche.

Dans « Domaine de l'application », tapez simplement le nom de domaine de votre site.

Dans le champ « URL de la politique de confidentialité », vous devrez saisir l'adresse de la politique de confidentialité de votre site Web.

Cette politique de confidentialité doit divulguer les informations que vous collectez auprès des visiteurs et comment vous prévoyez d'utiliser ces données, y compris toute information que vous obtenez à partir des connexions sociales.

Si vous avez besoin d'aide pour créer cette page importante, consultez notre guide sur comment ajouter une politique de confidentialité dans WordPress.

Pour être conforme au RGPD, vous devez permettre aux utilisateurs de supprimer leurs comptes sur votre site Web.

Il existe de nombreuses façons de permettre aux utilisateurs de supprimer leurs comptes WordPress, mais vous devriez toujours partager ces instructions avec vos visiteurs.

Pour aider les utilisateurs à trouver ces informations, cliquez sur la section « Suppression des données utilisateur », puis choisissez « URL des instructions de suppression des données » dans le menu déroulant.

Vous pouvez ensuite taper ou copier/coller l'URL où les visiteurs peuvent trouver des informations sur la façon de supprimer leur compte. Par exemple, vous pouvez ajouter les instructions à votre politique de confidentialité ou à votre page FAQ.

Une fois que vous avez fait cela, vous voudrez ouvrir le menu déroulant « Catégorie » et choisir la catégorie qui représente le mieux la façon dont vous prévoyez d'utiliser la connexion sociale sur votre site Web WordPress.

Par exemple, si vous ajoutez une connexion Facebook à votre boutique WooCommerce, vous cliquerez généralement sur la catégorie « Shopping ».

Une fois que vous avez fait cela, la prochaine étape consiste à choisir une icône d'application. Cette icône représentera votre application dans le « Centre d'applications », qui est une zone de Facebook où les utilisateurs peuvent trouver de nouvelles applications.

Ce n'est pas particulièrement important pour notre application, mais c'est une exigence, vous devrez donc toujours créer une icône d'application.

Votre icône d'application doit avoir un arrière-plan transparent et mesurer entre 512 x 512 et 1024 x 1024 pixels. Lors de la création de cette icône, vous ne pouvez pas utiliser de variations des logos, marques ou icônes de Facebook, y compris ses marques WhatsApp, Oculus et Instagram.

Vous ne pouvez pas non plus inclure de texte « Facebook » ou « FB ».

Si vous n'en avez pas déjà un, vous pouvez facilement créer une icône d'application Facebook d'aspect professionnel à l'aide d'un créateur de logos.

Une fois que vous avez créé une icône d'application, cliquez sur la section « Icône de l'application » et sélectionnez le fichier image que vous souhaitez utiliser.

Après tout cela, vous pouvez cliquer sur le bouton « Enregistrer les modifications ».

Étape 5 : Mettre en ligne et vérifier les autorisations de l'application

Votre application Facebook est définie sur privée par défaut, ce qui signifie que vous êtes la seule personne qui peut se connecter à l'aide de Facebook.

Avant que vos visiteurs ne puissent créer un compte en utilisant Facebook, vous devrez rendre votre application publique. Pour ce faire, trouvez le curseur « Mode de l'application : Développement » et cliquez dessus pour le rendre public.

Les applications Facebook peuvent avoir un accès « Standard » ou « Avancé » aux informations de l'utilisateur. Si votre application a un accès standard, les visiteurs ne pourront pas se connecter en utilisant la connexion sociale de Facebook.

Par le passé, Facebook a modifié ses paramètres d'autorisation par défaut, il est donc toujours utile de vérifier que votre application dispose des bonnes autorisations pour prendre en charge la connexion sociale.

Dans le menu de gauche, naviguons vers la section « Autorisation ».

Maintenant, vous voudrez examiner les autorisations « email » et « public_profile ».

Pour prendre en charge la connexion sociale, ces deux autorisations doivent être marquées comme « Accès avancé » et « Prêt à l'emploi », comme vous pouvez le voir dans l'image suivante.

Voyez-vous plutôt les boutons « Obtenir l'accès avancé » ? Cela signifie que votre application n'a actuellement pas les bonnes autorisations pour se connecter aux réseaux sociaux.

Dans ce cas, vous devrez cliquer sur le bouton « Obtenir l'accès avancé », puis suivre les instructions à l'écran.

Une fois que vous avez les autorisations « Accès avancé », accédez à Paramètres de l'application » Basique dans le menu de gauche.

En haut de la page, vous verrez un « ID d'application » et un « Secret d'application ».

Pour révéler le « Secret d'application », cliquez simplement sur le bouton « Afficher ». Ensuite, vous pouvez saisir le mot de passe de votre compte Facebook. Le site Web Meta for Developers sera maintenant mis à jour pour afficher votre « Secret d'application ».

Étape 6 : Ajouter l'ID et le secret de l'application à WordPress

La prochaine étape consiste à ajouter le « Secret d'application » et l'« ID d'application » à votre plugin Nextend. Pour ce faire, revenons au tableau de bord WordPress.

À partir de là, vous devrez accéder à l'onglet « Paramètres » et coller l'ID et le secret dans les champs « ID d'application » et « Secret d'application » de votre tableau de bord WordPress.

Une fois que vous avez fait cela, cliquez sur le bouton « Enregistrer les modifications ».

Avant d'aller plus loin, il est conseillé de tester que votre connexion sociale est correctement configurée. Pour ce faire, cliquez simplement sur le bouton « Vérifier les paramètres ».

Cela ouvrira une fenêtre contextuelle où vous pourrez saisir votre nom d'utilisateur et votre mot de passe Facebook. Si vous avez correctement configuré la connexion sociale, vous devriez maintenant être connecté à votre blog WordPress.

Même si votre connexion sociale fonctionne, Nextend peut toujours vous avertir que le fournisseur est actuellement désactivé. Si vous voyez cet avertissement, cliquez simplement sur le bouton « Activer ».

Félicitations, vous avez fait la partie difficile et ajouté avec succès une connexion sociale à votre site Web WordPress !

Étape 7 : Personnaliser vos boutons de connexion sociale

Passons maintenant à la partie amusante : personnalisons l'apparence et le comportement du bouton de connexion sur votre site.

Pour styliser le bouton de connexion sociale, cliquez simplement sur l'onglet « Boutons ». Vous verrez alors tous les styles différents que vous pouvez utiliser.

Pour utiliser un style différent, vous pouvez cliquer pour sélectionner son bouton radio.

Une fois que vous avez fait cela, vous pouvez modifier le texte du « Libellé de connexion » de ce bouton pour changer le texte que Nextend affiche.

Vous pouvez également appliquer un formatage de base au libellé de connexion. Par exemple, dans l'image suivante, nous appliquons un effet gras en utilisant les balises HTML <b> et </b>.

Vous avez également la possibilité de modifier le texte que ce bouton utilise pour son « Libellé de lien ». C'est le texte que Nextend affiche lorsqu'un visiteur a créé un compte sur votre site Web mais n'a pas lié ce compte à Facebook.

Vous pouvez utiliser le libellé de lien pour encourager les utilisateurs connectés à lier leurs comptes à divers profils de médias sociaux.

Pour modifier ce texte, tapez simplement dans le champ « Libellé de lien ». Encore une fois, vous pouvez utiliser du HTML pour appliquer un formatage de base au texte du libellé.

Vous devriez également permettre aux visiteurs de déconnecter facilement leurs profils de médias sociaux de votre site Web WordPress.

C'est là qu'intervient le champ « Libellé de déconnexion ».

Dans ce champ, vous pouvez taper le texte que votre site affichera aux utilisateurs connectés qui ont déjà lié leurs comptes sociaux à votre site Web.

En cliquant sur ce lien, les utilisateurs peuvent déconnecter la connexion entre votre site Web WordPress et leurs comptes de médias sociaux.

Ces paramètres devraient suffire pour la plupart des sites Web.

Cependant, si vous préférez créer un bouton entièrement personnalisé, vous pouvez toujours cocher la case « Utiliser un bouton personnalisé ». Cela ajoute une nouvelle section où vous pouvez créer votre propre bouton de connexion sociale à l'aide de code.

Lorsque vous êtes satisfait de la façon dont vous avez stylisé votre bouton, vous pouvez cliquer sur le bouton « Enregistrer les modifications ».

Étape 8 : Afficher le bouton de connexion sociale sur votre site

Ensuite, vous voudrez passer à l'onglet « Utilisation ».

Nextend affichera désormais tous les shortcodes que vous pouvez utiliser pour ajouter le bouton de connexion sociale à votre site Web WordPress.

Ces shortcodes peuvent créer une gamme de boutons de connexion. Pour créer un bouton de connexion de base pour Facebook, vous utiliseriez le shortcode suivant :

[nextend_social_login provider="facebook"]

L'image suivante montre un exemple de l'apparence de ce bouton de connexion sociale sur votre site.

Comme vous pouvez le voir dans l'onglet « Utilisation », il existe quelques paramètres supplémentaires que vous pouvez ajouter à votre shortcode. Cela modifiera l'apparence ou le comportement du bouton.

Si vous souhaitez créer un bouton de connexion sociale sans étiquette de texte, vous pouvez ajouter le paramètre « icon », par exemple [nextend_social_login provider="facebook" style="icon"]

Voici un exemple de l'apparence de ce bouton sur votre site WordPress.

Lorsqu'un visiteur se connecte à votre site à l'aide d'un compte social, vous pouvez le rediriger automatiquement vers une page. Cet écran contient un exemple de shortcode qui redirigera les utilisateurs vers le site Nextend.

Vous pouvez facilement personnaliser ce shortcode pour rediriger les visiteurs vers une page de votre site WordPress.

Vous pouvez ajouter quelques autres paramètres à votre shortcode. Pour voir la liste complète des paramètres, vous pouvez cliquer sur le lien vers la documentation du plugin.

Après avoir décidé quel shortcode utiliser, vous pouvez ajouter le code à n'importe quelle page, publication ou zone prête pour les widgets. Pour des instructions étape par étape, consultez notre guide pour débutants sur l'ajout d'un shortcode dans WordPress.

Tutoriel vidéo

Si vous n'êtes pas fan des instructions écrites, regardez simplement notre tutoriel vidéo sur la façon d'ajouter la connexion sociale à WordPress :

S'abonner à WPBeginner

Questions fréquemment posées sur la connexion sociale

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout de la connexion sociale à votre site WordPress :

Puis-je choisir les réseaux sociaux avec lesquels les utilisateurs peuvent se connecter ?

Oui, la plupart des plugins de connexion sociale, y compris Nextend Social Login & Register, vous permettent de choisir les réseaux à proposer.

Vous pouvez activer uniquement ceux que votre public préfère, comme Google et Facebook, et masquer les autres. Par exemple, si vous ciblez un public professionnel, vous pourriez activer LinkedIn, tandis que Google et Facebook sont plus populaires pour les utilisateurs généraux.

Ai-je besoin d'un développeur pour configurer la connexion sociale ?

Non, vous pouvez le faire vous-même sans écrire de code. La plupart des plugins de connexion sociale pour WordPress sont conviviaux et offrent une documentation détaillée.

Certains plugins sont même dotés d'assistants d'installation intégrés pour vous guider dans la création de clés d'application à partir de plateformes comme Google ou Facebook. Cela demande quelques étapes supplémentaires, mais tout est généralement du copier-coller.

L'ajout de la connexion sociale ralentira-t-il mon site web ?

L'ajout de la connexion sociale ne ralentira pas votre site web si vous utilisez un plugin bien codé.

Des outils populaires comme Nextend Social Login & Register sont optimisés pour les performances et ne chargent les scripts que lorsque cela est nécessaire.

Néanmoins, il est conseillé de surveiller la vitesse de votre site après l'installation. Si vous remarquez un quelconque ralentissement, envisagez d'utiliser des plugins de performance ou une solution de mise en cache pour maintenir la rapidité de votre site.

La connexion sociale est-elle sûre pour mon site WordPress ?

Oui, la connexion sociale est sécurisée si vous utilisez des plugins fiables et que vous les maintenez à jour.

Comme la connexion est gérée par de grandes plateformes comme Google ou Facebook, votre site n'a pas besoin de stocker ou de gérer les mots de passe des utilisateurs.

Cependant, nous vous recommandons toujours d'utiliser HTTPS et de suivre les meilleures pratiques en matière de sécurité WordPress pour tout maintenir en sécurité.

Puis-je autoriser la connexion sociale sur WooCommerce ou les sites d'adhésion ?

Absolument ! La connexion sociale fonctionne très bien avec WooCommerce, BuddyPress, MemberPress, et plus encore.

Cela aide les clients et les membres à se connecter rapidement et réduit l'abandon de panier ou les frictions lors de l'inscription. De nombreux plugins de connexion sociale offrent même une intégration intégrée avec des plugins populaires, vous n'avez donc pas besoin de configuration supplémentaire.

Que se passe-t-il si un utilisateur se connecte avec une connexion sociale, puis utilise plus tard la connexion par e-mail ?

Dans la plupart des cas, le plugin liera automatiquement leurs comptes.

Par exemple, si un utilisateur s'inscrit avec un compte Google en utilisant l'e-mail « jane.doe@example.com » et qu'il possède déjà un compte utilisateur WordPress avec le même e-mail, le plugin reconnaîtra la correspondance et liera les deux.

Cela évite les doublons de comptes. Cependant, il est toujours bon de tester cette fonctionnalité pour voir exactement comment votre plugin la gère avant de la mettre en ligne.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une connexion sociale à votre site WordPress. Vous pouvez également consulter notre guide sur les meilleurs plugins de médias sociaux pour WordPress ou notre tutoriel sur comment ajouter CAPTCHA dans le formulaire de connexion et d'inscription WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.