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="intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end">Envíanos un mensaje de WhatsApp</a>

Debería aparecer un mensaje así:
Envíanos un mensaje de WhatsApp (sí, este es uno de mis números)

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 Díaz
Angel Diaz Ibarra

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

    • Slays

      hola, pudiste hacerlo funcionar en android? porque si abres esta web desde un movil, el href si funciona… pero compilado en phoengap no

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

¿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:

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