Cómo instalar un botón para compartir las entradas de tu blog a través de Whatsapp

votar
Todos conocemos los botones sociales para que los usuarios de nuestros sitios compartan nuestro contenido en sus perfiles (aquí como rentabilizarlos). También todos conocemos la aplicación de mensajería Whatsapp, la cuál también es por definición una red social. ¿Cómo es que nunca se nos ha ocurrido incluir esta red, con la cantidad de usuarios que tiene, en estos botones?


Y no es mala idea, aunque hace poco que está disponible y sólo para iOS (el sistema operativo de los dispositivos de Apple). Los primeros en probarlo parece ser que fueron los editores de la publicación web de deportes perteneciente a USA Today, For The Win, y han podido constatar que se ha hecho más uso de este botón que del mismísimo Twitter.

Según Marketing Directo: "El 35% de los lectores de FTW compartieron noticias de su interés de la web móvil a través del correo electrónico, el 34% lo hicieron difundiendo las noticias en su página de Facebook, el 18% a través de la app de mensajería WhatsApp y un 13% a través de la red social de noticias cortas Twitter".

Cómo incluir un botón de compartir en Whatsapp en sitios web

Es muy sencillo. Sólo debemos incluir en el lugar que queramos que aparezca la siguiente línea de código:

<a href="whatsapp://send?text=URL" data-action="share/whatsapp/share">WhatsApp</a>

Aunque en realidad este ejemplo se trata de un enlace de texto. Pero podemos convertir una imagen, que será nuestro auténtico botón, modificando ligeramente el código HTML:

<a href="whatsapp://send?text=URL" data-action="share/whatsapp/share"><img border="0"″ src="URLiconoWhatsApp.png" width="50" height="20"></a>

En ese caso deberemos buscar una imagen para sustituir la dirección en donde la tengamos alojada por el fragmento URLiconoWhatsApp.png.

El fragmento de texto 'URL' deberemos sustituirlo por la dirección URL de la página a compartir. Es sencillo si queremos compartir una página web de una sola entrada pero si queremos que se muestre en todas nuestras páginas debemos hacer un pequeño arreglo.

Veamos como hacer que la sección 'URL' del texto genere una dirección URL válida y de forma automática para cada una de nuestras entradas y páginas específicas de nuestros blogs de Blogger.

Cómo añadir un botón de Whatsapp para blogs de Blogger

Para añadirlo a Blogger cambiamos la parte que pone 'text=URL' por 'text=data:post.url'. Las comillas dobles sería mejor sustituirlas por comillas simples. De este modo es como quedaría:

<a href='whatsapp://send?text=data:post.url' data-action='share/whatsapp/share'>WhatsApp</a>

Aunque recomiendo usar este más personalizable en su lugar. Con el parámetro data: podemos añadir al enlace final más información, tal como está (data:post.url) incluye el título de la entrada. Sustituyéndolo por data:post.snippet mostraría un fragmento:

<div id='boton-whatsapp'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compártelo en WhatsApp' alt='Botón para compartir en WhatsApp'></a></div> 

Podemos modificar el aspecto del botón añadiendo código CSS al id boton-whatsapp (div id='boton-whatsapp'). Tienes más información y detalles en el sitio de oloblogger.com.

Cómo añadir un botón de Whatsapp para blogs de Wordpress

Para usarlo en Wordpress cambiaremos la parte antes indicada por esta otra '<?php echo get_permalink(); ?>'. Quedando de este modo así:

<a href="whatsapp://send?text=<?php echo get_permalink(); ?>" data-action="share/whatsapp/share">WhatsApp</a>


Con esto el botón que aparezca en vuestras páginas permitirá de forma automática generar un enlace a los usuarios de vuestro blog. Debéis incluirlo en la zona que prefiráis pero de la versión móvil (aquí una orientación, en la última parte), no en ambas ya que da un error.  Además de momento sólo es compatible con dispositivos Apple.

Si te da problemas puedes usar este generador: whatsapp-sharing.com
Aquí en GitHub: github.com/kriskbx/whatsapp-sharing
Y además: Cómo mostrar una imagen de la web junto al enlace enviado

20 comentarios:

  1. En realidad no me ha quedado muy claro como insertar el código en Blogger...cual es el código exacto??

    ResponderEliminar
    Respuestas
    1. Pues el que digo en la entrada que es para Blogger, tal como está. Un saludo.

      Eliminar
    2. Perdón otra vez, ya puse el código en Blogger pero en el móvil le doy a compartir por Whatsapp, me abre la aplicación bien y selecciono a quien quiero compartir el sitio. Pero en vez de enviarle la url del post que estaba viendo, le manda literalmente: data:post.url

      Y no sale nada más, ¿qué hago para que salga la url bien?

      Eliminar
    3. Hola, no te preocupes. Acabo de ver que este botón sólo funciona en dispositivos iOS.

      Aunque también podría ser que el código para Blogger no sea correcto, no puedo probarlo porque no tengo WhatsApp.

      Si tienes un iOS prueba a poner también entre comillas la parte de data:post.url.

      En cualquier caso también puedes generar un botón desde esta aplicación.

      Un saludo.

      Eliminar
  2. Muy bueno el código.

    Yo el único problema que tengo es en el caso de que la url sea amigable y termine con /
    la url en whatsapp la copia y en la conversación se ve, pero una vez haces click en el enlace, el navegador no tiene la barra final, por lo que no encuentra la pagina.

    Alguna idea?

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola, pues creo que eso es más un problema del servidor que del botón. Si no me equivoco, la dirección debería llevar al mismo sitio.

      Puedes probar la barra invertida después del "data:post.url" o usar el generador que enlacé al final de la entrada para ver si cambia el resultado.

      Y muchas gracias a ti. Un saludo.

      Eliminar
  3. hola como seria para Telegram gracias

    ResponderEliminar
    Respuestas
    1. Hola, de momento, hasta que lo construyan, no se puede. Tienen que ponerlo ellos disponible antes. Tal vez próximamente.

      Un saludo.

      Eliminar
  4. hola.
    A mi me funciona pero cuando estoy en el ordenador y le doy me da fallo, por movil va bien. Si solo quiero ponerlo para que se vea en el movil...como lo hago??

    ResponderEliminar
    Respuestas
    1. Hola, fallo mío, se me olvidó incluir que sólo es compatible con el sistema operativo de los móviles de Apple.

      Para incluir sólo en la plantilla para móviles debes buscar en tu código de la plantilla la sección en la que quieras que aparezca dentro.

      Por ejemplo; bajo el título sería la parte b:includable con class='post-header-line-1' dentro del div con id id='mobile-post'. No puedo ponerte el código como es porque en los comentarios no se puede.

      Estoy preparando una entrada relacionada y añadiré un enlace a esta. Si tal te aviso. Un saludo!

      Eliminar
  5. Hola.
    Para que el botón solo funcione en la versión móvil cómo sería??

    ResponderEliminar
    Respuestas
    1. Lo he respondido en el comentario anterior.

      Un saludo y gracias.

      Eliminar
  6. Respuestas
    1. Muchas gracias, se agradece verdaderamente tu comentario! :)

      Eliminar
  7. ¿Cómo haría para agregar el titulo del articulo?.. o al menos un texto que vaya antes de la URL a compartir, porque compartir solo la URL se vería algo así como SPAM

    ResponderEliminar
    Respuestas
    1. Hola, acabo de añadir un código para ello.

      Un saludo y gracias por la pregunta.

      Eliminar
  8. Pues me viene genial, lo había visto en algunas webs y blogs, pero no sabía como hacerlo, voy a seguir las instrucciones a ver como me va, saludos y GRACIAS

    ResponderEliminar
  9. En fin...
    Para poner un botón para compartirlo en una conversación de WhatsApp?
    Pero me refiero que este botón aparezca en la versión Móvil de mi Blogger.
    Estoy usando una de las plantillas del Blogger.
    En fin... solo deseo que aparezca este botón en vista móvil.
    En vista web ya pude hacerlo.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola, disculpa la demora en responder.

      Lo primero es insertar el botón en un elemento que se muestre también en la versión móvil. Si en la plantilla hay 2 contenedores con el mismo nombre pues hay que usar el segundo, que corresponde a la versión móvil.

      Espero que te resulte más sencillo ahora.

      Un saludo.

      Eliminar

Tu comentario tiene valor, dedícale unos minutos y repásalo. Si tiene faltas de gramaticales o de ortografía lo borraré. Respondo a todos así que si tienes dudas no repares en preguntar.

Si esperas respuesta acuérdate de marcar el botón de 'Avisarme'.

Y RECUERDA: Para mantener las conversaciones legibles usa correctamente el botón COMENTAR o RESPONDER cuando proceda. Muchas gracias.

Más de 2000 suscriptores reciben las entradas en su correo

Vía FeedBurner. Introduce tu dirección de correo electrónico y confirma el mensaje que te llegue.