JMiur [E]

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

  • 23 comentarios:

    Anónimo  

    Hola JMiur, confieso que tengo el código fuente de tu blog en el bloc de notas para ir espiandolo, espero que no te importe. (aunque poco tiene que ver la plantilla con el código que se genera cuando se publica)

    Me ha llamado la atención el que hayas sido capaz de modificar la frase de los comentarios: Tienes una cuando no hay comentarios, una cuando hay UN comentario y otra cuando hay más de uno. Como lo has hecho?

    No tienes activados los backlinks en tus posts? te linkee uno desde mi blog pero no aparece el backlink. Soy yo o los trackbacks de blogger no van todo lo bien que deberían?

    Saludos!

    Responder
    JMiur  

    Primero que nada, SI, ME IMPORTA:
    LO CONSIDERO UN HONOR
    Si miras mi blog, verás que soy un enemigo de cualquier supuesto derecho a la propiedad intelectual y que me rijo por una frase que repito una vez más:
    LO PUBLICADO ES PUBLICO
    Personalmente, veo, analizo, copio y guardo decenas de códigos fuentes. ¿Hay otra forma de aprender?

    Segundo, es cierto, había inhabilitado los backlinks cuando estaba armando la plantilla ya que tenía un problema con el diseño. Luego, me olvidé de ellos. Me has obligado a corregirlo. :)

    Por último, debes tener algún poder extrasensorial, ayer estuve mirando tu página y estaba por hacer un post agradeciendo tu referencia y recomendándola ya que me pareció MUY INTERESANTE. Y como si fuera poco, estoy preparando otro tratando de explicar cómo castellanizar la plantilla. Espero tenerlo listo esta semana y que responda tus dudas.

    Responder
    Anónimo  

    Me gusta esa filosofía, la aplico totalmente a todo lo que hago, y cierto, es la mejor forma de aprender (por lo menos para los que nos tomamos esto como un pasatiempo)

    muchísimas gracias por añadirme a tu blogroll, ahora mismo te añado al mio. Eres la primera persona que me linkea, ya que nadie sabe (sabía) que mantengo ese blog, aun lo llevo en "privado" (ya empezare a anunciarlo un dia que no me de pereza)

    Solo una observación, no es el Zulú corp. es el Zulo corp. (me ha hecho reir la errata y todo xD ). Zulo significa "agujero" en vasco, y se llama así por... bueno, es una historia muy larga (quizá de para un post xD)

    Sigue con tu trabajo, de verdad que es un trabajo de calidad, util e interesante, en lo referente a "hackear" Blogger es de lo mejor que he visto (y creeme que ultimamente he visto MUCHO).

    Saludos!!

    Responder
    JMiur  

    Lamento la confusión en el nombre, ya la he corregido. Espero que la explicación del nombre no se haga esperar demasiado y te decidas a escribirla.

    Responder
    Anónimo  

    Hola :)
    Solo quería saber si debo registrarme en todos los sitios.
    Merci y Saludos

    Responder
    JMiur  

    No, tú no. el visitante que hace click si. Cada usuario agregará el post en su servicio.

    Responder
    Anónimo  

    Hola Jmur, Merci por la respuesta mirare de ponerlo.

    Responder
    Sem  

    Buenas Jmiur, ante todo felicitarte por tu trabajo me parece muy interesante y me creo que tu blog ofrece mucho; desde curiosidades asta enseñar rincones del blog que pocos nos imaginamos.

    Soy nuevo en esto de los blogs, he tenido que crearme uno para darme a conocer, pero claro soy infografista...de codigo "cortito con sifón" pero desde que estoy en esto no dejo de mirar tu pagina...

    Gracias por la labor que estas realizando.

    Responder
    JMiur  

    Gracias, Sem, me alegra que te haya ayudado :)

    Responder
    Rom  

    Buenas noches mi estimado.
    Y si algo complicado pero no tanto, sin embargo, he encontrado 2 pequeños problemas. He tomado como referencia tus marcadores sociales y copiado el link de afiliación y en el de BLINKBITS me dice que source_url debe terminar en punto y coma (;).

    Lo elimine para seguir y arrojó un segundo error en el marcador de Windows Live Favorites en que me dice que mkt debe terminar en ;

    En la de Mr. Wong me dice que es bm_url el que debe terminar en ;

    No estoy seguro que pueda ser. No copio el código porque aparte de largo no se puede en este blogger, pero si tienes tiempo como para asesorarme, puedo enviartelo por email.

    Desde ya te agradezco mucho, por tu tiempo en compartir así como tu tiempo en responder.

    Un saludo desde Lima, Perú

    Responder
    JMiur  

    Si, envíalo por mail y me fijo.

    Responder
    Anónimo  

    Me parece interesante e instructivo para agregar mi blog a marcadores sociales pero me gustaria agregar los que estan en español y no encuentro una guia en ningun sitio, me refiero a favoriting.com, webgenio.com y los que haya en español más que los que estan en inglés.

    Responder
    JMiur  

    Si sabes los códigos "normales", sería posible traducirlos para agregarlos a Blogger.

    Si no me equivoco, para favoriting.com el enlace sería algo así:

    expr:href='"http://www.favoriting.com/nuevoFavorito.asp?qs_origen=2
    &amp;qs_url=" + data:post.url
    + "&amp;qs_title=" + data:post.title'

    Todo junto, claro.

    Responder
    Romina  

    Hola, JMiur, hace un mes apoximadamente comence con un nuevo blog, para el cual seleccione tu plantilla Beckett Beta, he estado haciendole algunas modificaciones a la plantilla, la mayoria con tu inmensa ayuda. Pero he tenido dos problemas y no logro solucionarlos, en mi blog original http://blogingenios.com.ar/ los relacionados aparacen en la pagina de cada post, pero la imagen q utilice aparece tambien el la pagina principal, y queda fea. El otro problema es que tarde dos dias entre hacer los marcadores sociales circulares como queria y lograr incorporarlos a la plantilla, pero los mismos se superponen con la imagen de los post relacionados. Los tengo colocados en un blog de pruebas http://ubmail.blogspot.com/ quiza puedas mirarlo a ver q me aconsejas, seguramente hice algo mal. Muchas gracias. PD:de paso mira el final de la plantilla donde esta mi agradecimiento hacia tus enseñanzas.

    Responder
    JMiur  

    Romina:

    Para "esconder" la imagen de los posts relacionados, lo que podemos hacer es esconder todo ese bloque con un condicional:

    <b:if cond='data:blog.pageType == "item">
    <div class="post-footer-line post-footer-line-4"/>
    ..................
    </div>
    </b:if>

    Con esas líneas en negrita, le decimos a Blogger que sólo cree esa línea en las páginas individuales y no en las demás.

    El tema de los marcadores sociales, podría solucionarse con márgenes. Por ejemplo, si buscás:

    .post-footer-line-4 {
    ................ propiedades
    margin:0px 0px 10px 20px;
    }

    ahí el primer valor del margen es la separación superior, por ejemplo, cambiándolo por:
    margin:50px 0px 10px 20px;
    separamos el DIV de posts relacionados (que queda abajo) de la tabla con marcadores sociales (que queda arriba).

    Ahí en esa tabla, podrías cambiar el valor del ancho de la primera celda, la que contiene el texto para que "entre" un texto largo y no se desconfigure y se amplie. Por ejemplo:
    <td width="120">

    Espero que esto te ayude y cualquier cosa, me avisás.

    PD: Muy buenos los íconos de los marcadores sociales circulares. Excelente idea :D

    Responder
    Romina  

    Hola, gracias por tu explicacion, ahora mismo me pongo a ver que sale, cualquier cosa te pido socorro. Con respecto a los iconos circulares, encontre algunos en http://fasticon.com/freeware/?p=65 la verdad es una excelente pagina, tenes todo tipo de iconos de excelente calidad, algunos gratis otros no. Toda la seccion gratis comienza en http://fasticon.com/freeware/ en la sidebar derecha dice "web 2.0 Icons" ahi encontre los circulares (son 10 modelos) los botones que no estaban dentro del pack, los fabrique, debido a que estudio derecho y no poseo muchas herramientas de diseño en mi pc, use lo que tenia a mano, el corel, elimine los bordes cuadrados, agregue circulo detras, exporte como npg, me fui a http://tools.dynamicdrive.com/favicon/ donde los converti en favicon, y los subi a google page creator, pesan 3k, no se si sera la mejor solucion, pero quedaron bastante armoniosos. Gracias por todo, nuevamente y visita esa pagina que te digo que te va a gustar, hay de todo, y muy originales, esta en ingles, pero calculo no es problema para vos. Beso

    Responder
    JMiur  

    Gracias, Romina, ya me guardé la página :D

    Responder
    Anónimo  

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

    ¡Hola, JMiur!

    Encima de enseñarnos, lo haces con humor :D , eres un fenómeno.

    Voy a probar este truco, y si me funciona -¡a mí! que ya me conoces- es que no es un desatino ;) .

    Un cordial saludo,

    Max & Birrax.

    Responder
    JMiur  

    Jajajaja, Suerte, Max, no es difícil realmente pero, es bastante engorroso y hay que hacerlo con cuidado ;)

    Responder
    ZD  

    La verdad JMiur, que no hay otra cosa que hacer que darte las gracias!, desde que conosco vagabundia pude modificar muchas cosas en un blog que arranque hace un tiempo. Nuevamente gracias!

    Recien implemente este codigo, parece complicado pero como tu mismo dices si tienes paciencia y analizas bien el codigo no hay mayores problemas, a la primera lo pude hacer funcionar y adaptarlo un poco, Exelente! =)

    Nos vemos!

    Responder
    JMiur  

    Gracias, ZD. Es cierto, no es difícil de implementar pero es muy engorroso y uno puede perderse con tanto código estrafalario.

    Me alegro que haya funcionado :)

    Responder
    Giancarlo  

    ¡Hola!

    El link al código que hay que sustituir se ha roto y ahora no puedo aplicar este hack.

    ¿Se puede volver a subir o localizar?

    Muchas gracias.

    Responder
    JMiur  

    El archivo ese que ya no existe es sólo un modelo, no es imprescindible y puede cambiarse para colocar las redes sociales o agregadores que uno quiera.

    De todas maneras, he subido un TXT con el mismo esquema excepto que son los servicios que yo uso. Allí sólo deben cambiarse las imágenes y funcionará.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR