HTML5 Demostración y Ejemplos

WhatsApp en tu web: Paso a paso como integrarlo

WhatsApp en tu web. WhatsApp es una aplicación de mensajería que funciona en teléfonos inteligentes. Por lo tanto, este sistema envía y recibe mensajes haciendo uso del internet. Además, ofrece el servicio de llamadas, video llamadas, creación de grupos, envío simultaneo de imágenes, vídeos y grabaciones de audio, consiguiendo que los usuarios se sientan muy felices.

Es por tal motivo que es una de las aplicaciones más usadas en los Smartphone.

Recordemos que WhatsApp fue absorbido por el gigante Facebook en los años 2016 y hoy en día trabaja de la mano de Mark Zuckerberg.

WhatsApp en tu web Paso a paso como integrarlo
WhatsApp en tu web Paso a paso como integrarlo

WhatsApp en tu web: Paso a paso como integrarlo

A continuación, veremos 2 formas de integración dependiendo de la página web.

WhatsApp en tu web: Botón compartir en WhatsApp

Si observamos la aplicación WhatsApp es un sistema que está presente en la mayoría de los teléfonos inteligentes. Este icono es casi obligatorio en las páginas web posean el botón compartir en WhatsApp. Para agregar el botón de compartir en WhatsApp a tu web, tenemos que añadir el siguiente código HTML en nuestra web.

<a href="whatsapp://send?text=http://tuweb.com" data-text="BOTÓN COMPARTIR EN WHATSAPP" data-action="share/whatsapp/share" class="miestilo" style="border: none; margin: 10px 0; font-size: 16px;">
 <img border="0" src="imagen-de-whatsapp.png" width="64px" height="64px"> Compartir
</a>

Explicación del código. – En el código anterior hemos declarado puesto un enlace de texto para compartir una URL a través de WhatsApp. Por lo tanto, podemos cambiarlo por nuestra URL.

Además, estamos agregando una imagen, para que el resultado sea más llamativo a los visitantes. Ahora, tan solo tenemos que cambiar las medidas de las imágenes y estilos si deseamos incorporar.

La parte más importante es el href que enlaza a “whatsapp://send”. A continuación, “data-tex” define el texto con el que saldrá el vínculo. En este caso, es “BOTÓN COMPARTIR EN WHATSAPP”. Y para darle estilo al botón través del atributo “class“.

Boton WhatsApp en tu pagina web
Boton WhatsApp en tu pagina web

WhatsApp en tu web: Botón WhatsApp en Wordpress

Por otro lado, si estamos usando sistemas gestión de contenidos como por ejemplo Drupal o Wordpress. Entonces, tenemos que tener conocimientos de PHP.

Ahora, para agregar el botón de compartir en WhatsApp en WordPress, tendríamos que configurar el código del botón para colocarlo en las páginas y entradas de este importante CMS.

Recordemos que el código es muy similar para HTML. Para realizar este proceso, sólo tenemos que cambiar la URL que quieres compartir:

El campo que tenemos que reemplazar será el “text” y tenemos que agregar la función get_permalink() para obtener la url de la entrada de Wordpress.

<a href="whatsapp://send?text=<?php echo get_permalink(); ?>" data-action="share/whatsapp/share">
<img border="0" src="imagen-de-whatsapp.png" width="64px" height="64px"></a>

Visible solo en móvil

Si observamos en el entorno escritorio no existe WhatsApp (Versión web), si colocamos este icono estaríamos perdiendo espacio en nuestra página web porque simplemente no serviría.

La solución es ocultarlo en el entorno escritorio y hacerlo visible en el entorno móvil. Por lo tanto, podemos usar códigos CSS (estilos) para lograr tal acción Le dejaremos un ejemplo de estilos en css.

/* Solo visible en esta resolucion de pantalla*/
@media (min-width: 668px) {
.whatsapp { display: none } /* none (Oculta cualquier elemento dentro de la clase)*/
}

CONCLUSIÓN DEL SISTEMA

Ya hemos incorporado la aplicación WhatsApp en nuestra web y es muy beneficioso para captar ese tráfico que viene por el móvil y convertirlo en clientes a través de esta famosa red social.

Como podemos apreciar hay varias formas de implementar este código en nuestros proyectos web. Espero que esta breve explicación les sirva para aumentar el trafico web en sus proyectos realizados.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

3 comentarios

  1. Hola, buenas, quiero saber como hacer para enviar mediante una clase php un mensaje por whatsapp, imagino tener una clase la cual debe “conectarse” con el servicio, y luego poder llamar a una funcion de enviarMensaje con el numero enviado como parámetrooo

  2. Hola, buenas, quiero saber como hacer para enviar mediante una clase php un mensaje por whatsapp, imagino tener una clase la cual debe “conectarse” con el servicio, y luego poder llamar a una funcion de enviarMensaje con el numero enviado como parámetro

  3. buenas, quisiera saber si es posible como integro un botón en mi proyecto donde permita abrir la VIDEO LLAMADA de whatsapp, el sistema lo usaría directo en el celular.
    o sea tengo una lista de clientes donde quiero q al presionar un boton haga una video llamada con ese cliente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba