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.
Gracias por el tutorial, buscaba justamente esto
saludos!
Que bueno, ojala que te sirva!
Saludos!!
Es lo que venia esperando hace tiempo y funciono de maravilla!!!
Mil gracias
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
ya lo tengo, perfecto.
MIL GRACIAS
funciona, gracias
Hola hola!!
Me gustaría alinear las redes sociales a la derecha de mi blog… me podrías ayudar?
Te agradezco
Hola Laura!
Al código del paso 4 agrega:
.rsociales ul {
text-align:right;
}
Saludos!
Gracias. Becho :-X
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
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
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!
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 )
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!
¿O los códigos que pusiste son justamente para ponerlos ahí?
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í
Perfecto, ¡¡muchas gracias!!
¿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!
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”
Otra página que tiene la misma función es:
http://www.addthis.com/
(todavía no la probé, pero parece buena)
¡Saludos!
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.
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
Hola, me preguntaba si sabías los códigos para hacer esto mismo pero en Wordpress. Gracias de antemano.
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.
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!!
OOOOOHHH!!!!
lo siento, había que activar el casillero expandir artilugios (ahora me creen que soy nuevo en esto??) mil disculpas, saludos!!
Gracias, muchas gracias.
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
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!
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
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
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>
Muy buen tutorial.
Sólo que quiero añadir el Mister Wong y no lo consigo.
Por fa…
¡¡¡Quedaría completo!!!
Muchas gracias.
Ángel
ESPECTACULAR ! GENIAL !
Muchas gracias !!
gracias, esto si me funciono, pero el sharethis no, mil gracias otra vez
Gracias por la detallada explicación. Me has resuelto una gran duda y funciona!
Muchísimas gracias Francisco. Muy simple y efectivo!
Exactamente andaba en busca de este tip
Gracias por la información, ya lo estoy ocupando en mi blog
Gracias…..por el tutorial,
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.
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
Gracias por el tutorial, llevaba tiempo buscandolo.
Mira que guapo ha quedado en mi blog
Valencia y che
valenciayche.blogspot.com
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.
gracias por la ayuda una pregunta sabes como puedo poner una barra de comentarios así como esta? saludos
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!!!
Muy interesante. He usado este codigo con éxito. Saqué la mayoria de los marcadores y agregue otro.
Muy buena entrada la presente
Saludos
gracias
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.
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?
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.
Tengo un problema similar. He seguido todos los pasos adecuadamente y me aparece el siguiente error:
No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
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 “div” must be terminated by the matching end-tag ”
Ni idea de porqué puede ser. He probado a cerrar el pero nada.
Hey muy bueno el tuto justo lo q necesitaba
Funciona perfectamente!!!
Gracias!!!
man, sos un master! gracias!
Muchas, pero Muchas Gracias
Hola
Seguí todo al pie de la letra y me salen los íconos verticalmente.
Cómo se agrega FACEBOOK?¿
no tengo esa linea en la edicion, hay algunas que coinciden en como empiezan pero no son parecidas, no se como resolverlo, al desconocer el lenguaje no se donde ubicar los cambios
gracias
Me pasa como a Alejandra,he rebuscado y no encuentro esos códigos HTLM.
Un saludo
Gracias, los acabo de agregar y funcionan bien según parece, además se ven preciosos.
Gracias Francisco estaba buscando esta solución y di con tu sitio, los instale hace tres días y funcionan sin complicaciones. Ahora solo quiero agregar algunos iconos mas para completar la barra de redes sociales.
Muchas gracias, añadiré un link a tu blog desde mi blog saludos.
Hola, tengo un problema con este widget. Los iconos en vez de estar en horizontal se ponen en vertical.
Espero una respuesta. Un saludo.
Me encanto todo lo que dicen, y disculpen por preguntar tal vez cosas muy basicas, pero necesito ayuda.
Necesito incluir en mi pagina web iconos de las redes sociales. Soy totalmente ignorante al respecto de estos temas, no se si me pueden hacer el favor de guiarme paso por paso, sabiendo que no se nada de informatica.
Saludos
Quisiera eliminar los simbolos que estan delante de cada icono, me podrian decir como se hace?
Muy buen post, casi nunca los bloggers prueban sus codigos y por ende no funcionan, pero este si está excelente.
Uff, buenísimo, te has ganado otro suscriptor.
Es genial el tutorial, pero querría saber si hay posibilidad de que me pasaras el code como lo tenés vos en tu blog, osea junto con los posts relacionados. Justamente el problema que tengo con mi footer es poder integrar bien esas dos cosas y tu lo haz hecho a la perfección!
Bueno, ojalá puedas responder mi pedido, espero no sea demasiado pedir!
@Eleté puedes checarlo en el código fuente de la página, WordPress lo tiene en php, así que para blogger no funcionaría.
Ah, gracias por la respuesta! Igual lo que tengo en el diseño que vengo armando no está nada mal…
Hola. He puesto íconos de redes sociales en mi blog. Lo que quiero ahora es que el link de Twitter produzca un tweet como los tuyos:
RT @usuario Título » url corta.
Logré que saliera así pero con la url larga, ¿qué debo modificar en el código para que salga una url bit.ly? Pero no quiero que salga un cuadrito con la url corta al final de cada post.
Me serviría de mucho tu ayuda, gracias.
@Ángel, mira nuestro artículo Mostrar URL’s cortas en Blogger
Me pasa lo mismo que a Key, me salen en vertical, y verificado el paso 4… ¿que más puedo hacer para que salga en horizontal?
Muchisimas gracias de antemano!