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 smartphone, 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.
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='"whatsapp://send?text=" + data:post.title + "-" + 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/AVvXsEgOyfhSLaGbfBolAXNiBqObJ4LjP_enz3ta5lD88WppW80pr_c7ZQtjaChMRVErgN5CG3G6njVf69v0RkBluHa89KgRdtrEPXaCTpmg0gWoaLg6n2vIt7B6-thDFpaXgpD3ZjqWb8IDI8U/s150/WhatsApp+Logo.png);
}
@media (max-width: 800px) {
#whatsapp a {display: block;}
}Y este sería el resultado:
¿Qué? ¿Que no lo ves? 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 haces más pequeña la ventana (como mucho de 800px), observaras 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 veas 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, tendras el botón que quieras. 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 olvides 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.
