shareNice se presenta como una variante del
gadget AddThis con la diferencia de ser de código abierto lo que permite descargarlo y usarlo libremente aunque esto no es necesario ya que también es posible utilizar el script que ellos proveen y por lo tanto, no necesitamos hacer ningún tipo de instalación extra.
La idea es permitir que cada usuario lo adapte a sus necesidades o gustos personales de manera sencilla y, de ese modo disponer de un botón genérico para compartir entradas en las redes sociales.
Hasta ahí todo parece bien y es una alternativa razonable ya que es mucho más flexible que otros sistemas y mucho menos intrusivo pero ... cuando uno trata de probarlo, algo parece fallar en alguna parte; incluso, en algunos de los sitios que ellos mismos sugieren ver para probar sus características, tampoco parece andar. Me da la impresión que lo han armado basándose en algún concepto de diseño erróneo o que no tiene en cuenta las distintas alternativas que puede tener una página web y por lo tanto, ciertas propiedades del CSS que utilizan hacen que las cosas se nos compliquen aunque, bastaría cambiar un par de detalles para hacerlo operativo. En realidad, desconozco si eso es un error en si mismo tal como imagino pero, como usuario, tampoco me importa a sí que me limito a tratar de solucionarlo porque la idea me sigue pareciendo interesante.
Lo usamos fácilmente, bastaría poner esto antes de </head>
<script src="http://sharenice.org/code.js" type="text/javascript"></script>
y luego, poner un DIV allí donde quisiéramos que se mostrara el botón:
<div id="shareNice"></div>
Así, sin opciones extras, veríamos el ícono y al poner el cursor encima, se mostraría la ventana con los íconos por defecto:
Lamentablemente, esa ventana se muestra en cualquier parte así que acá le he agregado dos reglas de estilo; en la primera, le agrego position:relative porque la ventana modal con los íconos tiene definida una posición absoluta y por lo tanto, se abrirá en cualquier parte, dependiendo de cuál sea el contenedor; también le agrego display: inline-block pra que no ocupe todo el ancho y que pueda alinearse con otros contenidos; la segunda regla, cambia las posiciones absolutas de tal modo que la ventana se abra encima del botón:
<style>
#shareNice {
display: inline-block !important;
position: relative;
}
#shareNice-wrapper {
left: 0 !important;
top: -35px !important;
}
</style>
allí, con distintos valores de left y top, podemos ubicarla donde nos guste, teniendo en cuenta que la posición 0 0 es el botón en si mismo.
Ahora, las opciones que se agregan como atributos en el DIV:
data-services es la lista de los dominios de las redes sociales que queremos incluir y se separan con comas
data-share-label nos permite establecer el texto a mostrar o no poner ninguno
data-color-scheme define el color base y puede ser black, blue, green, orange, pink, red o cualquier otro color
data-icon-size es el tamaño el botón y puede ser 16 o 32
data-panel-bottom es el logo inferior, si no queremos que se ve, ponemos plain
data-share-zindex solo lo usaremos para colocar un valor en la propiedad z-index si es que se requiere
Aquí hay un ejemplo concreto:
<div id="shareNice" data-share-label="" data-color-scheme="black" data-icon-size="16" data-panel-bottom="plain" data-services="blogger.com,email,evernote.com,facebook.com,google.com,linkedin.com,plus.google.com,stumbleupon.com,www.tumblr.com,twitter.com">
</div>
¿Cuáles son los dominios a poner? ¿Dónde está la lista? Acá algunos de los que encontré y vi que funcionaban; hay más pero los desconozco:
bit.ly,blogger.com,delicious.com,digg.com,email,evernote.com,facebook.com,google.com,linkedin.com,myspace.com,plus.google.com,reddit.com,stumbleupon.com,www.tumblr.com,twitter.com
