Compartir enlace en WhatsApp desde el sitio web móvil (no la aplicación) para Android

213

He desarrollado un sitio web que se utiliza principalmente en teléfonos móviles.
Quiero permitir que los usuarios compartan información directamente desde la página web en WhatsApp.

Usando la detección de UserAgent puedo distinguir entre Android e iOS.
Pude descubrir que para implementar lo anterior en iOS puedo usar la URL:

href="whatsapp://send?text=http://www.example.com"

Todavía estoy buscando la solución para usar cuando el sistema operativo es Android (ya que lo anterior no funciona).
Supongo que de alguna manera está relacionado con el uso de "intento" en Android, pero no pude descubrir cómo hacerlo como parámetro para href.

Yochai
fuente
De esta manera, se conecta a la aplicación Whatsapp, y hay otra forma de conectarse a la opción web.whatsapp.com. ¿Hay alguna forma de detectar si tiene la aplicación o no, para ver a qué conectarse?
SrQ
¿Qué contacto recibirá este mensaje?
Codebeat

Respuestas:

321

¡Lo acabo de ver en un sitio web y parece funcionar en el último Android con el último Chrome y WhatsApp ahora también! ¡Dale una nueva oportunidad al enlace!

<a href="whatsapp://send?text=The text to share!" data-action="share/whatsapp/share">Share via Whatsapp</a>

Vuelto a comprobar que hoy (17 º de abril de 2015):
trabaja para mí en IOS (iPhone 6 8, las últimas versiones de Android) 5 (Nexus 5, las últimas versiones).

También funciona en Windows Phone.

Manuel
fuente
1
de hecho, parece que la URL original en mi pregunta también funciona ahora para Android.
Yochai
Quien haya votado el comentario indudablemente perspicaz de @ MosheL debe tener un conocimiento íntimo de cuál es exactamente su "artículo".
Dan Dascalescu
66
@Manuel ¿para qué sirve data-action = "share / whatsapp / share"?
user3362364
44
Los datos deben estar en forma codificada de URL. De lo contrario, enviará un mensaje en blanco en WhatsApp iPhone.
Lijo Abraham
1
Algunos cambios de API se pueden encontrar en el documento reciente: faq.whatsapp.com/en/general/26000030/?category=5245251
abhishek77en
102

Las respuestas anteriores están un poco desactualizadas. Aunque esos métodos funcionan, pero utilizando el método a continuación, puede compartir cualquier texto a un número predefinido. El siguiente método funciona para Android, WhatsApp web, IOS, etc.

Solo necesita usar este formato:

<a href="https://api.whatsapp.com/send?phone=whatsappphonenumber&text=urlencodedtext"></a>

ACTUALIZACIÓN: use esto desde ahora (noviembre de 2018)

<a href="https://wa.me/whatsappphonenumber/?text=urlencodedtext"></a>

Uso: https://wa.me/15551234567

No use: https://wa.me/+001-(555)1234567

Para crear su propio enlace con un mensaje precargado que aparecerá automáticamente en el campo de texto de un chat, use https://wa.me/whatsappphonenumber/?text=urlencodedtext donde whatsappphonenumber es un número de teléfono completo en formato internacional y URL -encodedtext es el mensaje precargado codificado en URL.

Ejemplo: https://wa.me/15551234567?text=I 'm% 20interesado% 20in% 20your% 20car% 20for% 20sale

Para crear un enlace con solo un mensaje precargado, use https://wa.me/?text=urlencodedtext

Ejemplo: https://wa.me/?text=I 'm% 20inquiring% 20about% 20the% 20apartment% 20listing

Después de hacer clic en el enlace, se le mostrará una lista de contactos a los que puede enviar su mensaje.

Para obtener más información, consulte https://www.whatsapp.com/faq/en/general/26000030

ad08
fuente
Probé esto en todos los dispositivos. Todo lo que hace es abrir la aplicación de WhatsApp. Nada pasa después. Probado múltiples dispositivos (iOS, Android, Windows).
HoldOffHunger
@HoldOffHunger sí, se abrirá la aplicación de WhatsApp y el usuario debe seleccionar el contacto con el que desea compartir el enlace / contenido.
ad08
@ ad08: Así es como Threema y los otros 40 servicios que probé funcionaron. Viber y WhatsApp, sin embargo, no hacen nada, contacté a sus desarrolladores y ambos admitieron que la API no hace nada. He seguido su correspondencia y las otras 40 api (que funcionan) aquí: github.com/bradvin/social-share-urls/blob/master/README.md
HoldOffHunger
Funciona en WhatsApp Desktop bajo Mojave
Alchem
66
Los enlaces wa.me no funcionan correctamente en dispositivos móviles sin un número de teléfono. Aunque la documentación oficial establece que puede usarlo, solo da un error. Funciona en el escritorio, usando la web de WhatsApp. api.whatsapp.com funciona de manera confiable en ambos.
Ricardo BRGWeb
39

Actualmente, es muy fácil lograr esto. Solo necesita agregar el siguiente código a sus páginas:

<a href="whatsapp://send?text=<<HERE GOES THE URL ENCODED TEXT YOU WANT TO SHARE>>" data-action="share/whatsapp/share">Share via Whatsapp</a>

Y eso es. No se necesita Javascript, no se necesita nada más. Por supuesto, puedes diseñarlo como quieras e incluir un bonito ícono de Whatsapp.

Probé esto en mi dispositivo Android con Google Chrome. Las versiones:

  • Android 4.1.2 (Jelly Bean)
  • Chrome Mobile 37.0.2062.117. También probado en Firefox Mobile 31.0.
  • Whatsapp V 2.11.399

También funciona en iOS. Hice una prueba rápida en un iPhone 5 con Safari y también funciona.

Espero que esto ayude a alguien. :-)

juangalf
fuente
3
Para codificar su contenido para compartir el usoencodeURIComponent()
nikoskip
1
oye, eso funcionó para mí. gracias :) Solo por curiosidad, ¿hay alguna forma de verificar si el usuario realmente compartió el enlace o simplemente regresó al sitio?
Sayed
1
Funciona también en mi Nexus 5 con Android 5.0 (Lollipop) y iPhone 5 con iOS 8.1.1.
Narxx
2
@juangalf ¿Qué sucede si quiero compartir una imagen con este método? ¿eso también será posible o solo se admitirá texto?
elembivos
1
@elembivos estoy preguntando lo mismo. ¿Cómo senddebe formatearse el parámetro? Actualmente, whatsapp://send?text=data:image/png;base64,iVBORw0KGgoAAAANS...pero no estoy seguro de cuántos prefijos incluir ...
TMOTTM
27

Según la nueva documentación, el enlace ahora es:

<a href="https://wa.me/?text=urlencodedtext">Share this</a>

Si no funciona, prueba este:

<a href="whatsapp://send?text=urlencodedtext">Share this</a>
Vincent Decaux
fuente
3
Entonces también es posible sin un número de teléfono. Este documento se puede encontrar aquí: faq.whatsapp.com/en/general/26000030
Tim Vermaelen
1
Acabo de descubrir que ya no funciona correctamente. Simplemente funciona con número de teléfono. Sin un número de teléfono, debe usar api.whatsapp.com
Ricardo BRGWeb
@RicardoBRGWeb seguro de esto? Acabo de probar en mis navegadores web, funciona para mí sin ningún número, me propone la interfaz Web Whatsapp y compartir con un contacto
Vincent Decaux
@VincentDecaux funciona en navegadores de escritorio, incluso cuando se utiliza el modo de vista móvil. Pero no funcionará en los navegadores móviles para abrir aplicaciones empresariales de WhatsApp o WhatsApp. Probablemente hayan cambiado el enlace interno uri en la aplicación.
Ricardo BRGWeb
Ok, ¿intentaste mi segunda opción? bastante no probé en el navegador móvil, lo intentaré mañana
Vincent Decaux
14

Recientemente, WhatsApp actualizó en su sitio web oficial que necesitamos usar esta etiqueta HTML para poder compartirla en sitios móviles:

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

Puede reemplazar text=para tener su enlace o cualquier contenido de texto

Aadil Keshwani
fuente
Probé esto personalmente. Abre la aplicación, pero nada más.
HoldOffHunger
@HoldOffHunger porque necesita usar urlencode, de lo contrario no funcionará
Shiv Singh
@ Shiv: Ese no fue mi problema.
HoldOffHunger
Esto está funcionando para seguro ... ¿Alguna forma de insertar saltos de línea (introducir teclas) en el texto del mensaje?
cht
@cht es un poco tarde, pero puedes usar% 0D como saltos de línea
Elro444
11

ÚLTIMA ACTUALIZACIÓN

Ahora puedes usar la última API de whatsapp https://wa.me/ sin preocuparse por el agente de usuario, la API se encargará del agente de usuario.

Comparta texto precargado con la opción de selección de contacto en el cliente de Whatsapp respectivo (Android / iOS / Webapp):

https://wa.me/?text=urlencodedtext

Abra el cuadro de diálogo de chat para un usuario de WhatsApp en particular en el cliente de WhatsApp respectivo (Android / iOS / Webapp):

https://wa.me/whatsappphonenumber

Comparta texto precargado con un usuario en particular (combine los dos anteriores):

https://wa.me/whatsappphonenumber/?text=urlencodedtext

Nota :whatsappphonenumber debe ser el número de teléfono completo en formato internacional. Omita los ceros, corchetes o guiones al agregar el número de teléfono en formato internacional.

Para obtener documentación oficial, visite https://faq.whatsapp.com/en/general/26000030

Shri
fuente
wa.me/whatsappphonenumber/?text=urlencodedtext parece que no funciona
Kiran
7

Me temo que WhatsApp para Android no admite actualmente que se llame desde un navegador web.

Tenía el mismo requisito para mi proyecto actual, y como no pude encontrar ninguna información adecuada, terminé descargando el archivo APK.

En Android, si una aplicación quiere ser llamada desde un navegador web, necesita definir una Actividad con la categoría android.intent.category.BROWSABLE.

Puede encontrar más información sobre esto aquí: https://developers.google.com/chrome/mobile/docs/intents

Si echa un vistazo al archivo AndroidManifest.xml de WhatsApp, la única actividad con categoría NAVEGABLE es esta:

<activity android:name="com.whatsapp.Conversation"   android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:windowSoftInputMode="stateUnchanged">
        <intent-filter>
            <action android:name="android.intent.action.SENDTO" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="sms" />
            <data android:scheme="smsto" />
        </intent-filter>
    </activity>

He estado jugando con él por un tiempo, y no pude hacerlo funcionar. Lo máximo que obtuve fue abrir la aplicación WhatsApp desde Chrome, pero no pude encontrar una manera de configurar el contenido del mensaje y el destinatario.

Como no está documentado por el equipo de WhatsApp, creo que esto todavía está en progreso. Parece que en el futuro WhatsApp también manejará SMS.

La única forma de obtener más información es llegar al equipo de desarrollo de WhatsApp, lo que intenté, pero todavía estoy esperando una respuesta.

¡Saludos!

oliferna
fuente
1
¿Puedo pedirle que comparta información nueva sobre este problema aquí? Sería muy conveniente para mí también. De todos modos, gracias por la respuesta exhaustiva.
ccalboni
Pude ponerme en contacto con los desarrolladores de WhatsApp. Admitieron que esta característica no es compatible.
HoldOffHunger
7

En general, tiene sentido solo mostrar el enlace de Whatsapp solo en dispositivos iOS o Android, usando el script java:

   if (navigator.userAgent.match(/iPhone|Android/i)) {
      document.write('<a href="whatsapp://send?text=See..">Share on WhatApp</a>');
   }
Weidenrinde
fuente
¿Lo que no funcionó? ¿El enlace se mostró en un dispositivo no móvil? ¿En el dispositivo móvil el enlace no funcionó?
Weidenrinde
Se abre la aplicación WhatsApp. Pero no se muestra ni un mensaje de texto ni un mensaje. Probado en varios sistemas operativos y dispositivos. Envié un correo electrónico a los desarrolladores. Oficialmente no admiten este comportamiento "Desafortunadamente, eso no es compatible en este momento. Siempre estamos trabajando para mejorar nuestra aplicación y tomaremos en cuenta su sugerencia". (ticket # 172349248330585) He probado ~ 40 otros servicios, solo WhatsApp y Viber no admiten su propia documentación.
HoldOffHunger
7

Acabo de probar el whatsapp://esquema en mi súper viejo Android 2.3.3con Whats App 2.11.301, funciona a las mil maravillas. Parece ser solo la Whats Appversión. Como Whats Appestá obligando a todos a actualizar, debería ser seguro usarlo.

La Whats Appdocumentación también menciona ese esquema: http://www.whatsapp.com/faq/en/android/28000012

Estoy usando esto en un sitio de producción ahora y lo actualizaré aquí, si recibo alguna queja de los usuarios.

Editar (14 de noviembre): no hay quejas de los usuarios después de un par de semanas.

JonasB
fuente
6

Los documentos oficiales dicen que el uso: wa.me. No utilice wa.me. Solo pruébelo usted mismo: https://wa.me/?text=SomeTexttoShare Results for me:

No pudimos encontrar la página que estabas buscando

Parece que estás buscando una página que no existe. O una página que podríamos haber eliminado. De cualquier manera, regrese o asegúrese de verificar la URL, su ortografía e intente nuevamente.

Si desea compartir, debe usar absolutamente uno de los dos formatos de URL siguientes:

https://api.whatsapp.com/send?text=YourShareTextHere
https://api.whatsapp.com/send?text=YourShareTextHere&phone=123

Si está interesado en ver un proyecto que realiza un seguimiento de estas URL, ¡visítenos !: https://github.com/bradvin/social-share-urls#telegramme

URL de redes sociales

HoldOffHunger
fuente
Usar whatsapp://send?text=me funciona, con o sin codificación URL. Solo lo probé en iOS
Snowball
Hola, @Snowball: Gracias por el comentario, en realidad, eso solo funcionará cuando esté instalada la aplicación WhatsApp. Eso es normal para los customProtocol://action=?tipos de enlaces. Entonces, eso no hará nada en un escritorio. Usar eso requeriría detectar el sistema operativo, luego usar una URL para escritorio y otra para iOS. Pero eso es realmente un asunto completamente diferente de lo que pide el OP.
HoldOffHunger
3

Cambie los enlaces de compartir de WhatsApp según la plataforma, ya sea de escritorio o móvil.

Esto funciona con o sin proporcionar el número de teléfono en el enlace.

Para dispositivos móviles

   vm.LinkTextToShare = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href) ;

   window.open(vm.LinkTextToShare,"_blank");

Para escritorio

   vm.LinkTextToShare = 'https://web.whatsapp.com/send?l=en&text=' + encodeURIComponent(window.location.href) ;

   window.open(vm.LinkTextToShare,"_blank");
Sitaram
fuente
3

Este código me funcionó.

Después de hacer clic en el enlace, le pedirá que elija el contacto para compartir un mensaje.

<a href="https://api.whatsapp.com/send?text=enter message here">Click here to share on Whatsapp</a>

Puede agregar el atributo target = "_ blank" para abrirlo en una nueva ventana o pestaña.

No creo que se necesite el número de teléfono cuando alguien quiere compartir un mensaje o artículo en particular.

Rachit Mangi
fuente
¿Se puede abrir esto en el escritorio del navegador? reenviado a la página web.whatsapp?
Gumuruh
1

úselo como "whatsapp: // send? text =" + encodeURIComponent (su texto va aquí), definitivamente funcionará.

Jitendra Pal - JP
fuente
0

Intenta hacerlo de esta manera:

<a href="https://wa.me/(phone)?text=(text URL encoded)">Link</a>

Incluso puede enviar mensajes sin ingresar el número de teléfono en el enlace:

<a href="https://wa.me/?text=Hello%20world!">Say hello</a>

Después de hacer clic en el enlace, se le mostrará una lista de contactos a los que puede enviar su mensaje.

Más información en https://faq.whatsapp.com/en/general/26000030 .

¡Buena suerte!

Gustavo Cantero
fuente
whatsapp dice que no pudimos encontrar la página que estabas buscando
Reza Mortazavi
No entiendo. ¿WhatsApp muestra ese error? ¿Cuando?
Gustavo Cantero