Redes sociales (Social Bookmarking) en Blogger
Mayo 14th, 2007 | Publicado por Francisco en Blogger | 50 Comentarios
Me preguntan como poner el icono de redes sociales o social bookmarking en cada uno de nuestros post, de modo que sí alguno de nuestros usuarios utiliza uno de ellos, tenga el link para agregarlo a sus favoritos de forma rápida.
No hay necesidad de tener suscrito el blog a ninguno de estos servicios, más bien, los enlaces son precisamente para que el usuario lo suscriba y tenga a la mano tu link sí lo considera de utilidad.
Ahora vamos a ver como ponerlos:
- Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML” donde activamos la casilla “Expandir plantillas de artilugios”.
- Buscamos el siguiente código:
<p class='post-footer-line post-footer-line-3'/> - Sustituye esa linea con el siguiente código:
<p class='post-footer-line post-footer-line-3'> <div class='rsociales'> Agregar a marcadores favoritos: <ul> <li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://bp1.blogger.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a></li> <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjl68-MBQ1I/AAAAAAAAAtw/Mftx1_Bi_oY/s1600/delicious.gif'/></a></li> <li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlY7uMBQrI/AAAAAAAAAsg/ov73dLSsrtA/s1600/digg.png'/></a></li> <li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://bp1.blogger.com/_Zuzii37VUO4/RjlZLeMBQtI/AAAAAAAAAsw/bNmkgSj_jj0/s1600/yahoo.png'/></a></li> <li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjl6z-MBQzI/AAAAAAAAAtg/-13NieAS3J8/s1600/google.gif'/></a></li> <li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjlct-MBQyI/AAAAAAAAAtY/UtGxUlBA7mc/s1600/meneame.png'/></a></li> <li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjlaa-MBQuI/AAAAAAAAAs4/7hoQkbJNkUw/s1600/furl.png'/></a></li> <li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbHuMBQvI/AAAAAAAAAtA/L0TsC3OUUyI/s1600/reddit.gif '/></a></li> <li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbWuMBQwI/AAAAAAAAAtI/Vy_xjt3iY80/s1600/magnolia.gif'/></a></li> <li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbjuMBQxI/AAAAAAAAAtQ/WDlHSsaO_m4/s1600/blinklists.gif'/></a></li> <li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://bp0.blogger.com/_Zuzii37VUO4/RjlQzOMBQoI/AAAAAAAAAsI/qt5x09fQvNo/s1600/blogmarks.gif'/></a></li> </ul> </div> </p>Estas son, a mi parecer, las redes sociales más populares.
- Ahora busca el código:
]]></b:skin>Y justo arriba pega lo siguiente:
.rsociales ul { 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; }Estos son los estilos aplicados a los iconos de cada servicio, puedes modificarlos a como mejor se adapte a tu blog. Los últimos dos estilos dan un efecto de transparencia que funciona bien firefox, opera, safari e IE7.
- Ahora gurdamos y listo.






Mayo 15th, 2007 a las 4:37 pm (#)
Gracias por el tutorial, buscaba justamente esto
saludos!
Mayo 15th, 2007 a las 10:53 pm (#)
Que bueno, ojala que te sirva!
Saludos!!
Mayo 16th, 2007 a las 4:17 am (#)
Es lo que venia esperando hace tiempo y funciono de maravilla!!!
Mil gracias
Mayo 25th, 2007 a las 11:29 am (#)
No encuentro este esos códigos en mi plantilla. Estoy utilizando TIC TAC BLUE.
De todas formas, muchas gracias ya que he encontrado cantidad de ayuda en esta página
Mayo 25th, 2007 a las 12:06 pm (#)
ya lo tengo, perfecto.
MIL GRACIAS
Mayo 29th, 2007 a las 3:37 pm (#)
funciona, gracias
Junio 1st, 2007 a las 2:59 am (#)
Hola hola!!
Me gustaría alinear las redes sociales a la derecha de mi blog… me podrías ayudar?
Te agradezco
Junio 1st, 2007 a las 6:23 am (#)
Hola Laura!
Al código del paso 4 agrega:
.rsociales ul {
text-align:right;
}
Saludos!
Junio 3rd, 2007 a las 4:22 am (#)
Gracias. Becho :-X
Junio 6th, 2007 a las 8:55 pm (#)
Ya lo hice y todo bien ….excepto que mi blog es negro y el fondo de los íconos es blanco asi que se ve un poco mal, los dejaré como están por si quieres verlos.
pero espero que puedas ayudarme o decirme sinceramente que no se puede hacer nada
gracias
Agosto 3rd, 2007 a las 7:22 pm (#)
Hola!
Me salen los iconos, pero me queda horrible porque me salen en vertical y no queda nada bien ¿Hay alguna forma de ponerlos en horizontal?
Gracias
Agosto 4th, 2007 a las 2:11 am (#)
Hola!
Pizca, es posible, pero tendrías que eliminar el fondo con photoshop o buscar en la web otros que no lo tengan.
Kay, verifica si has hecho bien el paso 4, pues es el código que se encarga de que los iconos se visualicen correctamente.
Un abrazo!
Agosto 11th, 2007 a las 8:28 pm (#)
no consigo que se vean con estilo transparente,puse todo tal cual como explicas,tengo que editar algun valor?
(escribi algo en otra plantilla por si me puedes ayudar tambien en eso )
Agosto 11th, 2007 a las 8:57 pm (#)
A mí me gustaría ponerlo debajo de “posteado por.. comentarios..”. ¿Me podrías ayudar con la edición del HTML?
Si no tenés tiempo, no te preocupes, ya demasiado me has ayudado.
¡Saludos!
Agosto 11th, 2007 a las 8:57 pm (#)
¿O los códigos que pusiste son justamente para ponerlos ahí?
Agosto 12th, 2007 a las 8:22 pm (#)
Hola!
esteNo, como se indica arriba, la transparencia solo es visible en firefox o en IE7 (menores del 7 no puede mostrar transparencias).
santi_monse, esta para aparecer así
Agosto 13th, 2007 a las 3:14 pm (#)
Perfecto, ¡¡muchas gracias!!
Agosto 13th, 2007 a las 3:40 pm (#)
¿Se puede mostrar al abrir una entrada, pero no en la página principal? Por ahora dejé el código instalado pero con “display:none”, porque me pareció que quedaba molesto que sea de dos líneas el “post-footer”.
¡Saludos!
Agosto 15th, 2007 a las 3:00 pm (#)
Francisco puedes ayudarme xfa yo tengo la platilla Blogy Curved y cuando agrego el código se ve mal nose si podrias ayudarme lo que pasa es que los iconos nuevos que aparecen se ponen encima del titulo de la notica anterior y cuando es la ultima notica de la pagina se me cruza con el boton “Entradas anteriores, recientes, pagina princpal”
Agosto 16th, 2007 a las 3:48 pm (#)
Otra página que tiene la misma función es:
http://www.addthis.com/
(todavía no la probé, pero parece buena)
¡Saludos!
Agosto 17th, 2007 a las 10:43 pm (#)
Holaa!
santi, se puede hacer con el uso de condicionales, mira al final de esta página de ayuda de blogger. Y la propuesta que mencionas es equivalente, decide entre las que más te agrede
Moises, prueba colocando en otra linea, por ejemplo, en el paso dos, en lugar de la linea post-footer-line-3, intenta con la 2 o la 1.
Agosto 18th, 2007 a las 9:16 am (#)
Me saliooooo lo reemplza por y ahora todo se ve normal sos grande Francisco eres el mejorrrrrrrrrrr graciassss, los demas blgo son fuchi comparados con el tuyo =P
Agosto 20th, 2007 a las 9:29 am (#)
Hola, me preguntaba si sabías los códigos para hacer esto mismo pero en Wordpress. Gracias de antemano.
Agosto 25th, 2007 a las 12:58 am (#)
Que bueno te resulto Moises
iñigo, el código varia, pero en wordpress hay muchos plugins que te ayudan en esto, puedes ver el artículo “50 plugins para la administración de Wordpress” donde encontraras varias opciones.
Agosto 31st, 2007 a las 9:56 pm (#)
hola!!
antes que nada te felicito por tu blog!! ha sido una gran ayuda para los que como yo recién comenzamos en esto. mi pregunta es la siguiente: he usado la plantilla .xml “Blogy-Minyx” en http://www.eliseo-salazar.blogspot.com, pero no encuentro los códigos de referencia q das; pero vi el archivo .txt de la misma plantilla y sí los tiene, cómo puedo hacer para poner los íconos de las redes sociales (u otras modificaciones) sin tener que cambiar toda la plantilla de .xml a .txt??? muchos saludos!!
Agosto 31st, 2007 a las 10:12 pm (#)
OOOOOHHH!!!!
lo siento, había que activar el casillero expandir artilugios (ahora me creen que soy nuevo en esto??) mil disculpas, saludos!!
Septiembre 9th, 2007 a las 10:35 am (#)
Gracias, muchas gracias.
Septiembre 22nd, 2007 a las 7:28 am (#)
Hola Francisco, ante todo decirte muy buena página!! felicitarte por ello!
Bueno, tengo un problemilla, he hecho todo lo que has puesto, copiado el código, y puesto en mi blog, pero me da este error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type “HEAD” must be terminated by the matching end-tag “”.
Te juro que el head esta cerrado, (a no ser que sea otra cosa) pero bueno, así que… no sé que ha podido pasar.Gracias por adelantado
Septiembre 22nd, 2007 a las 1:18 pm (#)
Hola Nu, gracias por tus comentarios, bueno, es raro lo que te pasa pues no se toda el header, pero tal vez hallas cometido un error al pegar los estilos, deben ir antes de ]]>.
Un saludo!
Octubre 1st, 2007 a las 4:11 pm (#)
He utilizado tu tutorial para obtener algún codigo de llegada. Muchas gracias.
Te quiero comentar que en mi caso, no me resultó necesario realizar todos los pasos que señalas y me funciona perfectamente. No sé si será porque yo trabajo directamente con el editor de Blogger, pero he utilizado un camino mas simple. Te lo paso por si le sirve a alguien:
Para poner un botón en las entradas (posts) de tu blog en Blogger, ir a Plantilla –> Edición de HTML –> marcar en Expandir plantillas de Artilugios –> localizar el siguiente código en la plantilla de tu blog:
–> INSERTAR ACÁ EL CÓDIGO
o por ejemplo después de este otro código (depende de dónde quieras que aparezcan los botones):
,
–> INSERTAR ACÁ EL CÓDIGO
————————————-
El código a insertar es el siguiente:
Bueno, eso es todo. A mí me funciona perfecto.
Para comprobarlo, mi blog es
Octubre 16th, 2007 a las 7:04 pm (#)
Muchísimas gracias por ***toda*** tu ayuda.
Cono novata (empecé hace menos de 10 días) tengo una duda: me funciona perfectamente tu código para las redes sociales. Tengo otros iconos que me gustaría poner, pero no se como. Me explico el href tiene una dirección concreta de cada icono. ¿cómo hago para poner los que yo tengo? Otra vez, muchas gracias por todo. Saludos
Octubre 17th, 2007 a las 12:53 am (#)
Hola Eva,
No es nada, que bueno inicias en esto. Respondiendo a tu pregunta, puedes seguir la misma estructura:
<li><a expr:href='direccion del enlace' target='_blank'><img class='rsociales-sobre' src='dirección-de-tu-icono.gif'/></a></li>
Octubre 21st, 2007 a las 3:44 am (#)
Muy buen tutorial.
Sólo que quiero añadir el Mister Wong y no lo consigo.
Por fa…
¡¡¡Quedaría completo!!!
Muchas gracias.
Ángel
Noviembre 5th, 2007 a las 8:54 pm (#)
ESPECTACULAR ! GENIAL !
Muchas gracias !!
Noviembre 16th, 2007 a las 3:56 pm (#)
gracias, esto si me funciono, pero el sharethis no, mil gracias otra vez
Noviembre 18th, 2007 a las 7:03 pm (#)
Gracias por la detallada explicación. Me has resuelto una gran duda y funciona!
Diciembre 17th, 2007 a las 10:15 pm (#)
Muchísimas gracias Francisco. Muy simple y efectivo!
Enero 1st, 2008 a las 6:14 pm (#)
Exactamente andaba en busca de este tip
Gracias por la información, ya lo estoy ocupando en mi blog
Enero 22nd, 2008 a las 9:46 pm (#)
Gracias…..por el tutorial,
Marzo 21st, 2008 a las 2:44 am (#)
He intentado varias veces y no lo consigo.
en lugar del
He probado de muchas maneras y no me guarda los cambios en la plantilla porque me da error.
Quedo pendiente, un saludo.
Marzo 21st, 2008 a las 1:56 pm (#)
He quitado los delimitadres en este comment porque en el anteriro no los agarro. Te deica, en lugar de esto:
p class=’post-footer-line post-footer-line-3′
en mi plantilla sale esto:
div class=’post-footer-line post-footer-line-3′
y no consigo hacer calar el codigo para que aparezcan.
Saludos
Abril 30th, 2008 a las 8:15 am (#)
Gracias por el tutorial, llevaba tiempo buscandolo.
Mira que guapo ha quedado en mi blog
Valencia y che
valenciayche.blogspot.com
Mayo 18th, 2008 a las 5:59 pm (#)
Hola, mi consulta es porque tengo wordpress y no se realmente como hacer para que me aparezcan los iconos de las redes sociales debajo de cada post, ya que no me deja cambiar intriducir cambios en la plantilla.
Bueno espero alguna respuesta pronto.
Un abrazo.
Julian.
Julio 23rd, 2008 a las 7:46 pm (#)
gracias por la ayuda una pregunta sabes como puedo poner una barra de comentarios así como esta? saludos
Julio 31st, 2008 a las 7:36 pm (#)
Gracias por este tema, muy útil… nada más que el listado me sale vertical, ya repeti los pasos 3 veces, además de quitarle unos cuantos li, para ver si dependia del ancho… pero sigue igual vertical.
Graxias!!!
Agosto 14th, 2008 a las 1:28 pm (#)
Muy interesante. He usado este codigo con éxito. Saqué la mayoria de los marcadores y agregue otro.
Muy buena entrada la presente
Saludos
Agosto 15th, 2008 a las 8:03 pm (#)
gracias
Septiembre 22nd, 2008 a las 4:01 pm (#)
no encuentro el codigo , por ningun lado, ni con el famoso Ctrl+f, no se si depende que mi plantilla no es predeterminada, porque mi plantilla la baje de http://www.btemplates.com, si me pudieras ayudar seria muy amable de tu parte.
Septiembre 22nd, 2008 a las 4:25 pm (#)
lo unico que encontre es esto
y despues esto
Copyright © 2008 <a expr:href=’data:blog.homepageUrl’
pero el codigo que tu das nada de nada. habra solucion?
Noviembre 6th, 2008 a las 8:47 am (#)
me funciono perfecto. pero necesito que no aparezca en la pagina principal y que solo aparezca cuando entras a una entrada en particular…sabes como se hace?
gracias…muy buena la web.