Los botones de redes sociales son elementos indispensables que nuestra página web debería tener, ya que estos nos ayudan a extender el alcance que nuestra web pueda tener, además de aumentar la interactividad del usuario, al compartir un enlace de nuestro sitio. En este tutorial veremos cómo crear e implementar botones para compartir en nuestro sitio, para las principales redes sociales.
Este ejemplo basa su funcionamiento en la creación y apertura de los enlaces de forma dinámica median JQuery, se utilizarán funciones para obtener el enlace y título de la página.
El diseño de los botones consiste en contenedores <a> a los cuales se le asignará como fondo el icono de la red social que representan.
Botón de Facebook, Twitter, Google+
Los botones Facebook, Twitter, Google+, serán enlaces web, los cuales contienen diferentes parámetros.
Boton para compartir de WhatsApp y Correo electrónico
Los botones de WhatsApp y correo electrónico tienen un funcionamiento diferente, ya que no hacer referencia hacia una página web, por el contrario envía un comando para lanzar una aplicación o activar una función en el navegador.
El comando whatsapp://send lanzará la aplicación WhatsApp (si es que se encuentra instala en el dispositivo movil), enviándole los parámetros indicados, ya sea el título y enlace, además de la acción a realizar, en este caso será compartir.
Correo electrónico
El comando mailto:? hará que el navegador lance el cliente de correo predeterminado y le envíe los parámetros de subject y body. En Google Chrome el usuario debe de activar previamente esta acción para que tenga efecto.
Implementado
Leeremos la URL de la página con window.location.href y el título con document.title, además ya que estos serán integrados en una dirección web deberán ser codificados utilizando la función encodeURIComponent. Ya que la función se ejecutara con todos los elementos que contengan la clase shared, es necesario distinguir en que botón se realizó el clic, para esto verificaremos que clase adicional tienen, y realizaremos la acción correspondiente.
Código completo
Resultado final:
El resultado final muestra los 5 botones para compartir, además debido a que los botones son creados con CSS estos puede modificar su forma como nosotros queramos.
