Cómo agregar los botones de redes sociales a tu sitio web

Parece una tarea sencilla pero no lo es, agregar los botones de redes sociales a un sitio web puede transformarse en un trabajo frustrante si lo que buscas es personalizar el estilo visual.

En mi caso casi siempre utilice los plugins y widgets oficiales, esto es claramente lo más sencillo, pero también lo menos eficiente, al menos desde el punto de vista del rendimiento, muchos widgets tardan en cargar y aumentan los tiempos de carga de nuestro sitio web, sobretodo los que se cargan de forma asincrónica. También desde el punto de vista de lo estético las distintas redes sociales todavía no logran unificar un criterio de diseño, por lo tanto todos los botones juntos quedan bastante dispares entre sí.

Como agregar los botones de redes sociales

Para solucionar estos problemas, tanto de rendimiento como de estética, existe Sharer.js, una pequeña pero no por eso menos útil biblioteca JavaScript para que podamos agregar a nuestra web los distintos botones de compartir en las redes sociales de forma simple y rápida.

Cómo agregar los botones de redes sociales a tu sitio web

1. Instalación

Primero, para incorporar esta biblioteca a nuestro sitio podemos emplear NPM, Meteor o Bower, o simplemente instalar Sharer.js desde su CDN:

<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>

2. Colocar los botones

Sharer.js cuenta con la capacidad de emplear más de 20 redes sociales distintas, entre las que destacamos las más populares ya que probablemente interesan a la hora de compartir los artículos de nuestro sitio web.

  • Twitter
  • Facebook
  • Linkedin
  • Google Plus
  • Email
  • Whatsapp
  • Telegram
  • Pinterest
  • Tumblr
  • +20 opciones disponibles

Cada opción cuenta con distintas posibilidades de configuración, por ejemplo:

Facebook:

<button class="sharer button" data-sharer="facebook" data-url="http://www.kabytes.com">Share on Facebook</button>

Luego, el atributo data-url contiene la URL a compartir.

Email:

<button class="sharer button" data-sharer="email" data-title="Awesome Url" data-url="http://kabytes.com/" data-subject="Hey! Check out that URL" data-to="some@email.com">Share via Email</button>
  • data-title: título.
  • data-url: URL a compartir.
  • data-to: destinatario.
  • data-subject: asunto.

En conclusión, podemos observar emplear Sharer.js es muy sencillo, como siempre les recomiendo visitar el sitio oficial del proyector para conocer al máximo las opciones disponibles.

Web: Sharer.js

Categorizado en: