x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 17.3.17 - Tutorial

Botón de Whatsapp: 2 métodos para instalarlo

botón de Whatsapp en Blogger

Cuando leemos un blog desde nuestro móvil, y dependiendo del SO de este último, podemos enviar a nuestros contactos en Whatsapp la entrada que nos ha gustado, con el botón de compartir del mismo navegador.

Pero si deseas asegurarte de que tus lectores tengan la opción de viralizar tu contenido, puedes colocar un botón en tu blog y hoy te mostraré dos maneras de lograr tu cometido.

Recuerda siempre hacer copia de seguridad de tu plantilla ANTES de aplicar cualquier tutorial.

Agregándolo a la ya existente barra de botones personalizados de compartir:

Este es el código HTML del enlace:
<a alt='Compartir en WhatsApp' class='ocultando' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartir en WhatsApp'>TU ANCLA</a>


En Tema > Editar HTML localizamos los botones de compartir personalizados (no los que vienen por defecto en Blogger) y la manera más fácil es escribir en el buscador 'sharer' lo que nos guiará al código de compartir de Facebook.

Guíate de la estructura y trata de repetir las clases ya determinadas, para que tu botón encaje con el resto.

Por darte un ejemplo, en la imagen siguiente puedes ver que la estructura es una sucesión de etiquetas <a y lo que hice fue agregar el enlace y dar la misma clase al texto que vemos (el ancla) además usando los iconos de Fontawesome.



Es lo mismo que debes hacer en tu plantilla, ver que clases ya tienen los otros botones y colocarlas al que has agregado. Y en mi caso particular, adicioné una clase Bootstrap más al botón de Whatsapp: visible-xs que oculta este botón en dispositivos con pantallas de un ancho mayor a 768px.

Este sería el código CSS de esa clase que ya añadí al código HTML (agrégalo a tu plantilla antes de ]]></b:skin>):
.ocultando {display:none}
@media (max-width:767px){.ocultando {display:inline-block!important;}}

Puedes probar su funcionamiento en este mismo sitio; y por supuesto, compartir el tutorial por Whatsapp para que veas que bien funciona.


Agregando un botón en solitario.

Este caso es cuando quieres un botón que resalte sobre los otros y/o colocarlo en el lugar que mejor te convenga.

Una vez que hayas decidido donde colocarlo, sólo pega el siguiente código HTML:
<center><a class='whatsapp-cyball ocultando' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' target='_blank' title='Comparte este post por Whatsapp'><span class='boton-whatsapp'><i class="fa fa-whatsapp"/> Comparte este post por Whatsapp</span></a></center>

Y el estilo sería:
a.whatsapp-cyball {margin:25px 0;text-decoration:none!important}
.boton-whatsapp {padding:10px 15px; background-color:transparent;border: 2px solid #25d366;border-radius:10px;overflow:hidden;color: #25d366;}
.boton-whatsapp:hover {background-color: #25d366;color: white;text-decoration:none!important}
.ocultando{display:none!important}
@media (max-width:767px){.ocultando{display:block!important;}}


Este sería el resultado:



Extra: mediante servicios como Addthis:

Si ya dispones de botones de compartir mediante servicios externos, entonces basta con ir a tu panel de usuario y agregar la opción de Whatsapp.

Servicios que ofrecen esta opción:
  • Addthis
  • Addtoany
  • Shareaholic

A diferencia de este último método, los dos primeros que te propongo son altamente personalizables, y no funcionan mediante scripts, que suelen ralentizar si se abusan de ellos.


¿Te has decidido a implementar un botón de Whatsapp en tus posts?

¿Por cuál método te decantas?


Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *