skip to Main Content

Comment Emettre Des Notifications Avec Votre Blog 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é ]

Avez-vous déjà remarquez sur certains blogs une invitation à vous abonner aux notifications sans donner votre adresse email ? Le Web Push est un mode de communication client-serveur dans lequel le dialogue est lancé par le serveur. C’est de plus en plus en vogue, et vous pouvez l’utiliser en plus des newsletters.

Ce modèle de notifications est disponible sur plusieurs type d’appareils, que ce soit des desktops ou sur des appareils mobiles. Durant ses recherches, Thierry à découvert un service Web Push nommé « OneSignal » et m’a demandé de l’essayé. J’ai trouvé le service très intéressant et je vous propose maintenant de l’installer sur votre blog.

Ah oui ! C’est un service GRATUIT

Premiers pas

C’est gratuit, mais ce n’est pas à la portée de tout le monde, pour vous en sortir, vous devez suivre attentivement ce que je vous dis.

Créez un compte Google Cloud

Il est indispensable de créer un projet Google Cloud, j’espère que (même si vous n’aimez pas Google), que vous avez au moins un compte Google. Si ce n’est pas le cas, vous devez en créer un. Une fois que c’est fait, accédez à ce lien.

Créer un nouveau projet

Sur la page de projets Google Cloud, cliquez sur « Créer un projet ».

Création-dun-projet-Google-Cloud

Une fenêtre s’ouvrira où vous pourrez créer votre projet. Donnez un nom simple, ne le compliquez surtout pas.

Nouveau projet notification web google wordpress tutoriel

Une fois que c’est fait, cliquez sur « Créer ».

Identifiant du projet Google Cloud

Créer des API pour le projet

Sur la nouvelle page, dépliez la section « Projet : [le nom de votre projet] ». La valeur [le nom de votre projet] prendra le nom que vous avez définit pour votre projet. Dans cet exemple j’ai créé un projet « Projet Notification Web ». Dans cette section, copiez le « Numéro du projet » et gardez-le quelque part dans vos notes.

Maintenant cliquez sur le bouton « Activez et gérer les API » dans la section « Utiliser les API Google ».

Utiliser les clés API Google Cloud

Dans le formulaire de recherche qui s’affiche, tapez « Google Cloud Messaging Android »

Google Messaging Android API

Cliquez sur le résultat unique qui s’affiche et ensuite cliquez sur activer.

Google Cloud Messaging Activation de l'API

Veuillez patientez que le processus s’achève et ensuite cliquez sur « Accéder à ‘identifiants’ ».

Google cloud messaging accès aux identifiants

A la question qui vous est demandée à savoir : « Quelle plateforme utilisez-vous pour appeler l’API », sélectionnez l’option « Serveur Web », puis cliquez sur « De quels identifiants j’ai besoin ».

Sélection d'identifiants Google Cloud Projet

Google vous proposera ensuite des identifiants API pour votre projet.

Vous pouvez modifier le champ « nom » sur l’étape « Créer une clé d’API ». Une fois que c’est fait, cliquez sur « Créer la clé d’API ».

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 ]

Créer une clé d'API Google Cloud

Google vous proposera maintenant la clé API pour votre projet. Copiez cette clé et conservez-la quelque part dans vos notes.
Google Clé d'API Tutoriel WordPress

Création d’application sur OneSignal

Maintenant tout dépend de votre blog. Si ce dernier utilise le protocole HTTPS, la procédure sera différente (voire un peu plus simple), dans le cas contraire il y a certains choses que vous devez faire. Pour commencer, créez un compte OneSignal.

OneSignal création de compte

Vous pouvez utiliser votre compte Facebook ou Github, si vous n’en avez pas, vous devez créer un nouveau compte.

Connection OneSignal

Une fois connecté, fermez la fenêtre « Welcome to OneSignal » qui s’affiche. Vous pouvez également réduire la zone de chat qui s’affiche sur la droite.

Bienvenue OneSignal Section

Maintenant cliquez sur « Add New APP » situé sur la gauche.

New APP OneSignal

Une nouvelle fenêtre s’affichera. Il vous faudra fourni un nom à votre nouveau projet. Une fois de plus, restez simple !

Fourni nom de l'application OneSignal

Cliquez sur « Create ». Vous serez ensuite invité à choisir votre plateforme.

Projet OneSIgnal Plateforme

Choisissez l’option « Web site push ». Ensuite choisissez l’option « Google Chrome & Firefox » (Notre tutoriel se limitera à afficher des notifications sur les deux navigateurs).

Type de navigateur Web Push OneSignal

Maintenant, vous serez invité à fournir l’URL de votre site dans le champ « Site URL ». Si vous travaillez sur un serveur local, vous pouvez utiliser « * » à la place de « localhost ».

Ensuite, spécifiez la clé API de votre projet Google (rappelez-vous que je vous ai demandé de conserver cette information dans vos notes).

Si vous souhaitez afficher un icône dans la section des notifications, fournissez un lien vers cette dernière dans le champ qui suit. Si votre site web n’utilise pas un protocole HTTPS, cliquez sur « My site is  not fully HTTPS ». Vous serez invité à créer un sous domaine « Onesignal ».

Sous Domaine OneSignal

Fournissez également dans le champ qui suit le numéro de votre projet (Regardez vos notes ou plus haut dans la création de projet Google Cloud).

Une fois que c’est fait, cliquez sur « Next » et choisissez « WordPress » dans la fenêtre de sélection de cible pour le SDK, et cliquez sur « Next ».

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]

Selection de WordPress SDK OneSignal

OneSignal vous proposera l’« API Rest » de votre application et « APP ID ».  Surtout ne fermez pas cette fenêtre.

API Key et APP ID OneSignal

Copiez cela quelque part dans vos notes, ensuite installez le plugin nécessaire pour l’utilisation avec WordPress.

OneSignal Optin plugin WordPress

Installez et activez ce plugin sur votre blog (ouvrez un autre onglet). Vous remarquerez un nouveau menu « OneSignal Push ». Cliquez dessus et vous accéderez à l’onglet « Configuration ».

Configuration plugin OneSignal

Depuis cet onglet, vous devez :

  • Désactiver « My site uses an HTTPS connection (SSL)
  • Fournir l’identifiant de votre projet Google
  • Fournir l’identifiant de votre projet OneSignal (APP ID), que OneSignal vous propose (voir plus haut)
  • Fournir l’API Rest que « OneSignal » vous propose (API Rest)

Vous avez plusieurs options disponibles, mais celles qui précèdent sont indispensables. Maintenant sauvegardez vos réglages en cliquant sur « Save » tout en bas.

Maintenant accédez à votre blog, vous verrez une invitation d’abonnement similaire à ceci. Cliquez dessus.

invitation d'abonnement OneSignal

Une nouvelle fenêtre s’affichera, et vous serez invitez à vous abonner. Cliquez sur « Continue ».

Abonnement notification OneSignal

Une invitation à accepter les notifications de Google Chrome s’affichera, vous devez l’accepter bien évidemment.

Notification Google Chrome

Vous devez patientez pour recevoir une notification confirmant que vous vous êtes effectivement abonné aux notifications.

Maintenant revenez sur l’onglet que je vous ai demandé de ne pas fermez et cliquez sur « Check Subscribed Users ».

Check Subscribed user tutoriel WordPerss OneSignal

Vous remarquerez une notification en dessous de ce bouton, commençant par « Congratulation – Your first… », si c’est le cas, cliquez sur « next ».

Message de confirmation bouton Next

Sur la prochaine fenêtre, cliquez sur « Send Test notification ».

Send Test notification WordPress OneSignal

Vous devrez normalement recevoir une notification sur votre ordinateur.

Si la notification s’affiche chez vous cliquez dessus. Vous accéderez à une page qui confirme le test de la notification.

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

Confirmation OneSignal

Revenez sur OneSignal et cliquez sur « Check notification Status ».

check notification status OneSIgnal

Une notification s’affichera vous confirmant l’opération « Congratulation – You’ve successfully create … ». Si c’est le cas chez vous cliquez sur « Done ».

Notification OneSignal Projet crée

Revenez sur votre blog et créez un nouvel article. Assurez-vous que l’option « OneSignal Push Notifications » est activée, et lorsque vous publiez l’article, vous recevrez en principe une notification du nouvel article.

C’est tout, j’espère que cela n’est pas trop compliqué pour vous. Si vous avez des questions, je suis disponible pour répondre à toutes vos questions.

Cet article comporte 2 commentaires
  1. Hello,
    j’adore l’article mais je pense que celui-ci n’est plus d’actualité au vue des images dans la plateforme Google on n’y retrouve plus certaines choses.

    Ceci serait bien si on pouvait réactualisé les images.

    Amicalement

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
2 Partages
Partagez2
Tweetez
Enregistrer