Blogger

Redes sociales (Social Bookmarking) en Blogger

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:

  1. 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”.

  2. Buscamos el siguiente código:
       <p class='post-footer-line post-footer-line-3'/>
  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 + "&amp;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 + "&amp;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;amp;url=" + data:post.url + "&amp;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 + "&amp;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&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;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 + "&amp;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 + "&amp;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 + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://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 + "&amp;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&amp;Description=&amp;Url=" + data:post.url + "&amp;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&amp;simple=1&amp;url=" + data:post.url + "&amp;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.

  4. 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.

  5. Ahora gurdamos y listo.

Deja un comentario

112 Comentarios

  • 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

  • Hola hola!!
    Me gustaría alinear las redes sociales a la derecha de mi blog… me podrías ayudar?

    Te agradezco 🙂

  • 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!

  • 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í 😉

  • ¿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”

  • 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!!
    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!!

  • 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

  • Exactamente andaba en busca de este tip

    Gracias por la información, ya lo estoy ocupando en mi blog 😉

  • 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

  • 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.

  • […] Y para finalizar, siempre es recomendado mostrar los posts relacionados y botones para redes sociales. […]

  • 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

  • […] este artículo en español: Redes Sociales en Blogger. Tags: Advanced users, CSS, Icons, Intermediate users Leave a comment » Vertical1235061 […]

  • 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

  • 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.

  • 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.

  • 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!

  • […] la única condición es que quede dentro del Loop.Para BloggerSi ya haz agregado otros servicios de marcadores sociales, el proceso es similar, e igual al botón de compartir en Twitter.En el código de tu plantilla […]

  • Francico, he estado probando hacerlo, pero no encuentro el código . Encuentro otro que es igual, sólo que en lugar de p dice div. Lo probé y no funciona. Sabes tu ¿Cuál será el problema?
    Gracias.

  • @José no tiene que ser forzasamente post-footer-line-3. Puede ser también post-footer-line-1 o post-footer-line-2, haz pruebas y veras donde sale.

  • hola francisco, yo no encuentro la parte del código que dices que es:

    en mi plantilla lo único que hay “similar” es:

    qué hago?

    de antemano gracias!

  • […] columnas.6 zonas para gadgets / widgets.Menú con páginas estáticas.Menú de servicios sociales.Marcadores sociales en páginas individuales.URL’s cortas (bit.ly) en páginas individuales.Tipografía Aller en […]

  • ferchuz, Lucia, no tiene que ser exacto el código, a veces esta modificado en unas plantillas. A prueba y error pueden ver si es el lugar correcto.

  • Hola Francisco,

    El blog que tengo que modificar fue creado hace mucho tiempo y aún no tengo autorización para cambiar el diseño. Mi problema es que al parecer no tiene el código “” (ni 2, ni 1) y solo dos que dicen exactamente lo mismo: “”.

    En resumen ;), no se cómo ni dónde ponerlo…
    Ojalá puedas ayudarme!

    Gracias!!

  • Francisco Hola.. he realizado los pasos que indicas y no me funciono.. en qué pude haber fallado.. Gracias !!

  • Hola,

    Lo he puesto en mi blog y me gustado mucho. Pero observo que al pasar el ratón no sale el recuadro que indica el nombre de la red social. He repasado la plantilla y no veo que haya hecho nada mal. ¿Es así simplemente y no tiene porque salir el recuadro?

    Gracias.

  • Al utilizar una plantilla diferente a las de blogger, no encuentro esa linea que mencionas de

    Ni la 2, ni la 1. Que he visto que mencionabas en otro comentario.

    ¿Qué puedo hacer?

    X cierto, felicidades por un blog con taaantos comentarios y tantas ayudas ^^

  • Hola, he visto tu tutorial y lo primero te agradezco el esfuero y consejos que nos das. Son muy útiles e interesantes. No obstante, no he podido encontrar el código que me dices. Lo más similar ha sido:

    Mira si puedes ayudarme, muchas gracias!!

  • Me gusta pero me sobran redes. En cambio la solucion que tu tienes en tu bloc en la opcion compartir me gusata mas que la lista de todas esas otras redes.

  • Me gustaria incorporar una la opcion compartir con tuitter i facebook. Pero que en cada articulo me salga la url del post , no la principal del bloc.

    Y que he de hacer para las urls cortas para twitter?

    jaume

  • Hola:
    Me sirvio de mucho tu ayuda, pero quisiera agregar el icono del facebook y twitter, coo lo hago?

  • […] un nuevo detalle a su plataforma, se trata de botones para compartir el contenido de un post en servicios sociales como: Facebook, Twitter, Blogger, Google Buzz y el mail de toda la vida.¿Cómo agregarlos?Primero […]

  • olle man, en la primer linea a buscar no sale con la “p”:

    el 2do es mi caso, espero respesta, ya que si me interesa tener esa barra

  • hola que tal he utilizado los codigos pero el 1º codigo no lo encuentro en mi blog para sustituirlo.yo el 2º codigo si lo he puesto un saludo.

  • como siempre puras cosas buenas amigo muchas gracias si me funciono, aunque sabes que estuve buscando como loco estaparte
    no aparecio, lo que hice fue intentarle ponerlo en body hasta que me gustara donde apareciera, lo curioso es que llego estar hasta en la etiqueta head pero todo salio bien

  • […] ¿ que si soy un genio de la informática ? ¡por supuesto que no ! estos botones los encontré en Blog and Web sitio dedicado a blogging y desarrollo web. Por cierto gracias a Francisco e Iván de Blog and Web […]

  • Hola, muchas gracias por el post. Me funcionan, pero salen en vertical y queda feo, me gustaría que saliesen en horizontal, me puedes ayudar?

  • Empresa dedicada a las Energías Renovables, solar, eólica y medio ambiente. Vendemos aerogeneradores, paneles solares, colectores, bombillas de bajo consumo y LED

  • @Ignacio Pan:
    no encuentro en mi plantilla puede ser ke lo tenga porke no lo veo, como puedo solucionar este problema es decir ke podria modificar para poder hacer la inserccion de los iconos = desde ya muchcas gracias

  • Hola…en estos marcadores no aparecen facebook y twitter ¿Cómo puedo unirlos a esta misma lista?
    Un saludo y enhorabuena por este fantástico blog

  • tengo una pregunta, es posible crear así botones de compartir para blogger que se coloque bajo las entradas del blog asi como este?, gracias por su ayuda, muchas gracias!!

  • Hola, cuando intento buscar el codigo que nos das

    No lo tengo… tengo uno que dice que en ves de decir post dice comentarios…

    Help me!

  • Hola:

    Hay un nuevo servicio para todas las redes sociales. De momento hay un formulario para que la gente indique en que puede consistir, pero en pocos días abrirán el servicio para todos.

  • Hola a todos, bueno pues tengo una dudilla, no buscaba esto, y en el apartado de contacto dice que me dirija a un post para comentar mi duda. en fin … jeje, aver si me pueden aclarar.

    Quiero que mi blog sea como una red social, aver, que los usuarios se registren y se puedan mandar mensajes entre ellos y agregarlos.
    y que cada uno pueda subir su musica favorita a un prodcast y que se quede alojado en la web (blog)

    se puede hacer eso ?? contesten porfavor

  • Estoy intentando poner esto en la web y es imposible siguiendo lo que me indicas. Es una plantilla y me da error. Si te mando el archivo xlm me podrías ayudar e indicarme como hacerlo? Gracias, un saludo, Carlos M.R.