Comparta su sitio con ShareThis

by webmonkey - 8 Septiembre 2008

Share ThisEl siguiente artículo fue publicado originalmente en inglés por Webmonkey.com bajo una licencia Creative Commons.
¿Quién puede llevar la cuenta de la creciente lista de marcadores (bookmarking), agregadores sociales (social aggregators) y servicios de micro-blogging? Yo no, ShareThis puede.

ShareThis es un pequeño widget que se puede agregar en cualquier página para ayudar a los usuarios a compartir su contenido. Webmonkey lo emplea al pie de casi todas sus páginas, incluyendo ésta.

En este tutorial, veremos los conceptos básicos para usar ShareThis, y luego lo estudiaremos más en detalle. Al final de este artículo, podrá hacer que su widget luzca como usted prefiera y que emule algunas de las características más comúnmente deseadas, como la capacidad de enviar por e-mail sus artículos a un amigo.

El botón estándar de ShareThis

Antes de ser creativos, tenemos que comenzar con algo simple.

Vaya a ShareThis y utilice el standard website customizing tool. Le pedirá registrar una cuenta de ShareThis, pero esto es opcional. El registrarse permite obtener estadísticas avanzadas de uso. Como mínimo necesitará una identificación como editor de contenidos, que puede conseguirse sin registrarse. Verá su identificación de editor mezclada dentro del código producido por la herramienta mencionada.

El siguiente es un ejemplo del código de ShareThis:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

Para ver como luce el botón ShareThis estándar, pegue el código en una página web. Puede incluirlo en la plantilla a ser utilizada en cada página de su sitio, asumiendo que se use un sistema de gestión de contenidos. Comúnmente el código de ShareThis es usado directamente antes o después del contenido principal de una página. Tiene mejor sentido ponerlo al final del mismo.

Cuando se carga una página con el código de ShareThis, se ve algo similar a lo siguiente.

Image:ShareThisImg1-1.png
Haga clic en el botón de ShareThis y verá el widget completo:

Image:ShareThisImg1-2.png

Cambiando las lengüetas

Hay algunas opciones disponibles inclusive para el widget ShareThis básico. Por defecto, hay tres lengüetas: web, post, y e-mail. Si usted desea solamente mostrar una o dos de ellas, puede hacerlo con solo un par de golpes de teclado.

Primero, echemos una mirada al código y veamos qué es lo que hace por defecto. Estamos importando un Javascript de ShareThis. Según el código expuesto anteriormente, vemos que el archivo del Javascript se encuentra en w.sharethis.com/widget/. El texto que se encuentra después del signo de interrogación en el URL son pedacitos de información (los programadores los llaman “argumentos”, y están dispuestos a morir por dicho término) que definen cómo queremos que actúe el widget.

El primer argumento indica las lengüetas que deseamos:

tabs=web%2Cpost%2Cemail

%2C es el código de URL para representar una coma. En esencia, tenemos una lista de lengüetas. Para eliminar una lengüeta, solo es necesario quitar su referencia de la lista. Si deseamos solamente lengüetas de la web y de email, el argumento sería:

tabs=web%2Cemail

Quité el %2C redundante porque no tiene ningún sentido tener dos comas en una línea.

Guarde su página y recarguela. Ahora al presionar el botón ShareThis, verá solamente las dos lengüetas que pasamos al widget:

Image:ShareThisImg2-1.png

Cambiando los sitios/servicios

Ahora que usted se encuentra a gusto corrigiendo el código de ShareThis, intentaremos cambiar los servicios disponibles para los usuarios del widget. Por defecto, muestra los 10 servicios más populares (Digg, Reddit, Facebook, etc.).

Son los que la mayoría del público prefiere. Pero usted no es la mayoría. Usted quiere más control. La configuración por defecto no es suficiente.

Lo primero que necesitamos hacer es localizar el argumento de los servicios en el código de ShareThis. ¿No lo encontró todavía?

OK, es un pregunta con trampa. No existe. Debemos agregarlo. Digamos que deseamos incluir solamente Reddit y Digg. Tenemos que agregar el siguiente código inmediatamente después del argumento de las lengüetas (es decir, luego de “email”):

&services=reddit%2Cdigg

& es usado para separar los argumentos. Le dice a ShareThis dónde terminan las lenguetas y en dónde empiezan los servicios.

El siguiente es el código completo para mostrar unicamente Reddit y Digg:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cemail&services=reddit%2Cdigg
&charset=utf-8&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

Aquí se puede observar que es lo que se ve al limitar los servicios:

Image:ShareThisImg3-1.png

Como hemos visto, cambiar las lengüetas y los servicios en el widget de ShareThis es simple. De hecho, se podría haber utilizado el formulario proporcionado para realizar estos cambios sin tener que tocar el código. El resto de este tutorial es un poco más complicado. Afortunadamente, ahora usted tiene cierta experiencia corrigiendo el código de ShareThis. No tendrá mayores inconvenientes.

Venga la complejidad!

Agregando múltiples widgets a una página

Hasta ahora hemos usado solo un botón de ShareThis. Para ello, solo copiamos el código que nos fue dado en donde quisimos que apareciera. El botón se inicializa y agrega en la página en el mismo lugar. Para utilizar más de un botón, necesitamos inicializarlo al comienzo de la página, y después escribir una línea separada de Javascript por cada sección en la que queramos que el botón aparezca.

Entonces, ¿por qué compartir múltiples ítems de una página? ¿Qué pasa con los archivos de un blog? ¿Y con una galería de fotos? Dondequiera que mostremos múltiples elementos, usted deseará que sean compartibles.

El código de inicialización, por suerte, es el mismo snippet que hemos usado con anterioridad. La diferencia está en el encabezado (<head>) de nuestro HTML:

<html>
<head>
<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>
</head>

Ahora, para agregar botones de ShareThis a la página, va a necesitar agregar el siguiente código por cada ítem a compartir:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’
}, {button:true});
</script>

Veamos los distintos elementos que componen el botón ShareThis.

  • title: es el Asunto del e-mail a enviar, la descripción en delicious, etc.
  • url: es el enlace directo al elemento que se quiere compartir. Como se comparten más de un elemento, es probable que no sea el URL de la página sino un enlace permanente a un URL diferente (por ejemplo, a la entrada de un blog).
  • button:true le dice a ShareThis que se quiere usar el botón por defecto. Más adelante veremos un par de métodos parar cambiar el diseño del botón.

Hasta aquí hemos creado un botón básico de ShareThis y agregado múltiples versiones del mismo en una página. Veamos cómo podemos personalizarlo a nuestro gusto.


Cambiando el ícono y el texto de ShareThis

Por defecto, los botones de ShareThis tienen su ícono al lado del texto que dice (que sorpresa!) “ShareThis”. Pues bien, puede que usted desee cambiar el botón por completo, y de hecho se puede. Hay diferentes formas de hacerlo. En esta sección utilizaremos el método que requiere menos código

Para cambiar el texto del botón de ShareThis, necesitamos agregar un argumento al código de inicialización. Esto es similar a lo que hicimos cuando cambiamos las lengüetas. Por lo tanto, busque un lugar después de un & y agregue buttonText=Monkeys+Share+Stuff&amp;

Ahora nuestro código de inicialización será algo como lo siguiente:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail
&buttonText=Monkeys+Share+Stuff&charset=utf-8&style=default
&publisher=”’Publisher_ID_Here”'”>
</script>

Y el botón ShareThis mostrará el nuevo texto.

Image:ShareThisImg4-1.png

Por mucho que nos guste el ícono de ShareThis, queremos en realidad algo que vaya mejor con el texto. Nos gustaría usar el favicon de Webmonkey, el que aparece en la barra de localización de nuestro sitio.

Para cambiar el ícono de ShareThis, necesitaremos agregar algo de CSS para sobreescribir el estilo por defecto. Agregue el siguiente código en su hoja de estilo o entre tags <style> en el encabezado <head> de su documento.

.stico_default
{
background: transparent url(http://www.webmonkey.com/favicon.ico)
no-repeat scroll 0px 0px !important;
}

Ahora recargue la página y su botón de ShareThis será un poco más ‘Monkey’:

Image:ShareThisImg4-2.png

Genial, no? Juntemos este conocimiento con un par de cosas que hicimos antes y creemos un servicio “Enviar por email a un amigo”.

ShareThis para enviar por email a un amigo

Ah, el viejo recurso de la web: enviar por e-mail a un amigo. Para crear esto con ShareThis, necesitamos quitar las lengüetas “Social” y “Post”, modificar el texto, y cambiar el icono por un bonito sobre.

Probablemente esté pensando que ya aprendimos cómo hacer estas cosas. Sip. Ahora estamos combinando todo. Si usted quiere ver cómo, siga leyendo.

En la sección <head> de su página, inicialice ShareThis:

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=email&charset=utf-8
&style=default&publisher=”’Publisher_ID_Here”'”>
</script>

Nótese que en los argumentos de las lengüetas tienen solamente un ítem: “email”. ¡Eso es lo que queremos!

También debemos cerciorarnos que el texto diga “Enviar por email a un amigo”, así que necesitamos cambiar el buttonText:

<script type=”text/javascript” src=”http://w.sharethis.com/widget/?tabs=email&buttonText=Enviar+por+email+a+un+amigo
&charset=utf-8&style=default&publisher=”’Publisher_ID_Here”'”></script>

Luego necesitaremos cambiar la entrada del CSS para que muestre un sobre como ícono. Intente esto:

.stico_default
{
background: transparent url(http://www.webmonkey.com/mediawiki/images/Email_envelope.gif) no-repeat scroll 0px 0px !important;
}

Finalmente, vaya a la sección de su página en donde desee ver el botón y pegue el código de ShareThis:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’
}, {button:true});
</script>

Y listo, sus usuarios enviarán emails a sus amigos de su Web site:

Image:ShareThisImg5-1.png

Haga su propio botón de ShareThis desde cero

Hasta ahora siempre que hemos cambiado el diseño del botón de ShareThis, hemos mantenido la misma plantilla básica: un icono seguido por un poco de texto enlazado. ¿Pero que pasaría si se desease un diseño totalmente diferente? La API puede hacerlo.

Para crear un botón desde cero, necesitaremos escribir todo el HTML necesario, incluyendo el vínculo que se cliquea para llamar al código de ShareThis. Yo creé una imagen enorme-pero-diferente para utilizar como mi botón. Use el siguiente código para hacer que dicho ícono sea un botón de ShareThis:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’,
summary:’Here is a little more about the thingy I am sharing.’
}, {button:false});
document.write(‘<div id=”mysharebutton”><a href=”javascript:void(0);”><
img src=”http://howto.wired.com/mediawiki/images/Click2share.png” border=”0″
/></a></div>’);
thisobj.attachButton(document.getElementById(“mysharebutton”));
</script>

Hay solamente un par de cosas que observar. Primero, la línea de SHRETHIS.addEntry se modificó mínimamente. En vez de button:true, ahora dice buton:false. Dicha línea le dice a ShareThis que no muestre el botón por defecto. Le deja saber que estamos usando nuestro propio ícono.

Luego, note que hacemos que el Javascript retorne HTML. Este HTML crea nuestro propio botón de ShareThis con su propio enlace. El href en el enlace no va en ninguna parte. Esto es porque queremos que ShareThis asuma el control cuando se hace clic en el botón y nos muestre su clásico menú.

¿Cómo hace ShareThis para ejecutarse cuando se hace clic en nuestro nuevo botón? Tenemos que decirle por medio de la función attachButton. Le indicamos a ShareThis la identificación de nuestro botón: “mysharebutton” en este caso, según lo declarado en el div contenedor.

Guarde su página, cárguela nuevamente, y haga clic en el botón.

¿Molesta que el menú abra debajo del botón? Yo quiero que aparezca a la derecha del botón y al tope de la línea. ShareThis permite hacer esto fijando los valores del offsetLeft y del offsetTop. Éstos se cuentan desde el rincón derecho inferior del botón. Valores mayores mueven la caja a la derecha y abajo, y se cuentan en pixeles.

Intente lo siguiente:

<script language=”javascript” type=”text/javascript”>
var thisobj = SHARETHIS.addEntry({
title:’This title shows up when I share’, url:’http://full_url.to/permalink.html’,
summary:’Here is a little more about the thingy I am sharing.’
}, {button:false, offsetLeft: 10, offsetTop: -128});
document.write(‘<div id=”mysharebutton”><a href=”javascript:void(0);”><img
src=”http://howto.wired.com/mediawiki/images/Click2share.png” border=”0″ /></a></div>’);
thisobj.attachButton(document.getElementById(“mysharebutton”));
</script>

Fijé el offsetLeft en 10, solo para dejar un poco de espacio entre la caja y el botón. Luego fijé el offsetTop en -128. ¿Qué? ¿Negativo? Usando un número negativo, se puede elevar la caja en vez de moverla hacia abajo. Elegí -128 porque nuestro botón es 128 pixeles de altura.

Lecturas sugeridas

Ahora que usted sabe un montón sobre ShareThis, espero que tenga un montón de ideas sobre cómo hacerlo propio.

ShareThis tiene algo de documentación bajo la forma de preguntas hechas con frecuencia, de modo que es fácil de leer. Compruebe su
FAQ para desarrolladores, así como el FAQ para creadores de contenido..

Feliz Sharing!

Leave a Reply