Optimiser votre bouton de partage WhatsApp
L’inclusion d’un bouton de partage WhatsApp sur votre site Web est une excellente approche pour augmenter l’engagement des utilisateurs, car elle permet aux utilisateurs de partager facilement vos informations avec leurs réseaux. Utiliser un lien pour activer WhatsApp en douceur sur les appareils mobiles est la méthode standard.
Néanmoins, la version de bureau de WhatsApp est incompatible avec cette stratégie. Cet article vous apprendra le code et les instructions dont vous avez besoin pour créer un bouton de partage qui fonctionne sur les versions en ligne et mobile de WhatsApp.
| Commande | Description |
|---|---|
| encodeURIComponent() | encode un composant URI en substituant une, deux ou trois séquences d'échappement qui correspondent au codage UTF-8 du caractère pour chaque occurrence d'un certain caractère. |
| window.open() | permet le partage de liens sur WhatsApp Web en ouvrant une nouvelle fenêtre ou un nouvel onglet de navigateur avec l'URL fournie. |
| express.static() | sert des fichiers statiques au client, leur permettant d'être accessibles par HTML, CSS et JavaScript, à partir du répertoire fourni. |
| res.redirect() | Redirige le client vers l'URL fournie en lui envoyant une réponse de redirection ; ceci est utile pour rediriger vers le lien de partage Web WhatsApp. |
| app.use() | sert des fichiers statiques en montant des fonctions middleware sur l'application Express dans cet exemple. |
| app.get() | crée un point de terminaison pour le lien de partage Web WhatsApp en définissant un gestionnaire de route pour les requêtes GET. |
| document.getElementById() | Fournit une instance de l'élément HTML avec l'ID donné afin que le script puisse gérer les événements. |
| onclick | crée un gestionnaire d'événements à déclencher lorsqu'un clic se produit sur un élément HTML donné, c'est ainsi que la fonctionnalité de partage est déclenchée. |
Activation des capacités de partage WhatsApp multiplateforme
Le premier script crée des boutons de partage pour les versions en ligne et mobile de WhatsApp en utilisant HTML et JavaScript. Le bouton de partage mobile href L'attribut ouvre WhatsApp sur les appareils mobiles avec un message pré-rempli en utilisant l'attribut whatsapp://send?text= Schéma d'URL. Un bouton avec le id de "shareButton" est conçu pour la version de bureau. Ce bouton a maintenant un onclick écouteur d'événements ajouté par le script. Lorsqu'on clique dessus, https://web.whatsapp.com/send?text= est utilisé pour créer l'URL de WhatsApp Web. et utilise encodeURIComponent pour chiffrer le message. window is then used to open the created URL in a new browser tab.open, permettant aux utilisateurs de WhatsApp Web de diffuser le message.
Le deuxième script utilise Node.js et HTML pour le développement frontend et backend. Le Express Le cadre est utilisé par le Node.js script backend pour configurer un serveur. Le serveur définit un itinéraire /share qui redirige vers l'URL de partage Web WhatsApp avec un message pré-rempli et fournit des fichiers statiques à partir du répertoire « public ». Les boutons de partage pour le Web et le mobile sont générés par le script frontend. Le même whatsapp://send?text= Le schéma d'URL est utilisé par le bouton mobile. Le /share le point de terminaison sur le serveur est lié par le bouton de partage Web. Lorsque ce point final est atteint, l'utilisateur est envoyé vers WhatsApp Web avec le message codé en utilisant res.redirect, permettant le partage Web WhatsApp.
Développement d'une solution Web et mobile complète pour le bouton de partage WhatsApp
Solution HTML et JavaScript
<!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><!-- Mobile Share Button --><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><!-- Desktop Share Button --><button id="shareButton">Share on WhatsApp Web</button><script>document.getElementById('shareButton').onclick = function () {var url = 'https://web.whatsapp.com/send?text=' + encodeURIComponent('Hello World!');window.open(url, '_blank');};</script></body></html>
Mettre en pratique une solution frontend et backend pour le partage WhatsApp
Intégration de HTML et Node.js
// Backend: server.js (Node.js)const express = require('express');const app = express();const port = 3000;app.use(express.static('public'));app.get('/share', (req, res) => {const message = 'Hello World!';const url = `https://web.whatsapp.com/send?text=${encodeURIComponent(message)}`;res.redirect(url);});app.listen(port, () => {console.log(`Server running at http://localhost:${port}`);});<!-- Frontend: public/index.html --><!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><a href="/share">Share on WhatsApp Web</a></body></html>
Utiliser les boutons de partage dans WhatsApp pour améliorer l'expérience utilisateur
L’expérience utilisateur sur différents appareils est un facteur essentiel à prendre en compte lors de la mise en place des boutons de partage WhatsApp. Lorsqu’ils interagissent, les utilisateurs mobiles se comportent différemment des utilisateurs d’ordinateurs de bureau. Par conséquent, il est essentiel de garantir que les fonctionnalités de partage des deux plateformes fonctionnent parfaitement. Les utilisateurs souhaitent des activités rapides et rapides lorsqu'ils utilisent des appareils mobiles. La communication directe avec l'application WhatsApp est rendue possible grâce à l'utilisation du whatsapp://send?text= Schéma d'URL, qui offre une expérience de partage simple et rapide.
Reproduire cette expérience fluide sur un PC est un défi. Non seulement il faut accéder à l'interface Web de WhatsApp, mais il faut également s'assurer que le message est préparé et préparé pour l'envoi. Cela nécessite une gestion prudente des URL et un codage correct des messages avec encodeURIComponent. De plus, les utilisateurs d'ordinateurs de bureau pourraient trouver utile que le bouton de partage soit facilement accessible et visible, ce qui peut être réalisé en planifiant soigneusement la disposition et le positionnement du bouton sur la page. Vous pouvez développer une fonction de partage facile à utiliser et qui augmente l'engagement sur tous les appareils en prenant soin de ces détails mineurs.
Questions fréquemment posées concernant les boutons de partage sur WhatsApp
- Comment puis-je créer un bouton de partage pour WhatsApp sur mon téléphone ?
- Dans le href attribut d'un a balise, utilisez le whatsapp://send?text= Schéma d'URL.
- Comment puis-je faire fonctionner le bouton de partage de WhatsApp Web ?
- Utilisez un élément de bouton qui crée une URL Web WhatsApp et l'ouvre avec un window événement sur click.open.
- Qu'est-ce que encodeURIComponent sert comme?
- Afin de garantir que l'URL est formatée de manière appropriée, elle code un composant URI en remplaçant des séquences d'échappement par des caractères spécifiques.
- Pour quelle raison le bouton de partage nécessite-t-il un backend ?
- Un backend offre une solution de partage plus fiable et adaptable puisqu'il peut gérer la création et la redirection d'URL.
- Comment Express res.redirect fonction?
- Le client reçoit une réponse de redirection qui le dirige vers l'URL donnée.
- Puis-je utiliser mes boutons de partage mobile et Web en même temps ?
- Oui, vous pouvez concevoir des boutons uniques pour les plateformes Web et mobiles ou utiliser un script pour identifier la plateforme et modifier l'URL en conséquence.
- Le partage de bureau nécessite-t-il l'utilisation de window.open?
- Certainement, window.To make sure the message is transmitted, use the open option pour ouvrir un nouvel onglet avec l'URL du partage Web WhatsApp.
- Comment puis-je rendre le bouton de partage plus visible ?
- Sur votre site Web, affichez le bouton bien en évidence et utilisez du texte ou des icônes qui indiquent clairement ce qui doit être fait.
- Que se passe-t-il si l'appareil mobile de l'utilisateur n'est pas équipé de WhatsApp ?
- Si WhatsApp n’est pas installé, ils seront invités à le télécharger et la tentative de partage échouera.
- Puis-je modifier le message déjà pré-écrit dans le lien de partage ?
- Oui, vous pouvez modifier le message en l'encodant correctement et en modifiant le paramètre de texte dans l'URL.
Remarques finales sur l'ajout de boutons de partage WhatsApp
L'inclusion d'un bouton de partage WhatsApp sur votre site Web facilite le partage de contenu multiplateforme, ce qui augmente l'engagement des utilisateurs. L'utilisation de schémas d'URL et de méthodes JavaScript particuliers est nécessaire pour garantir la compatibilité avec les éditions de bureau et mobiles de WhatsApp. De plus, le support backend de Node.js peut offrir une solution fiable et adaptable. Vous pouvez concevoir une fonctionnalité de partage qui augmente la convivialité et la portée tout en étant efficace et conviviale en tenant compte de ces éléments.