Integrar botón de WhatsApp en tu web o blog

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!

Tags de búsquedas:

como meter whassap en addthis,boton whatsapp en web,whatsapp en mi pagina web,whatsapp en mi web,integrar whatsapp en web,boton enviar whatsapp,whatsapp html5,whatsapp en pagina web,botón whatsapp en mi web,botones compartir whatsapp,poner un numero para llmar en mi blog,link para abrir wathsapp,boton whatsapp web,link para abrir whatsapp,como abrir un enlace en whatsap

Noticias relacionadas »

20 comentarios en Integrar botón de WhatsApp en tu web o blog

  1. beto
    / Responder

    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

  2. Alberto
    / Responder

    Muchas gracias, tu conociemto vale oro

  3. JorgeMDP
    / Responder

    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

    • / Responder

      Hola JorgeMDP, hay una librería PHP para detectarel sistema operativo de tus visitantes, también detecta el navegador, si computer o mobil o tablet, entre otros, te dejo el Link: http://mobiledetect.net/

  4. / Responder

    Estoy tratando de buscar lo mismo que leo no se si existe .
    Chau y gracias de antemano

  5. / Responder

    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!!

    • mario
      / Responder

      Con CSS. Si tu página es responsiva y se adapta a la resolución de pantalla puedes hacerlo, investiga acerca de bootstrap.

      saludos.

      Mario

    • / Responder

      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

  6. / Responder

    Hola, tengo el boton de Whatsapp en mi blog, pero parece que no hay ningún enlace asi a mi telefono, como lo puedo solucionar?, gracias

  7. Diego
    / Responder

    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

  8. / Responder

    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

    • Sebastian
      / Responder

      Hola victor tengo la misma duda, tu la pudiste solucionar si es así la compartes jejeje 😉

      • / Responder

        Hola, alguién pudo hacer lo que consulta Sebastián y Victor. Si es así por favor compártanlo. Gracias

        • / Responder

          Por si alguien tiene la misma duda, he averiguado que al parecer esto no es posible porque WhatsApp no tiene una Api pública para realizar conversaciones desde otros servicios.
          Fuente:

          • Hola a todos. ¿Alguien ha podido solucionar este problema ahora que ya es posible abrir whatsapp desde el ordenador?

    • dafonk
      / Responder

      Alguien sabe si ya existe esta posibilidad??

  9. Josh WIn
    / Responder

    100000000000000000000000000000000 KUDOS por esta función, evita esta estúpida integración http://whatsapp-sharing.com/ que no funciona bien.

    Gracias.

  10. Leo
    / Responder

    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

    • / Responder

      Leo, estoy buscando lo mismo!, ya tu lo encontraste?

      • Juan
        / Responder

        Amigos estoy buscando lo mismo y está un poco dispendioso. Si alguien lo encuentra avisa por favor.
        Bonito día…

Deja un comentario

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

10$ gratis con Digital Ocean »

Este blog está funcionando con Digital Ocean,
para todos los lectores 10$ gratis! para probar el cloud a través del siguiente enlace.


Ir a Digital Ocean

¡Comparte este artículo! »

Sígueme en Facebook »

  • sdfgsdf sdfgsdf (2 semanas)
    dsfasd sdfas asdf asdfa asdfasdfafa asdfsdewtr fdsfsdfasfwewesfsd sdf ds
  • sdfgsdf sdfgsdf (2 semanas)
    sdfgsdf sdfgsdfgsdf sdfg
  • Luis (1 mes)
    Hola Pedro, muchas gracias por transmitirnos tu conocimiento. Te comento…
  • Senado.es: Vuelta al año 2000 - Yorokobu (1 mes)
    […] desarrollador Pedro Ventura explica en su blog cómo alternativas…
  • Pedro Ventura (1 mes)
    Hola Edwer La manera de como hacerlo viene explicada en…
  • Rodrigo (1 mes)
    Tengo una duda, como hago para no repetir el tweet?…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
Copy: Una alternativa, competente y segura a Dropbox

La creación de este artículo, sobre esta alternativa a Dropbox, empieza porque estaba usando Ubuntu One, un servicio de almacenamiento...

Cerrar