Botón compartir en WhatsApp para Blogger

Sin duda WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos móviles, así que podría ser de interés a efectos promocionales, facilitar que alguien pueda enviar nuestros posts a esa red mediante la pulsación de un simple botón.

Sería uno 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.

¿Lo vemos?

OPCION CSS

Buscamos en la plantilla cualquier parte dentro del pie de post (post-footer) que nos convenga, por ejemplo a continuación de los botones sociales estándar de Blogger o los que hayamos añadido nosotros, y ahí insertamos este HTML:

<div id='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>

Como veis, la estructura es la de un simple enlace sin contenido, a cuya dirección se le añade un texto que llegará a WhatsApp como parámetro. Ese texto lo podemos construir como queramos y en el ejemplo he usado etiquetas data para ello, la del título del post más el enlace permanente.

Nada impide poner otros datos como por ejemplo un data:post.snippet para añadir un breve resumen del contenido del post o incluso un texto fijo tipo "Mira lo que he visto en Internet". Whatsapp no tiene límite de caracteres como sí sucede por ejemplo en Twitter, así que echadle imaginación


He añadido una clase (whatsapp) para poder configurar el aspecto del botón fácilmente desde nuestro CSS. Este sería un ejemplo para un simple botón centrado:

#whatsapp {
display: none;
}
#whatsapp a {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
margin: 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHFnYza-8uYPxc6GSShTozYCzSVmoKM24x7X9koGCvjUNhxkdymJRUUMI93N29NcEXn-KOGcu4yZcA1B8E-KnRg5yZ00v7zjcZxa9fz7g_NGLY7NRK10OhCmRf8fxGc5R32DFiI4UlTw/s150/WhatsApp+Logo.png);
}
@media (max-width: 800px) {
#whatsapp a {display: block;}
}

Y este sería el resultado:

¿Qué? ¿Que no lo veis? Pues esa es la idea, que en ordenadores no se vea y que sólo aparezca cuando la pantalla tiene un ancho menor de 800px de ancho, caso en el que presuntamente estamos viendo esto desde un móvil. Eso lo hace el selector @media que podéis ver un poco más arriba.

El motivo de hacerlo así es que por la propia naturaleza del botón, este sólo funciona cuando se está en un teléfono móvil, lo que hace inútil que se vea en ordenadores. Si hacéis más pequeña la ventana (como mucho de 800px), observaréis como aparece el botón dónde dije.

OPCIÓN CON JAVASCRIPT

Para no depender del ancho y que realmente se vea sólo en dispositivos móviles, podemos usar algo de JavaScript para detectar el tipo de navegador que se está usando.

En este caso la regla @media (max-width: 800px) deberíamos borrarla completa y después del HTML con el que formamos el botón en sí mismo, añadir esto:

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

En la condición se podrían quitar iPad e iPod porque creo que lo normal es que no tengan WhatsApp, pero lo he dejado para que veáis los distintos navegadores que usan los dispositivos móviles y por si alguna vez os hace falta usar ese pequeño truquillo.

OTROS DISEÑOS PARA EL BOTON

Simplemente cambiando la imagen del background del selector #whatsapp a, tendréis el botón que queráis. Las siguientes están sacadas de la página oficial de la aplicación, pero no hay problema en usar otras. Si son de tamaño distinto a 150x150 píxeles (como la primera que pongo) no olvidéis cambiar esas medidas en el CSS.

Como con otras modificaciones, ninguno de estos sistemas funcionará en las plantillas para móviles por defecto o prediseñadas de Blogger. Sólo lo hará si tenéis la plantilla móvil en la opción personalizada (custom) o si el diseño de vuestro blog es adaptable (RWD) y tenéis inhabilitada la plantilla móvil.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter