Compartir contenido en Whatsapp usando jQuery 2 (Solo Móviles)

jQuery Tutoriales

Demo Github

En esta oportunidad les quiero mostrar como compartir un enlace por Whatsapp mediante uno de los mejores frameworks de javascript (jQuery).

NOTA: Para ver la demo, necesitas abrirla desde tu dispositivo móvil que cuente con la aplicación Whatsapp instalada.

estilos.css

Creamos los estilos CSS para nuestro contenido:

Listo con eso le damos los estilos a nuestro botón compartir Whatsapp ydemás contenidos.

Ahora necesitamos un botón html para poder compartir contenido:

Y también agregamos nuestra la función jquery para Compartir en diferentes dispositivos móviles:

Como verán estoy usando la función encodeURIComponent() la cual codifica un componente URI. Esta función codifica caracteres especiales. Por ejemplo, codifica los siguientes caracteres:, /? : @ & = + $ #
Listo ya hemos terminado !

NOTA: Repito de nuevo que  para ver la demo, necesitas abrirla desde tu Celular que cuente con la aplicación Whatsapp instalada.

Puedes ver la DEMO .

Puedes descargar el código alojado en nuestro repositorio Github

Sigueme en Twitter: @pepoflex
Espero les sirva de mucho este tutorial.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required

3
Comentarios

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Tu Página web en dispositivos móviles: por qué hacer pruebasPorque debes hacer pruebas de tu página web en dispositivos móviles | Buenas Prácticas de Diseño WebImporta Código de GitHub a Visual Studio 2015 | Blog Collective Cloud Peru Recent comment authors
  Subscribirse  
newest oldest most voted
Notificar a
trackback
Importa Código de GitHub a Visual Studio 2015 | Blog Collective Cloud Peru

[…] Listo, nos aparecerá un mensaje indicando que nuestro repositorio se clono correctamente. Para este ejemplo yo clone los archivos del Tutorial: Compartir contenido en Whatsapp con jQuery. […]

trackback
Porque debes hacer pruebas de tu página web en dispositivos móviles | Buenas Prácticas de Diseño Web

[…] por ejemplo el usuario decide compartirlo en WhatsApp y en nuestra web no tenemos el icono para compartir contenido en WhatsApp, este va ver nuestra web muy anticuada, poco dinámica y muy limitada para interactuar con las […]

trackback
Tu Página web en dispositivos móviles: por qué hacer pruebas

[…] por ejemplo el usuario decide compartirlo en WhatsApp y en nuestra web no tenemos el icono para compartir contenido en WhatsApp, este va ver nuestra web muy anticuada, poco dinámica y muy limitada para interactuar con las […]