Integrar botón de WhatsApp en tu web o blog

De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles.

Para ayudar a compartir los contenidos de la red, ya sean de un portal de vídeos, un blog, los medios editoriales, etc.. WhatsApp lanzó un esquema de URL personalizado. La funcionalidad básica es la de abrir un enlace mediante “whatsapp://” seguido de una serie de parámetros para abrir WhatsApp.

Referencias de la documentación oficial de WhatsApp

Ejemplos para integrar botón WhatsApp

Enviar un texto simple:

<a href="whatsapp://send?text=Hello%20World!">Hello, world!</a>

Enviar un enlace de un contenido web:

<a href="whatsapp://send?text=Integrar bot%C3%B3n de WhatsApp en tu web o blog http%3A%2F%2Fpedroventura.es%2F11Z2kMy</a>

Incluir Whatsapp en WordPress:

<a href="whatsapp://send?text=<?php the_title(); ?> – <?php urlencode(the_permalink()); ?>" data-action="share/whatsapp/share" rel="nofollow" >Compartir en WhatsApp</a>

 

A todos estos ejemplos habría que aplicarle estilos CSS para que salga correctamente y se vea bien el botón, pero la funcionalidad básica es usar el envío mediante el esquema de URL personalizada “whatsapp://”.

Otros métodos para integrar Whatsapp en WordPress:

La mejor manera, o al menos la más rápida, para integrar Whatsapp en WordPress es usando un plugin, el mejor que he visto hasta el momento es Mobile ShareBar.

 

Configurar el plugin del botón es algo trivial, tampoco voy a explicar mucho, tan solo tendréis que leer las opciones y configurarlas como mejor os venga, podéis cambiar textos, agregar el botón de Facebook y Twitter.
Si que voy a mencionar, que el plugin te da la opción de agregar tus credenciales de bit.ly para poder acortar las URL y trackearlas, esto es muy interesante cuando tienes tu dominio personalizado con bitly.

Aporte extra:

Otro método para integrar el botón de WhatsApp en cualquier web es usar el servicio de Addthis.com

Esta opción es muy versátil y cómoda para usuarios no-técnicos. Ya que desde el panel de administración se puede activar y desactivar los diferentes widgets, de follow y compartición, tan solo habrá que incluir un pequeño fragmento de código

La curiosidad es que si se accedes desde un navegador en un ordenador el botón de WhatsApp desencadena un comportamiento para enviar por email, ya que en el ordenador no tenemos el WhatsApp instalado. Cuando se ve la web desde el navegador de un dispositivo móvil con WhatsApp, es cuando funciona y se abre nuestro WhatsApp para seleccionar el contacto o grupo al que queremos enviar el contenido.

Cualquier pregunta o sugerencia no dudes en dejar tus comentarios!

20 opiniones en “Integrar botón de WhatsApp en tu web o blog”

  1. Buen día, gracias por tu artículo. Sabes qué código debo usar para poner un botón de WhatsApp en mi web, y que los visitantes puedan enviarme un mensaje desde allí? Muchas gracias por tu ayuda

  2. Buenas Pedro,

    quería preguntarte si es posible hacer este mismo ejemplo pero para que me añadan bien a contactos o directamente a conversación.

    Tengo un formulario de contacto en mi página hipercomponentes.com en el cual doy la opción a mis clientes de hablar por whatsapp, con tu ejemplo me abre el whatsapp sin problemas, pero lo que quiero es un boton que lleve a conversación directa con un número de telefono.

    No sé si es posible, vi por ahí otros ejemplos para compartir contenido, pero lo que yo quiero es que mis clientes se comuniquen conmigo.

    gracias por tu trabajo,

    un saludo,

    victor

  3. Hola a todos
    He insertado addthis en un light box con jquery para poder enviar la imagen del mismo por whatsapp, y lo que me manda es la url, no la imagen en si.
    Alguien sabe como hacerlo?
    Gracias

  4. Hola, muchas gracias por el dato! Ya logré implementar el botón en mi web, pero quisiera saber cómo puedo lograr que el botón únicamente sea visible en la versión móvil

    Saludos y gracias!!

    1. Hola Jorge, si usas http://mobiledetect.net/
      podrías hasta personalizar funciones, mostrar opciones para tablet o para mobile, es más, mostrar opciones para iOS o Android de manera específica, ya que he visto algunas funciones PHP que funcionan en Android y no funcionan en iOS como el método para rotar una imagen $rotate = imagerotate($source, $degrees, 0);
      y el mismo html5 cuando usas la cámara para adjuntar una foto, me ha pasado que Android no envía fotos verticales(las gira) pero en iOS sí envía fotos verticales, y en este caso esta librería me ayudó un montón

  5. Hola Pedro! Gracias por compartir conocimientos …

    Queria preguntarte si algún script podrá incluirse que identifique si es iOS o Android, en el proceso, para en cada caso, destinar al usuario al respectivo script según su OS.

    Además me gustaría saber si al abrir su WhatsApp (WA), este podria ya incluir el numero del titular del website y ahorrarle movimientos …

    Mi intención es poner algún botón WA, en la version para celulares que estoy desarrollando (http://www.jaom.com.ar/miniFletes/moviles/). En la version para PC de escritorio solo pondría un mensaje que es posible enviarme un WA.
    Gracias por tus comentarios y ayuda.
    Jorge

  6. gracias por tu explicacion
    2 consultas:

    1.- por url web como lo haces para poder enviar una imagen de captura de pantalla del android por wassap?

    es decir que al pinchar el link te envie no el texto sino la captura de pantalla de lo que esta en el celular.

    2.- como lo haces para que en ese link de url poder colocar un numero de telefono? de manera que al clikar en ese link te vaya a abrir para llamar por telefono. Pero a manera de codigo…

    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *