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

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«.

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.