Integrar el boton de Whatsapp en tu Web

De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles.

Para ayudar a compartir los contenidos de la red, ya sean de un portal de vídeos, un blog, los medios editoriales, etc.. WhatsApp lanzó un esquema de URL personalizado. La funcionalidad básica es la de abrir un enlace mediante "whatsapp://” seguido de una serie de parámetros para abrir WhatsApp.

Este Tutoriales en linea se actualizado este año agregando la API de WhatsApp...

Ejemplos para integrar botón WhatsApp

Enviar un texto simple:

Mostrar u ocultar

<a href="whatsapp://send?text=Hello%20World!">Tutoriales En Linea!</a>

Enviar un enlace de un contenido web:

Mostrar u ocultar

<a href="whatsapp://send?text=Tutoriales En Linea!"</a>

Mostrar u ocultar

<div class="boton"><a href="whatsapp://send?text=(titulo-de-tu-website)-(url -de-tu-website)" data-action="share/whatsapp/share" >Compartir</a></div>

Incluir Whatsapp en blogger

Mostrar u ocultar

<div class="boton"><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + dаta:post.title + &quot;-&quot; + dаta:post.url' title='Compartir en Whatsapp' alt='dаta:post.title'>Compartir</a></div>

Incluir Whatsapp en WordPress:

Mostrar u ocultar

<a href="whatsapp://send?text=<?php the_title(); ?> – <?php urlencode(the_permalink()); ?>" data-action="share/whatsapp/share" rel="nofollow" >Compartir en WhatsApp</a>

Estilo CSS para el boton

Mostrar u ocultar

<style type="text/css">
.boton {
height: 25px;
width: 100px;
background-color: #64D448;
    float:left;
    margin:0px 5px;
}
.boton a {

text-transform: capitalize;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
line-height: 25px;
color: #FFF;
text-decoration: none;
background-image: url(https://tutorialesenlinea.es/images/whatsapp.png);
background-repeat: no-repeat;
background-position: 5px 3px;
padding-left: 30px;
display: block;
}
.boton a:hover {
background-color: #48BA2C;
    color: #FFF;
}
</style>

A todos estos ejemplos habría que aplicarle estilos CSS para que salga correctamente y se vea bien el botón, pero la funcionalidad básica es usar el envío mediante el esquema de URL personalizada "whatsapp://”.

Referencias de la documentación oficial de WhatsApp

Integrar botón de WhatsApp en IOS: www.whatsapp.com...
Integrar botón de WhatsApp en Android:www.whatsapp.com...

Otros métodos para integrar Whatsapp en WordPress:

La mejor manera, o al menos la más rápida, para integrar Whatsapp en WordPress es usando un plugin, el mejor que he visto hasta el momento es Mobile ShareBar (Este complemento se ha cerrado y ya no está disponible para descargar).

La curiosidad es que si se accedes desde un navegador en un ordenador el botón de WhatsApp desencadena un comportamiento para enviar por email, ya que en el ordenador no tenemos el WhatsApp instalado. Cuando se ve la web desde el navegador de un dispositivo móvil con WhatsApp, es cuando funciona y se abre nuestro WhatsApp para seleccionar el contacto o grupo al que queremos enviar el contenido....