El botón social definitivo: shareNice

El botón social definitivo: shareNice

Escrito por: Redacción    30 abril 2012     2 minutos

Con shareNice tendrás los botones sociales que desees agrupados en uno.

Seguimos con artículos relacionados con los botones sociales, ya que se trata de uno de los aspectos que más han cambiado en los blogs en los últimos años. No hay bitácora que se precie que no tenga como mínimo dos o tres, pero llega un momento que tras querer añadir tantos botones pecamos de saturar la página. Es últil tener los botones al completo mostrando el contador de número de veces que se ha compartido un artículo. Por otra parte seguro que los partídarios del minimalismo preferian tener solo uno.

El botón social definitivo es shareNice, simple, sencillo, fácil de configurar e integrar, y sobre todo, independiente de plataformas externas. Solo un poco de HTML, y algunos parametros de personalización y tendremos un botón que al seleccionarlo nos mostrará los servicios que queramos para que nuestros lectores puedan compartir.

En su documentación en GitHub tenéis ejemplos y modos de funcionamiento. Simplemente teneis que pegar el siguiente código dentro del head de vuestra página.

<script src="http://sharenice.org/code.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="http://sharenice.org/main.css" />
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://sharenice.org/ie6.css" >
<![endif]-->

Y el otro en el body.

<body onLoad="shareNiceLoad()">
<!-- Este es el div que tienes que poner donde quieras que aparezca -->
<div id="shareNice" style="float:left"></div>
</body>

Para terminar puedes personalizar el div con los siguientes campos:

  • services: Aquí puedes listar separando con comas los servicios que quieras que aparezcan.
  • share-label: El nombre de la etiqueta del botón, por ejemplo «Compartir».
  • color-scheme: Elige el color usando las palabras «black», «blue», «green», «orange», «pink» y «red».
  • icon-size: Puedes poner «16» o «32», esto modifica el tamaño del botón.
  • panel-bottom: Elige entre «default» o «plain» para especificar el tipo de caja.

Un ejemplo usando las propiedades anteriores quedaría de esta forma:

<div id="shareNice" color-scheme="black" icon-size="32" share-label="Compartir" panel-bottom="plain"></div>

Más información | Web oficial