Tutorial: Cómo poner botón "Compartir en WhatsApp" en tu blog

¡Comparte el tutorial!

Tweet

WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos móviles, y tomando en cuenta de que gran parte de visitantes entran a tu blog desde su celular no es tan mala idea poner un botón para compartir el contenido por WhatsApp.


Este botón funcionaria de forma similar a los que tenemos habitualmente para compartir los enlaces en Twitter, Facebook, Google+, etc. pero que al pulsarlo desde un móvil, directamente conectaría con WhatsApp para enviar a la persona o grupo que queramos los datos que hayamos programado. Normalmente un título y el enlace de la entrada.

¿Que necesitamos?

* Un blog.

Dificultad:

Media

Paso 1:

Bien pues lo primero que hay que hacer es entrar a la plantilla de nuestro blog y buscar la siguiente linea:

]]></b:skin>

Antes de ella pegar lo siguiente, que son los estilos de nuestro botón:

#btn-whatsapp {
display: none;
}
#btn-whatsapp a {
display: block;
width: 100px;
height: 100px;
overflow: hidden;
margin: 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyk6PdkoRe9x8incp5i8aT8BzVB6JiM4QsU3hh5D5nrwjcALTMMCjn5xYlJZs7dVxB4ZhCMHbj2OAq2oZXhUT036TazPWh1vOkIeN9MX7aU5fwSHMTHU9TwwAEiHfODqupNfd8DuTlTg/s100/WhatsApp+Logo.png);
}

Guardamos los cambios ahora vamos la parte del HTML.

Paso 2:

Ahora busca la siguiente linea en tu plantilla:

</body>

Y justo antes de ella pega lo siguiente:

<script>//<![CDATA[
if(/Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.getElementById("btn-whatsapp").style.display="block";}
else {document.getElementById("btn-whatsapp").style.display="none";}
//]]></script>

Guarda cambios y vamos por lo último.

Paso 3:

El siguiente fragmento de código lo podrás pegar en el lugar que más te plazca, sería recomendable colocarlo justo debajo del código de tus demás botones sociales, pero no obligatorio. Así que puedes colocarlo en el lugar que más te convenga:

<div id='btn-whatsapp'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'></a></div>

Guarda cambios y listo.

Es obvio que no lo podrás ver desde tu PC o laptop, ya que está configurado para que solo se muestre en dispositivos con los siguientes navegadores: Android, webOS, iPhone, BlackBerry, IEMobile, Opera.

Pero tranquilo, si quieres ver el resultado se verá algo así:

Si este diseño de botón no te gusta aquí te dejo 2 más para que lo cambies, para ellos solo toma la URL de la imagen y ponla en lugar de la URL de color morado en el código del paso 1.

 

Anímate a ponerlo en tu blog, seguro te traerá buenos resultados :)

Fin del tutorial