skip to Main Content

Comment ajouter un popup de partage social sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Les popups ont depuis la nuit des temps eu pour principal objectif de pousser des visiteurs à l’action. Sur WordPress, ils sont très populaires (c’est le cas d’OptinMonster) et ont presque tous le même objectif : Convertir des visiteurs en abonnés, voire clients.

Sur WordPress, il existe une très grande variété de plugins adaptés à la création de popup mais tous n’ont pas toujours les mêmes fonctionnalités… et le choix devrait se faire en fonction des besoins. Pour vous, j’en ai sélectionné un, qui s’intitule tout simplement « Popups », et qui est disponible sur WordPress.

Dans ce tutoriel, je vous monterai comment proposer un popup sur votre blog WordPress afin d’augmenter le nombre de personnes qui vous suivent sur les réseaux sociaux.

Comment installer et configurer Popups

Je vous invite à installer le plugin directement depuis votre tableau de bord. Vous pouvez le télécharger directement sur WordPress.org.

Après l’activation du plugin, vous remarquerez sur le menu latéral gauche de votre tableau bord un nouveau menu intitulé « Popups ». Cliquez sur « Add New », pour créer une nouvelle popup.

Comment créer  popup

Sur cette nouvelle page, identique à l’éditeur d’article, vous pouvez fournir un titre, un contenu et effectuer certaines configurations sur les différentes sections disponibles plus bas.

Une version premium existe, et celle-ci ajoutera de nouvelles fonctionnalités (j’y reviendrai plus tard), qui seront disponibles dans la boite « Popups Premium ».

Plus bas, dans la section « Popup Shortcode », vous pouvez voir les différents shortcodes qui seront utilisés pour afficher les différents boutons facebook, twitter et google+.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Le shortcode :

  • [spu-facebook] sera utilisé pour ajouter un bouton j’aime pour facebook.
  • [spu-google] sera utilisé pour ajouter un bouton ajouter dans les cercles de google+
  • [spu-twitter] sera utilisé pour ajouter un bouton « follow » de twitter.

Remarque : vous devez à chaque fois intégrer ces shortcodes dans l’éditeur visuel précédent pour afficher ces différents boutons. Chacun de ses shortcodes possède des paramètres que vous pouvez activer. Consultez les détails de ces paramètres en cliquant sur « View Facebook Options » pour les paramètres du shortcode facebook, « View Google+ options » pour les paramètres du shortcode Google+ ainsi de suite.

options-popup-shortcodes

La section « Popup display Rules » présente des options sur les règles d’affichage, grosso modo, avec ces options vous pourrez déterminer les conditions dans quelles le popup peut s’afficher.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Donc l’option « Show this popup if » vous donne la possibilité de choisir un élément (articles, pages, etc.), qui s’affiche lorsque ce dernier est égal (ou pas) à une option disponible dans la dernière liste d’option. Il peut s’agir de la page d’accueil « Home Page », la page d’accueil du blog « Post Page ».

En gros, si vous n’avez pas compris, vous pouvez choisir d’afficher ce popup sur la page d’accueil, le blog, etc.

popup-display-rules-section-popups

La section « Display Options » vous donne la possibilité de configurer certaines options à l’affichage, notamment :

  • La position de la popup « Box Position »
  • De définir le nombre de secondes avant que ce dernier ne s’affiche ou lorsque la page est définie jusqu’à un certain pourcentage « Trigger Action »
  • L’option « Auto-hide », permet de masquer automatiquement une fenêtre lorsque l’utilisateur fait définir la page vers le haut.
  • L’option « Animation », permet de choisir une animation d’ouverture de la popup

Vous ne souhaiterez certainement pas toujours afficher la fenêtre à chaque visite. C’est pourquoi il est nécessaire d’ajouter des cookies qui permettront de définir le nombre de jours après lesquels la fenêtre sera affichée à nouveau sur un même ordinateur.

option-section-display-options

La mini section « Appearance », vous donne la possibilité de personnaliser l’opacité de l’arrière-plan « Background Opacity », de choisir la couleur d’arrière-plan « background color », la couleur du texte « text color », la largeur du popup « box width », la couleur de la bordure « border color » ainsi que son épaisseur « border width ».

option-section-apparence

Voici à quoi ressemblera une fenêtre sur le blog.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

presentation-popups

Remarque : Vous devez faire attention de ne pas publier plusieurs popups avec les mêmes règles d’affichages, car ces dernièrs s’afficheront en même temps, donc forcément certaines ne seront pas visibles.

En ce qui concerne la version premium, elle ajoutera :

  • 8 nouvelles animations
  • La technologie « Exit Intent Technology » afin de détecter lorsque les utilisateurs envisagent de quitter la page
  • De nouveaux déclencheurs
  • Un délai pour fermer automatiquement les popups
  • La possibilité de désactiver le bouton de fermeture
  • La possibilité de désactiver les méthodes de fermetures avancées tel qu’en cliquant sur « Esc » ou hors de la boite.
  • Une assistance premium.

C’est tout pour ce tutoriel sur la création d’une popup sur WordPress. N’hésitez pas à le partager avec vos amis sur les réseaux sociaux.

Cet article comporte 6 commentaires

  1. L’extension est effectivement très intéressante, étant donné qu’elle joue un peu le rôle des appels à l’action des fins d’article, pour inciter les lecteurs à s’engager d’avantage.
    Cependant, il faudrait que ces derniers sélectionnent bien les réseaux sociaux sur lesquels ils se positionneront, afin que leurs efforts soient optimaux.
    Merci pour l’article Hervé!

  2. Salut Thierry,

    J’ai testé cette extension qui est intéressante, sauf qu’elle ne permet pas les partages sociaux.
    En effet, elle permet plutôt d’inciter tes lecteurs à te suivre sur les réseaux sociaux, ce qui est quelque peu différent, tu ne penses pas?

    Amicalement,

    Bruno

    1. Bonjour Bruno,

      Oui tu as parfaitement raison. Et c’est d’ailleurs ainsi que Hervé l’avait nommé avant que je ne modifie le titre pour des besoins stratégiques. 🙂

      Amicalement,
      Thierry

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez4
Tweetez
Enregistrer