Cómo integrar Facebook Messenger y WhatsApp en tu Web

iniciar sesión

Cómo integrar Facebook Messenger y WhatsApp en tu Web

4-5-2016     Herramientas Social Media

En la actualidad el e-mail sigue siendo el método de contacto más utilizado en las Webs pero las nuevas generaciones prefieren hablar mediante mensajería instantánea como Facebook Messenger o WhatsApp.

En este tutorial te voy a explicar paso a paso cómo insertar Facebook Messenger o WhatsApp en tu Web. Cuando alguien pulse el botón de “enviar mensaje” se abrirá directamente la aplicación correspondiente para comenzar a chatear contigo.

 

ENLACE A FACEBOOK MESSENGER

El botón de Facebook Messenger estándar se genera utilizando JavaScript, pero también puedes crear un enlace sencillo mediante HTML. La ventaja es que estos enlaces aparecerán aunque el navegador del usuario esté bloqueando JavaScript. Además, también puedes insertar estos enlaces en e-mails y Newsletters o en banners como este:

Inserta Facebook Messenger en tu Web

Lo que tienes que hacer es sustituir “XYZ” por tu nombre de usuario en el siguiente código. Si no tienes nombre de usuario, puedes utilizar tu ID numérico de Facebook en su lugar, pero te recomiendo que crees uno personalizado siguiendo este enlace.

<a href="https://m.me/XYZ">Envíanos un mensaje de Facebook</a>

El enlace resultante debería quedar similar a este:
Envíanos un mensaje de Facebook

NOTA: Si no ves los mensajes que te envían en tu perfil es porque Facebook oculta automáticamente los mensajes de personas que no están en tu lista de contactos. Tendrás que ir a Mensajes > Más > Filtrados para poder verlos.

 

ENLACE A WHATSAPP

Del mismo modo, puedes crear un enlace HTML que abrirá la aplicación de WhatsApp e iniciará una conversación con el número de teléfono que tú especifiques. Sólo tienes que sustituir “0123456789” por tu número de teléfono (recuerda poner el código internacional de tu país delante).

<a href="https://api.whatsapp.com/send?phone=0123456789">Envíanos un mensaje de WhatsApp</a>

Debería aparecer un mensaje así:
Envíanos un mensaje de WhatsApp (este era uno de mis números… pero ya no lo uso)

Recuerda que a diferencia de Facebook Messenger, el enlace de WhatsApp no es válido para usuarios que navegan por tu Web desde su Laptop o Tablet, por lo que es conveniente mostrar el link sólo a usuarios móviles.

 

UN POQUITO DE ESTILO, POR FAVOR…

Recuerda que puedes aplicarle estilos a los enlaces usando CSS. También puedes hacer enlaces en botones o imágenes que parezcan botones, así se verá más integrado en tu Web:

Mensaje de Facebook   Mensaje de WhatsApp

 

Mucho mejor así ¿verdad?




¡Compártelo!


Ángel Diaz
Angel Diaz

Soy el creador de MetricSpot y estoy aquí para ayudarte. Puedes conectar conmigo vía Twitter o rellenando este formulario.






Deja tu comentario:

  • Buen dato! Gracias

  • Xus_Boya

    intenté implementar la solución para whatsapp y no funciona… en iOs directamente salta mensaje de error diciendo que no es capaz de abrir el enlace y con Android salta mensaje de error de Whatsapp que dice no reconocer el numero.. Probé con el facilitado en este articulo y con el mío própio…
    La info referente al messenger de Facebbook, sí funciona..

  • ElCuboCreativo GDL

    De que manera puedo usar esa implementación para integrarla a iOS?, ya que manda mensaje de error, en android funciona da maravilla.

  • Manuel

    esta interesante lo de facebook

  • Luis

    Hola Angel, Muy buen post.
    ¿Nos podrías comentar cómo se pueden aplicar los estilos usando CSS?

    • Hola Luis,

      El plugin ‘SiteOrigin CSS’ te permite editar el CSS de forma cómoda y sencilla, visualizando todos los cambios al momento.

      Si vas al repositorio de WordPress.org lo encontrarás sin problemas. El autor es: Greg Priday.

      • Luis Junco

        Muchas Gracias Joan por la respuesta.

        Ya generé el siguiente html para obtener un botón:
        >a href=”#” class=”classname”>Text

        Y el siguiente html para hacer el enlace a whattsap:
        >ahref=”intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end”>Envíanos un mensaje de WhatsApp

        ¿Me podrás decir por favor cómo puedo juntarlos?

        Saludos!

      • Luis Junco

        Hola Joan. Gracias por la respuesta.

        Ya tengo el código html del botón y el html del enlace al whatsapp.

        ¿Me podrías decir por favor cómo los puedo unir? https://uploads.disquscdn.com/images/33fa446334d22a18cfd4cdb9b6d3c51336ee501330df6665f20ba9a8219458c0.png

        • Hola Luis.

          Pues parece ser que Ángel lo ha hecho de manera mucho más fácil aunque obligándote a copiar y pegar el mismo código una y otra vez, en diferentes artículos.

          Si haces clic con el botón derecho del ratón sobre cualquiera de las 2 pestañas (Facebook / WhatsApp), se abre una caja de menú con varias opciones, elige ‘Inspeccionar’/’Inspeccionar elemento’ (depende del navegador).

          Ahí verás en la parte inferior el código HTML y en el lateral derecho el estilo CSS que le ha dado para dejarlo bonito.

          No me deja adjuntar imagen sino te lo mostraba mejor.

      • Luis Junco

        Muchas Gracias Joan!
        Ya quedó 🙂
        Me ahorraste horas…jajaja

  • Harold Anguiano

    Hola que tal, tengo una pregunta espero puedas ayudarme. Utilice tu código para abrir whatssapp y mandar un mensaje a un número en especifico. Funciona excelente. Pero por ejemplo como sería el ” Intent ” para utilizarlo en una aplicación android ? Yo utilizo el programa de INTEL XDK y he utilizado el intent whatssapp:* com.whatssapp:* pero sin éxito. Te agradezco tu atención.

  • Marta Camacho

    Hola! Tengo una pregunta, he intentado meter el código de whatsapp en mi versión móvil, cuando le doy al botón desde mi tlf me dice que “El teléfono no está registrado en WhatsApp”. El número que he metido tiene la App instalada, el problema es que yo no lo tengo como contacto porque cuando meto otro número que si tengo como contacto no me sale ese mensaje.
    ¿Podrías ayudarme? ¿Estoy haciendo algo mal?
    Gracias!!

  • David Monge

    Tu botón dejo de funcionar?
    Envíanos un mensaje de WhatsApp

  • Alejandro Martinez

    el link de whatsapp es unicamente para android, no?

  • Alberto EG

    Agradezco mucho el aporte. Les comparto otra opción multiplataforma, que incluso con la última actualización de whatsapp, permite mensajear con usuarios no registrados en tu teléfono: Envíanos un mensaje de WhatsApp Sólo es necesario cambiar los números por el celular deseado incluida la clave internacional…

    • Gabriel Castillo

      Woww!! Cómo hiciste eso @albertoeg:disqus ? Genio! Sirve si el usuario está desde el browser de su celular iOs (Safari) y lo redirige al aplicación móvil o al app store para que descargue whatsapp? y desde un android (Chrome) al app, o desde mi computador (firefox) a web.whatsapp sin guardar el número de télefono en mis contactos y personalizando el mensaje? Cómo es el código?

    • Comentario destacado 😉 ¡Muchas gracias a ti por la solución! Creo que cuando escribí este artículo la API de WhatsApp todavía no era pública.

  • Espacucho es

    la informacion que esta en la web de whataspp me funciono para mis propositos. que era que abriera el whataspp al menos en ios
    coloque esto

    https://api.whatsapp.com/send?phone=15551234567

    Referencia del sitio original

    https://faq.whatsapp.com/en/general/26000030

    Igual agradecido pues me sirvio de punto de partida para investigar mas.
    Saludos

¿Por qué no consigo más ventas en mi Web?

Recibirás un e-mail semanal con los mejores trucos y herramientas para obtener más conversiones:


Powered by Email Marketing Automation Tools

Descubre el sistema que nos trae 500 nuevos usuarios cada semana

Te explicaremos detalladamente cuáles son los 4 pasos a seguir

No gracias, no necesito más clientes