domingo 18 de mayo de 2008

Redes Sociales.

Nunca había dado importancia a las Redes Sociales -"la ignorancia hace valientes a los hombres", Napoleón dixit- pero he estado leyendo acerca del tema y he de reconocer que estaba equivocado del todo, por lo que he decidido rectificar y dejar, para quien quiera hacer uso de ellos, accesos directos a las Redes Sociales más populares en el pie de cada entrada. Para conseguirlo he hecho lo siguiente:

¡PRECAUCIÓN! Antes de modificar tu plantilla haz siempre una copia.

Nos vamos a la edición HTML de la plantilla, marcamos expandir plantillas de artilugios y buscamos el siguiente código:

]]></b:skin>

Antes de esa línea copiamos:

/* CSS para redes sociales
----------------------------------------------- */
.rsociales ul {
font-size: 100%;
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Ahora buscamos:

<p class='post-footer-line post-footer-line-3'/>

Justo antes de esa línea insertamos:

<div class='rsociales'>
<table cellspacing="5">
<tr>
<td>Enviar a:</td>
<td><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a></td>
<td><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://img45.imageshack.us/img45/5606/technoratiiy1.gif'/></a></td>
<td><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://img50.imageshack.us/img50/9913/deliciogl4.gif'/></a></td>
<td><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://img50.imageshack.us/img50/300/diggjf4.gif'/></a></td>
<td><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Yahoo!'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://img519.imageshack.us/img519/7119/yahooyb7.png'/></a></td>
<td><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' class='rsociales-sobre' src='http://img519.imageshack.us/img519/9755/googleoq9.png'/></a></td>
<td><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Furl'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://img519.imageshack.us/img519/6871/furlee5.png'/></a></td>
<td><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://img519.imageshack.us/img519/9558/redditse1.png'/></a></td>
<td><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Magnolia'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://img519.imageshack.us/img519/4033/magnoliaho5.png'/></a></td>
<td><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://img519.imageshack.us/img519/556/blinklistspk5.png'/></a></td>
<td><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blogmarks'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://img519.imageshack.us/img519/152/blogmarksus8.png'/></a></td>
<td><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Fresqui'><img alt='Agregar a Fresqui' class='rsociales-sobre' src='http://img45.imageshack.us/img45/5397/fresquisr8.gif'/></a></td>
<td><a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Promoting Blogs'><img alt='Agregar a Promoting Blogs' class='rsociales-sobre' src='http://img261.imageshack.us/img261/5318/pb16x16it8.png'/></a></td>
</tr>
</table>
</div>

Dadle al botón de "Vista previa" y comprobad que todo funciona. Si falla algo, dadle al botón "Borrar cambios" para que la plantilla quede tal y como cuando empezamos a trastear.

Como podéis ver, el resultado es la lista de iconos de acceso al pie de cada entrada a las principales Redes Sociales que comentaba.

Editado 26/04/09: Gracias a la consulta que me hacía Deybi sobre el funcionamiento de este truco, he podido observar que si se aplica la segunda parte del código tal cual indico se pueden producir errores a la hora de guardar la plantilla -son las cosas de nuestro querido Blogger, que a veces hace lo que quiere-, así que si no os queréis complicar la vida, os lo podéis bajar desde aquí.

Y un último consejo: una vez este truco esté funcionando en vuestro blog, guardad las imágenes en algún espacio que tengáis dedicado a esta tarea, ya que si las borran de Imageshack, os quedaréis sin ellas.

Referencias: La Revolución Industrial.

7 comentarios.

SUSO opina que...

Hola Max. Ya ves, cuando escribiste este post, yo estaba todavía lejos de tener el blog... Sin contar que de código HTML sigo sin tener ni idea, y que todo lo que voy aprendiendo es como ahora: de casualidad, leyendo y preguntando... Pero logré añadir el reproductor musical, el blogroll como yo quería, con la imagen de cada blog y un hipervínculo. Y estaba empeñado en aprender cómo añadir el enlace al final de un post a redes sociales. Bien, gracias a ti doy un pasito más (cuenta con una birra gratix). Mi pregunta: sólo quiero que se enlace a menéame, no a del.icio, ni a technorati ni similares. ¿Sabes el código que tendría que añadir? ¿Por dónde cortarlo? Si quieres y tienes un ratillo, puedes enviarme un privado a butoeskor@yahoo.es, por si te resulta más cómodo responderme en un correo que en un comentario...
Espero no estar abusando de tu buen hacer con estos temas...
;)

Max Birrax opina que...

¡Hola, Suso!

No te preocupes, prefiero contestarte por aquí y si le sirve de ayuda a alguien más, pues encantado de la vida. Al grano.

Si te fijas en la última parte del código, tanto el acceso como el icono de Menéame ya están puestos, y al ser el primero en mostrarse, lo único que hay que hacer es eliminar todo lo que hay a continuación, es decir, que esa parte de código tendría que quedar de la siguiente manera:

<div class='rsociales'>
<table cellspacing="5">
<tr>
<td>Enviar a:</td>
<td><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a>
</td>
</tr>
</table>
</div>

Bueno, pues espero que te sirva de ayuda y no es ninguna molestia, sino todo lo contrario.

¡Un abrazo!

Deybi opina que...

Hola Max.

Yo tampoco logro conseguir nada. El código de post-line no lo encuentro. Lo he puesto en algunos parecidos pero nada!.

¿que estaré haciendo mal?.

Max Birrax opina que...

Deybi, buscando en el código fuente de tu blog lo encuentro no una, sino ¡cuatro! veces :D aunque en vez de:

<p class='post-footer-line post-footer-line-3'/>

lo que encuentro es:

<div class='post-footer-line post-footer-line-3'>

¿Has marcado la casilla de expandir artilugios? Puede ser por eso por lo que no lo veas.

Si lo prefieres, envíame la plantilla a mi correo en un documento de texto y le echo un vistazo, a ver si doy con ello.

¡Un abrazo!

Deybi opina que...

Amigo te he enviado la plantilla a ver que miras!!!.

Max Birrax opina que...

¡Hola, Deybi!

Recibida, ;) le echaré un vistazo a ver si soy capaz de ayudarte, pero te pido un poco de paciencia, que últimamente no ando muy sobrado de tiempo. :(

¡Un abrazo!

Max Birrax opina que...

Deybi, resuelto el misterio. ;)

En tu plantilla, lo que tienes que buscar, con los artilugios expandidos, es esta parte del código:

<div class='post-footer-line post-footer-line-3'>

Como verás, hay una mínima diferencia con lo que explicaba arriba, lo suficiente para que no te funcionara. Sólo lo encontrarás una vez, a partir de ahí puedes empezar a aplicar el truco, te recomiendo que emplees el fichero que he añadido a la entrada para que no te vuelvas loco, porque si lo empleas tal cual lo indico más arriba, puede darte errores al cerrar la plantilla.

Ya me contarás, ¡un abrazo!

Venga, anímate y dinos qué opinas:

Aquí estuve ayer te ofrece la posibilidad de enviar tus comentarios sin necesidad de ningún registro previo. En cualquier caso, la publicación de cualquier comentario no supone en absoluto la conformidad de los responsables del sitio con su contenido, puesto que únicamente expresa la opinión de su autor, quien será el único responsable del mismo.
Recuerda que por encima de tu derecho a opinar en este sitio está el derecho de nuestros lectores a no sentirse ofendidos ni obligados a leer comentarios anodinos, fuera de tema, en mayúsculas, en lenguaje SMS y similares. Intenta ser correcto y escribir mensajes coherentes y legibles. Gracias.

¿Problemas para comentar? Prueba a hacerlo aquí a la vieja usanza.