Botón animado para compartir en redes sociales

Estos últimos meses vi pasar decenas de alternativas a la hora de crear un botón para compartir en las redes sociales, algunas mejores que otras, pero la mayoría validas. En esta oportunidad encontré otra opción que cuenta con una bonita animación, además de ser una solución basada íntegramente en CSS y jQuery.

Share Button es una alternativa sencilla para agregar a nuestros sitios la capacidad de compartir en redes sociales, este recurso se presenta como un plugin para jQuery y su instalación es de lo más sencilla.

A diferencia de otras alternativas esta cuenta con la ventaja de tener un peso insignificante, apenas 6kb en su versión simplificada, valor que se reducirá al comprimirse mediante gzip en el servidor. Un peso muy aceptable si tenemos en cuenta la función que cumple.

botones de compartir con animacion

El autor de esta herramienta expone varias razones para emplear su trabajo, una de ellas es su simplicidad, algo que se traduce directamente en muy pocas lineas de código que se anexarán a las de nuestro proyecto sin recargarlo. Otro aspecto que destaca es su bonita estética, la misma se encuentra acompañada de una animación. El botón no muestra directamente los enlaces a las distintas redes sociales, estos se despliegan al accionarse el recurso.

Algo que destaco de esta herramienta es que las url a compartir se informan directamente al momento de inicializar el plugin, algo que resulta conveniente si buscamos una solución que afecte mínimamente la estructura HTML de nuestro proyecto.

Ejemplo de uso:

$('.element').share({
  url: 'http://www.youtube.com/watch?v=oHg5SJYRHA0',
  text: 'check out this awesome video guys!'
})

También podemos configurar de forma individual la información mostrada por cada uno de los botones:

facebook: {
  name: 'title'
  link: 'url'
  image: 'share image'
  caption: 'picture caption'
  text: 'short description'
}

twitter: {
  text: 'tweet text'
  link: 'url'
}

gplus: {
  link: 'url'
}

Este proyecto se encuentra inspirado en una captura de Dribbble y a un experimento de CSS Deck, ademas la licencia permite su libre uso tanto en proyectos personales y comerciales.

Web: Share Button

Categorizado en: