Crear enlace para compartir en WhatsApp

Resumen

En este post te mostraré a crear un enlace para compartir una página web o un enlace en WhatsApp usando la (muy limitada) API de WhatsApp. También te enseñaré a enviar un mensaje a un usuario específico según su número, de modo que al tocar el enlace se nos llevará directo a su chat.

Voy a mostrarte cómo crear un enlace usando HTML puro, otro usando PHP y otro usando JavaScript.

La anatomía de un enlace para compartir en WhatsApp

Un enlace para compartir en WhatsApp tiene el siguiente formato:

https://api.whatsapp.com/send?text=texto_codificado

Así de simple, solo hay que cambiar la variable de texto_codificado que va después del parámetro text. Por ejemplo, veamos otro enlace:

Eso es un mensaje codificado en donde los espacios y otros caracteres especiales se remplazan.

Prueba el enlace haciendo click aquí.

Si lo abres en un móvil, se verá lo siguiente:

Compartir en WhatsApp

Ahí puedes seleccionar al receptor del mensaje. Cuando lo elijas, tendrás que confirmar.

Finalmente el mensaje enviado se verá así:

Enviando un mensaje de WhatsApp a través de link

Una cosa similar pasa en la web con WhatsApp web.

Mensaje a destinatario específico

Igualmente podemos generar un link para enviar un mensaje a un número en específico. Esto sirve para cuando, por ejemplo, queremos que nos envíen un mensaje a nuestro número de manera automática.

El enlace se convierte en:

https://wa.me/Número/?text=Texto

De este modo podemos generar un enlace para que se envíe un mensaje a un número en específico. Los parámetros que tenemos que cambiar son el número y el texto. Por cierto, el número no debe llevar guiones y debe estar en formato internacional.

Solo como ejemplo (aquí en México los números empiezan en +52) para un enlace de WhatsApp al número +529999999999 con el texto Saludos, el link sería:

https://wa.me/529999999999/?text=Saludos

Fíjate en que no estoy incluyendo el signo de +. De este modo al hacer clic en el enlace se abrirá un chat de WhatsApp con el número que hayamos indicado y con el texto indicado igualmente. El usuario solo tendrá que tocar el botón de enviar.

La información la tomé de aquí.

Enlace para compartir en WhatsApp usando HTML

Coloca una etiqueta a con un enlace y el texto:

En este caso no es necesario codificar, pues con suerte el navegador lo hace por nosotros.

Prueba el código aquí.

Generar enlace con JavaScript

Para generarlo con JavaScript hay que llamar a window.open y pasarle la dirección. El mensaje hay que codificarlo con encodeURIComponent.

Veamos un ejemplo. Definimos el diseño:

Ahora el script:

Cuando se hace click en el botón, se abre la ventana para compartir en WhatsApp.

Puedes probar el ejemplo aquí.

Usar PHP para generar enlace de compartir en WhatsApp

Finalmente también podemos implementarlo en PHP.

En PHP no existe una función equivalente a la que existe en JavaScript: encodeURIComponent (y urlencode no funcionaba) pero la he tomado de otro lugar.

El código se ve así:

Y puedes probarlo aquí.

Conclusión

Al final de todo es generar un simple enlace y codificar el mensaje.

La forma de obtención del mensaje y la implementación queda en ti

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

4 comentarios en “Crear enlace para compartir en WhatsApp”

  1. haciendo pruebas veo que el mensaje de wassap llega con el titulo de tu pagina y la imagen que esta en la pestaña de la ur de la pagina a compartirl…como haces para la imagen ? a mi solo me sale el titulo de mi pagina en el mensaje,,,,Gracias

  2. Hola. Me gustaría disponer de un generador de enlaces personalizado en mi página web, pero no entiendo cómo hacerlo. El generador solo lo utilizaría para crear mis propios mensajes para marketing digital. Me podrías ayudar?

Dejar un comentario