Beta Hacks - Marcadores Sociales

Esta tercera entrada muestra la manera de crear una línea de pseudo-iconos que permite a los visitantes, "guardar" el post en alguno de los múltiples servicios me marcadores online. Este hack, llamado Social Bookmarking, es original de BeautifulBeta y lo que sigue es una traducción de lo publicado originalmente más alguna información complementaria.

En todos los casos, es aconsejable hacer una copia de seguridad ANTES de hacer cualquier cambio a la plantilla.

Si quiere implementarse tal y como es mostrado en la página original, basta con hacer dos cosas:

1. Agregar el siguiente código en el HEAD de la plantilla:
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js'
type='text/javascript'/>

2. Buscar el siguiente código dentro del widget BLOG:
<p class='post-footer-line post-footer-line-3'/>
y reemplazarlo por el contenido de este archivo

Esto agregará iconos para DiggIt!, Del.icio.us, Blinklist, Yahoo, Furl, Technorati, Simpy, Spurl y Reddit. Pero, ¿no falta algo?

Lo primero que me llamó la atención del hack fue su parte visual. La simpleza de su implementación es asombrosa.

Al pasar el mouse, la imagen, se desplaza 1 pixel lo que hace que se produzca un efecto similar a un botón.

La forma de hacer esto está explicada en otra de las páginas de BeautifulBeta,
Pushbutton-style images and links.

El movimiento se logra utilizando CSS y creando una psudo-clase a:hover:
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
si colocamos la imagen dentro de un tag SPAN con ese nombre:

<span class="pushbutton">
<a href="direccion_url">
<img src="direccion_imagen"/>
</a>
</span>

tendremos el efecto deseado.

Lo que sigue requiere un conocimiento razonablemente avanzado de las plantillas y los lenguajes de programación web. Además, es aconsejable una gran dosis de paciencia, espíritu aventurero y estar dispuesto a "meter la pata".

Se ruega no enviar insultos ya que mi madre
es completamente ajena a estos desatinos.

Ahora está completo, sin embargo, hay algunas cosas que pueden personalizarse. La primera es subjetiva. Yo no quería que esto apareciera bajo cada post porque la carga de la página se resiente y si todos funcionan como yo, cuando una página tarda mucho en cargarse, la cierro y a otra cosa. Así que la modificación más importante era ubicar la rutina SOLO en las páginas que contuvieran iconos individuales.

El segundo cambio es el idioma. En lo posible, quiero que todos los textos aparezcan en castellano.

El tercero y ultimo es elegir cuáles son los iconos que quiero colocar.

Para hacer todo esto, hay que meter mano en los dos archivos que nos proporciona BeautifulBeta, bajarlos a la PC, modificarlos e insertarlos en la plantilla. De aquí en adelante, reconozco que las cosas se complican mucho porque los códigos son engorrosos y es fácil equivocarse. Por experiencia recomiendo copiarlo y editarlos con el block de notas y recién cuando tengamos decidido todo, insertarlos en la plantilla.

1. Para comenzar, ir a Diseño Editar HTML y expanadir los widgets. Luego, dentro del tag <b:skin> copiar el siguiente código:

/* Social Bookmarks */
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
.bookmark table {}
.bookmark td {}
.bookmark img {}

La clase bookmark la dejo vacía para que, una vez armado todo, dependiendo de los gustos de cada uno, del tipo de plantilla y de la cantidad de iconos que se pongan, cada uno diseñe la forma en que se verá. Si no se quiere hacer nada, puede dejarse así como están, no le hacen mal a nadie.

2. Para que sólo se vea en las páginas de ITEMS, es necesario condicionar la ejecución, de tal manera que vamos a la plantilla y buscamos el widget Blog:
</b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
dentro de este, el inicio de la siguiente sección:
<b:includable id='post' var='post'>
y dentro de esta, buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-3 /'>
y la reemplazamos por este código:

<p class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<span class='bookmark'>
<table align='left' cellpadding='0' width='100%'>
<tr>
<td width='%ancho para texto (20,30%)'>
<div expr:id='"sbtxt"+data:post.id'>
Cargando ...
</div>
<script type='text/javascript'>
showsbtext("sbtxt" + "
<data:post.id/>",0)
</script>
</td>
<td>
... aquí van a ir cada uno de los servicios ...
</td>
</tr>
</table>
</span>
</b:if>
</p>

3. Por último, buscamos el tag </head> y copiamos el siguiente código ANTES:

<script type='text/javascript'>
function showsbtext(id,index) {
var bookmarktext=document.getElementById(id);
var sbValues= new Array();
sbValues[0] = 'Bookmark:';
sbValues[numero] = '<strong>texto</strong>';
... cada uno de los servicios que vamos a poner ...
sbValues[numero] = '<strong>texto</strong>';
sbValues[14] = 'Add to <strong>Blogmarks</strong>';
document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
}
</script>

Donde:
numero es el número de orden del servicio, ordenado de izquierda a derecha (1, 2, 3, etc.) y texto es el texto que se va ver cuando pasamos el mouse sobre el icono.

4. Como se ve, quedan un montón de agujeros a llenar, aunque, en realidad sólo uno es el importante. Debemos definir cuáles son los servicios que queremos colocar y cuál es el código a escribir para cada uno de ellos.

En 3spots se han tomado el trabajo de escribir una serie de artículos sobre estos servicios y la información que dan es muy útil:
en Social Bookmark Tools to View, Search and more... hay una somera explicación del tema
en ALL Social that CAN bookmark hay un listado de casi todos los servicios, en Social Bookmarking Buttons you can Hotlink hay botones (iconos) de unos 200 servicios. Pero el que impresiona por su rigurosidad es 30 Social Bookmarks 'Add to' footer links for blogs donde hay un listado de servicios con los códigos necesarios para incluirlos en los diferentes blogs.

Voy a mostrar un ejemplo. Por ejemplo, si quisiera colocar un icono para Blogmarks, nos dice que el código es el siguiente:

http://blogmarks.net/my/new.php?
title=<$BlogItemTitle$>&url=<$BlogItemPermalinkURL$>

Pero claro, los códigos no pertenecen a Blogger Beta así que debemos cambiarlos por sus equivalente:
<$BlogItemTitle$> debe ser reemplazado por data:post.url
y <$BlogItemPermalinkURL$> debe ser reemplazado por data:post.title

Lo razonable es, seleccionar los servicios que queremos incluir, copiar los códigos y reemplazar los nombres de los datos, lamentablemente, hay más complicaciones ya que no es tan simple que Blogger acepte el código así como así. Empiezo por el final. Para insertar BlogMarks, debemos escribir esto:

cada servicio dentro de un tag SPAN
<span class='pushbutton'>

este es el código de ESTE servicio
cada uno de los que coloquemos, será diferente
<a expr:href='"http://blogmarks.net/my/new.php?
title=" + data:post.title + "&amp;
url=" + data:post.url'

esto es el código del hack
expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"'
expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"'
lo que se modifica en cada uno es el número de orden
que sera consecutivo y tiene que ver con el orden que pongamos en el script
(el 0 es común a todos)
target='_blank'>
aquí debemos poner la dirección de la imagen que vamos a usar
<img alt='Add to Blogmarks' src='direccion_imagen'/>

</a>

</span>

Tenemos que tener muy en cuenta que un tag como:
<a href="......."
debe ser escrito así:
<a expr:href=' "......." '
entre comillas simples (los espacios sólo son para que se vea)

También hay que saber que, dentro de esas comillas simples, debe cambiarse el operador:
& por &amp;

Por último, una vez que tenemos definidos los servicios, completamos el script anterior, poniéndolos
en el mismo orden en que se verán. Por ejemplo:

sbValues[1] = 'Add to <strong>BlinkList</strong>';
sbValues[2] = '<strong>Digg It!</strong>';
sbValues[3] = 'Add to <strong>Delicious</strong>';
sbValues[4] = 'Add to <strong>Technorati</strong>';
.......
sbValues[13] = '<strong>Googlize This!</strong>';
sbValues[14] = 'Add to <strong>Blogmarks</strong>';

MARCADORES SOCIALES (Social Bookmarking)

beautifulbeta

Social Bookmarking revisited

Pushbutton-style images and links

30 Social Bookmarks 'Add to' footer links for blogs