Optimitza el teu botó de compartir WhatsApp
Incloure un botó de compartir WhatsApp al vostre lloc web és un enfocament fantàstic per augmentar la participació dels usuaris, ja que els facilita compartir la vostra informació amb les seves xarxes. El mètode estàndard és utilitzar un enllaç per activar WhatsApp sense problemes als dispositius mòbils.
No obstant això, la versió d'escriptori de WhatsApp és incompatible amb aquesta estratègia. Aquesta publicació us ensenyarà el codi i les instruccions que necessiteu per crear un botó per compartir que funcioni a les versions en línia i mòbils de WhatsApp.
| Comandament | Descripció |
|---|---|
| encodeURIComponent() | codifica un component URI substituint una, dues o tres seqüències d'escapada que corresponen a la codificació UTF-8 del caràcter per a cada ocurrència d'un caràcter determinat. |
| window.open() | permet compartir enllaços a WhatsApp Web obrint una nova finestra o pestanya del navegador amb l'URL proporcionat. |
| express.static() | serveix fitxers estàtics al client, la qual cosa permet accedir-hi mitjançant HTML, CSS i JavaScript, des del directori proporcionat. |
| res.redirect() | Redirigeix el client a l'URL proporcionat enviant-li una resposta de redirecció; això és útil per redirigir a l'enllaç de compartir web de WhatsApp. |
| app.use() | serveix fitxers estàtics muntant funcions de middleware a l'aplicació Express d'aquest exemple. |
| app.get() | crea un punt final per a l'enllaç de compartició web de WhatsApp definint un gestor de rutes per a consultes GET. |
| document.getElementById() | Proporciona una instància de l'element HTML amb l'ID donat perquè l'script pugui gestionar esdeveniments. |
| onclick | crea un controlador d'esdeveniments que s'activarà quan es produeix un clic en un element HTML determinat, que és com s'activa la funció de compartir. |
Habilitació de les capacitats per compartir WhatsApp entre plataformes
El primer script crea botons de compartir per a les versions mòbils i en línia de WhatsApp mitjançant l'ús HTML i JavaScript. El botó de compartir mòbil href L'atribut obre WhatsApp als dispositius mòbils amb un missatge emplenat prèviament mitjançant l' whatsapp://send?text= esquema d'URL. Un botó amb el id de "shareButton" està fet per a la versió d'escriptori. Aquest botó ara té un onclick oient d'esdeveniments afegit pel guió. Quan es fa clic, https://web.whatsapp.com/send?text= s'utilitza per crear l'URL per a WhatsApp Web. i usos encodeURIComponent per xifrar el missatge. window is then used to open the created URL in a new browser tab.open, que permet als usuaris de WhatsApp Web distribuir el missatge.
El segon script utilitza Node.js i HTML tant per al desenvolupament frontend com backend. El Express marc és utilitzat pel Node.js script de backend per configurar un servidor. El servidor defineix una ruta /share que redirigeix a l'URL de compartició web de WhatsApp amb un missatge preemplenat i lliura fitxers estàtics des del directori "públic". Els botons de compartició per a la web i el mòbil es generen mitjançant l'script d'interfície. El mateix whatsapp://send?text= L'esquema d'URL l'utilitza el botó mòbil. El /share El punt final del servidor està enllaçat amb el botó de compartir web. Quan s'arriba a aquest punt final, l'usuari s'envia a WhatsApp Web amb el missatge codificat res.redirect, habilitant la compartició web de WhatsApp.
Desenvolupament d'una solució web i mòbil completa per al botó Compartir WhatsApp
Solució HTML i 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>
Posar en pràctica una solució de front-end i backend per compartir WhatsApp
Integració d'HTML i 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>
Ús dels botons de compartir a WhatsApp per millorar l'experiència de l'usuari
L'experiència de l'usuari en diversos dispositius és un factor essencial a tenir en compte a l'hora de posar els botons de compartir WhatsApp al seu lloc. Quan interactuen, els usuaris mòbils es comporten de manera diferent als usuaris d'escriptori. Com a resultat, és vital garantir que les funcions de compartició d'ambdues plataformes funcionin perfectament. Els usuaris volen activitats ràpides i ràpides quan utilitzen dispositius mòbils. La comunicació directa amb l'aplicació WhatsApp és possible gràcies a l'ús del whatsapp://send?text= Esquema d'URL, que ofereix una experiència de compartició ràpida i senzilla.
Replicar aquesta experiència fluida en un ordinador és un repte. No només s'ha d'accedir a la interfície web de WhatsApp, sinó que també s'ha d'assegurar que el missatge estigui preparat i preparat per a l'enviament. Això requereix un maneig d'URL prudent i una codificació correcta dels missatges encodeURIComponent. A més, els usuaris d'escriptori poden trobar útil tenir el botó de compartir fàcilment accessible i visible, cosa que es pot aconseguir planificant acuradament la disposició i el posicionament del botó a la pàgina. Podeu desenvolupar una funció per compartir que sigui fàcil d'utilitzar i que augmenti la participació en tots els dispositius tenint cura d'aquests detalls menors.
Preguntes freqüents sobre els botons de compartir a WhatsApp
- Com puc fer un botó de compartir per a WhatsApp al meu telèfon?
- En el href atribut d'a a etiqueta, utilitza el whatsapp://send?text= esquema d'URL.
- Com puc fer que el botó de compartir de WhatsApp Web funcioni?
- Utilitzeu un element botó que crea una URL web de WhatsApp i l'obre amb a window esdeveniment a clic.obrir.
- El que fa encodeURIComponent servir com?
- Per tal de garantir que l'URL tingui un format adequat, codifica un component URI substituint seqüències d'escapada per caràcters específics.
- Per quin motiu el botó de compartir requereix un backend?
- Un backend ofereix una solució de compartició més fiable i adaptable, ja que pot gestionar la creació i la redirecció d'URL.
- Com funciona Express's res.redirect funció?
- El client rep una resposta de redirecció que el dirigeix a l'URL donat.
- Puc utilitzar el meu mòbil i els botons de compartir web al mateix temps?
- Sí, podeu dissenyar botons únics per a plataformes web i mòbils o utilitzar un script per identificar la plataforma i modificar l'URL adequadament.
- La compartició d'escriptori requereix l'ús de window.open?
- Certament, window.To make sure the message is transmitted, use the open opció per obrir una pestanya nova amb l'URL de compartició web de WhatsApp.
- Com puc fer que el botó de compartir sigui més visible?
- Al vostre lloc web, mostreu el botó de manera destacada i feu servir text o icones que indiquin clarament què cal fer.
- Què passa si el dispositiu mòbil de l'usuari no està equipat amb WhatsApp instal·lat?
- Si WhatsApp no està instal·lat, se'ls demanarà que el baixin i l'intent de compartir no tindrà èxit.
- Puc canviar el missatge que ja està escrit prèviament a l'enllaç per compartir?
- Sí, podeu modificar el missatge codificant-lo correctament i modificant el paràmetre de text a l'URL.
Comentaris finals sobre com afegir botons de compartir WhatsApp
Incloure un botó de compartir WhatsApp al vostre lloc web facilita l'intercanvi de contingut entre plataformes, la qual cosa augmenta la implicació dels usuaris. És necessari utilitzar esquemes d'URL i mètodes JavaScript concrets per garantir la compatibilitat amb les edicions d'escriptori i mòbils de WhatsApp. A més, el suport de backend de Node.js pot oferir una solució fiable i adaptable. Podeu dissenyar una funció per compartir que augmenti la usabilitat i l'abast alhora que sigui eficaç i fàcil d'utilitzar tenint en compte aquestes coses.