Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





2 jun. 2009

Añadir Marcadores Sociales en Blogger

Son muchas las personas que me preguntaron sobre este truco. Se trata de añadir la clásica barrita que dice "Compártelo" al final de cada post, junto con el link para que podamos compartir ese post en las principales redes sociales como Menéame, Technorati, Bitácoras, Facebook, Twitter, entre otras.

Es una función que interesa a muchos lectores, ya que les permite compartir el post con otras personas sin necesidad de copiar links o contenidos, lo que hace la tarea más fácil. Además, es una forma de promocionar nuestro sitio en estas redes sociales y ganar visitas.

Una vez aplicado este truco, el mismo se verá así:

(click para ampliar)

Para añadir Marcadores sociales en Blogger debemos ir a la edición HTML de la plantilla, expandir artilugios y buscar lo siguiente:

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

Y justo después del mismo pegamos este código:

<!--Marcadores sociales -->

<br/>
<b>Compártelo</b>
<br/>

<a expr:href='&quot;http://meneame.net/submit.php?url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Meneame'><img alt='Agregar a Meneame'
class='rsociales-sobre'
src='http://img193.imageshack.us/img193/3083/meneamehm7.gif'/></a>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Technorati'><img alt='Agregar a Technorati'
class='rsociales-sobre'
src='http://img193.imageshack.us/img193/5606/technoratiiy1.gif'/></a>

<a expr:href='&quot;http://bitacoras.com/votar/anotacion/externo/mini/&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Añadir a
Bitácoras'><img class='rsociales-sobre'
src='http://img192.imageshack.us/img192/9247/bitacoras.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Del.icio.us'><img alt='Agregar a Del.icio.us'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/9913/deliciogl4.gif'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
DiggIt!'><img alt='Agregar a DiggIt!'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/8971/digg.png'/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Google'><img alt='Agregar a Google'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/9755/googleoq9.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Reddit'><img alt='Agregar a Reddit'
class='rsociales-sobre'
src='http://img18.imageshack.us/img18/9558/redditse1.png'/></a>

<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Blinklist'><img alt='Agregar a Blinklist'
class='rsociales-sobre'
src='http://img2.imageshack.us/img2/556/blinklistspk5.png'/></a>

<a expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Agregar a
Blogmarks'><img alt='Agregar a Blogmarks'
class='rsociales-sobre'
src='http://img18.imageshack.us/img18/152/blogmarksus8.png'/></a>

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Añadir a
Facebook'><img class='rsociales-sobre'
src='http://lh3.ggpht.com/_Go-jnwB2e7w/SaHSRY-AvsI/AAAAAAAABFw/SmkojETqA8U/facebook.png'/></a>

<a expr:href='&quot;http://twitter.com/home?status=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Twitter'><img
class='rsociales-sobre'
src='http://img210.imageshack.us/img210/3617/twitter.png'/></a>

<!--Marcadores sociales -->


Hacemos vista previa para ver que todo esté en orden, y si así es guardamos los cambios.

Ahora tendrán los Marcadores Sociales en Blogger al final de cada post, tal cual uso yo en los mios. El código suministrado es exactamente igual al que pueden ver en mi Blog de Pruebas.

Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger!

71 comentarios :

  1. Anónimo2/6/09 21:14

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  2. Vicarlone me parece que es después de

    (div class='post-footer-line post-footer-line-3')(/div)

    por lo menos asi lo vi en tu blog de pruebas

    ResponderEliminar
  3. Gracias por avisar, ya corregi el problemita.

    Saludos!

    ResponderEliminar
  4. Holas! como va? Muchas gracias por pasar!!

    Esta muy buena tu web! tenes muy buena info! Voy a probar añadir los Marcadores sociales a mi blog!!

    Te interesaría hacer un intercambio de enlaces?

    yo ya te agregué, si no queres avisame...

    Un abrazoo!

    Admin de Algunas Tonterias Blog
    http://algunastonteriasblog.blogspot.com/

    ResponderEliminar
  5. Buen tip, aunque yo corrigiria los saltos de linea por parrafos y las negritas en vez de b poner strong /strong es un error habitual en html que perjudica al SEO.

    Un saludo

    ResponderEliminar
  6. hola. una consulta: sabés cómo puedo agregar en blogger los íconos para contactar a través del perfil de facebook y de flickr?
    gracias totales por el blog.

    ResponderEliminar
  7. @Hernan
    Busca en la seccion de iconos y encontra el que quieras (facebook, flickr, etc) y despues colocas el link que queres a las imagenes (de esta forma http://www.vidablogger.com.ar/2009/02/como-colocar-un-link-en-una-imagen.html)

    Saludos!

    ResponderEliminar
  8. Hola, queria saber si puedes facilitarnos el mismo estilo de Css que tienes en el blog, me interesa y si puedes pasarmelo me harias un gran favor, Gracias

    ResponderEliminar
  9. @Luis
    Aqui esta el css que uso yo en este blog:


    /* ----- Bookmarking ----- */
    .book {
    margin-top:5px;
    background:#fdfdfd;
    padding:2px 2px 2px 2px;
    border:1px solid #f0f0f0;
    }
    .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;
    }


    Saludos!

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. muchas gracias por el dato, me parece que es un elemento importante en todo blog, muy probablemente difunda nuestro contenido...


    solo un consejo, especifica que hay que expandir las platillas de artilugios, porq si no, la línea será imposible de encontrar (seguro que a más de uno le pasó y cree que no sirve)

    d nuevo, gracias y ojalá que visites algún día mi blog que apenas comienza, agradecería tus comentarios y/o sugerencias

    ResponderEliminar
  12. Me alegra que te sirva, y gracias por avisar lo de los artilugios, ahora mismo lo edito.

    Saludos!

    ResponderEliminar
  13. Muchisimas gracias ,me ha venido de perlas para mi blog amigo.

    ResponderEliminar
  14. @fuwan
    Me algra que sea de utlidad. Saludos!

    ResponderEliminar
  15. Pues yo no encontre la linea

    (div class='post-footer-line post-footer-line-3')(/div)

    o donde iria?????

    ResponderEliminar
  16. @Jerry
    Tiene que ser debajo de esa linea. Recuerda expandir los artilugios, y en caso que todavia no lo encuentres buscalo asi: post-footer-line-3

    ResponderEliminar
  17. Hola! Exelente blog! hace tiempo que lo vengo siguiendo y ahy muy buena info ensima...

    Yo tengo un gran problema... no puedo encontrar la linea div class='post-footer-line post-footer-line-3, ya expandi artilugios y nada, puse post-footer-line-3 como escribiste vos y tampoco nada... que puede ser entonces...?
    alguna opcion mas??

    gracias!
    Mi blog: www.lossimpsonshoy.com.ar

    ResponderEliminar
  18. @el barto
    Mira, busque en el codigo fuente de tu blog y si encontre la linea post-footer-line-3

    Fijate este screen que tome para que lo veas:

    http://i40.tinypic.com/2hi2fzk.jpg

    Como ves, yo si encontre esa parte del codigo en tu blog, por lo cual deberias buscarla mejor ya que si está.

    Saludos!

    ResponderEliminar
  19. Amigo muchas gracias, aunque seria bueno que nos proveyeras el mismo html y css que estas usando en este blog y no en el pruebas, si puedises hacerlo te lo agradeceria mucho.
    http://fulladven.blogspot.com

    ResponderEliminar
  20. Fijate que ya lo deje en uno de los comentarios.

    ResponderEliminar
  21. Anónimo7/7/09 16:00

    amigo muchas gracias! al fin lo encontre!!

    saludos y surte!!!

    el barto

    www.lossimpsonshoy.com.ar

    ResponderEliminar
  22. gracias funciona muy bien.
    http://Vyblogs.blogspot.com

    ResponderEliminar
  23. Hola, no me funciona el enlace de facebook correctamente, o al menos como debe ser.

    1. Si pretendo publicar un post antiguo, me recoge en facebook el primero cometario de ese post.2
    2. Y si el que quiero publicar es un post nuevo, me publica el texto de presntación que está a arriba a la derecha.

    ¿Sabes cómo podría corregirlo, por favor?
    Muchas gracias

    ResponderEliminar
  24. @Dora
    Ya corregi el codigo de faccebook, intenta con el nuevo a ver si resulta.

    Saludos!

    ResponderEliminar
  25. Muy weno Flaco me sirvio.. Un abrazo Lindo blog

    ResponderEliminar
  26. @H4D35-X
    Me alegra que te sirva, gracias a vos por comentar.

    Saludos!

    ResponderEliminar
  27. Gracias por todas las aplicaciones que informas para mejorar nuestro blog.
    Pero no encuentro las dos o tres formas de scrip donde informas que debemos de pegar abajo el codigo
    si me pudieras ayudar y verificar mi blog
    thezoneone.blogspot.com

    ResponderEliminar
  28. @TheZone
    Asegurate de expandir los artilugios antes de buscar.

    ResponderEliminar
  29. Gracias por la informacion,

    Oero realmente cuando voy a modificar la planilla lo primero que hago es palomer para extender.
    Mira este codigo fue el unico que encontre

    (div class='post-header-line-1'/)
    en donde esta el numero uno,puse 2 o 3 o4 y no encontre nadad ya lo instale despues de esa linea paro mira el blog chory1422.blogspot.com
    aparece arriba y no abajao,hojala tengas tiempo de verlo y a ver si me pudieras ayudar
    ese blog es de pruebas
    adios

    ResponderEliminar
  30. disculpa de nuevo,

    Yo creo que ya lo solucione,realmente nunca encontre en mi plantilla el scrip que mencionas,como te lo comente en el anterior mensaje,lo que realize fue estar copy paste para ver donde quedaba mejor y ya quedo no fue en el scrip que mensionas.
    porfavor podrias verificar el blog
    chory1422.blogspot.com es de prueba
    thezoneone.blogspot.com es el bueno y dime si se ven bien

    sino puses ayudame a ver donde lo debo de poner
    adios....

    ResponderEliminar
  31. podrias decirme por que no funciona bien el icono de bitacors.com

    ya pregunte y me dicen que esta mal el scrip podias verificar,ya que lo realize tambien en tu pagina de prueba que tienes y tambien no funciona

    espero respuesta

    adios

    ResponderEliminar
  32. Hola!!
    Gracias por este útil truco y los demás del blog!!
    Llevaba un montón de días queriendo poner los marcadores en mi blog, y en otros sitios donde encontré el truco me daba un montón de problemas, pero aquí, A LA PRIMERA!!
    Un saludo!!

    ResponderEliminar
  33. Graciaas!!! esta buenisimo!!

    ResponderEliminar
  34. Muchas gracias! esta buenisimo!!

    ResponderEliminar
  35. Compañero...
    El POst esta genial... sin embargo tengo algunos problemas....

    1. Si pretendo publicar un post antiguo, no me recoge en facebook la imagen de ese post..

    y lo principal es que...

    2. Y si el que quiero publicar es un post nuevo, me publica el texto de presntación que está a arriba.

    Si me puedes ayudar seria genial...

    un abrazo..

    ResponderEliminar
  36. Excelente..
    sin embargo me ha dado algunos problemas....

    ya que me los pone hacia abajo en cada entrada lo cual lo hace verse muy feo...

    si puedes ayudarme excelente..

    te mando tambien la direccion de blog..

    http://lenin-abimopectore.blogspot.com/

    ResponderEliminar
  37. @Victor
    Asegurate de no cambiar nada en los estilos y de pegar el codigo correctamente. Acabo de checkearlo y funciona a la perfeccion.

    ResponderEliminar
  38. Hola, ya coloque el codigo en mi blog pero no funciona, al picar sobre el icono, no me comparte.... q puedo hacer.. gracias

    ResponderEliminar
  39. Buenos dias,

    Disculpen de nuevo,agrege al blog sus marcadores sociales,estoy dado de alta en bitacoras.com,pero en sus marcadores no funciona bien el de bitacoras.
    podrian ayudarme y verificar ustedes mismo visitando el blog thezoneone.blogspot.com y dar click en maracdores sociales icono itacoras

    gracias por su ayuda

    ResponderEliminar
  40. LO HE COLOCADO EN MI PLANTILLA, PERO NO FUNCIONA... NO SE COMPARTE,SE OBSERVAN LOS ICONOS, PERO NO SE ABRE NINGUN ENLACE... POR FAVOR EXPICAME QUE HAGO MAL, GRACIAS XD

    ResponderEliminar
  41. He chequeado el codigo y funciona perfectamente. Pueden verlo funcionando en http://www.vidablogger.co.cc/ que es mi blog de pruebas.

    Tambien funciona lo de bitacoras, tengan en cuenta que es necesario que nuestro blog este registrado alli para que se lo pueda votar

    ResponderEliminar
  42. Un recurso genial. Muchas gracias.

    ResponderEliminar
  43. Me alegra que te sirva. Gracias por comentar, saludos!

    ResponderEliminar
  44. Hola quiero saber por qué cuando pongo el código me salen los íconos uno encima de otro y no en al misma línea. :-/
    Cómo la arreglo???
    Este es mi blog:
    http://acentosperdidosenperu.blogspot.com/

    A ver si me ayudan!!! Gracias :)

    ResponderEliminar
  45. @Lorena
    Asegurate de que el codigo no tenga el atributo < li >

    ResponderEliminar
  46. Agrege tus marcadires sociales,estan muy bien.

    Pero encontre en el blog El Rincon de vicarlonte
    vicarlone.com.ar

    me gustaria agregar los de ese blog si pudieras visistar el blog y poner el scrip en este web

    gracias

    ResponderEliminar
  47. @TheZone
    En ese blog que mencionas (vicarlone.com.ar, mi blog personal =P) no uso blogger, sino que estoy utilizando la plataforma Wordpress.org, y esos marcadores los agregue con un plugin llamado SocioFluid

    Saludos!

    ResponderEliminar
  48. Gracias por responder,pero nos gustaria saber si hay alguna posibilidad que dichos marcadores sociales los pudieras agregar en este foro para poderlos agregar a nuetros blog personales

    de antemano gracias por tu ayuda

    adios

    ResponderEliminar
  49. Hola, muchas gracias, me fué de utilidad.

    ResponderEliminar
  50. @Luciano
    Me alegra que te sea de utilidad

    @TheZone
    Como dije, esos marcadores son para Wordpress, por lo que NO EXISTEN para blogger.

    ResponderEliminar
  51. Es fácil de hacer, pero si lo encuantras ya hecho, mejor.

    ¡Gracias!

    Ahora viene lo difícil: decidir qué redes sociales poner y/o quitar, y adaptar el código en consecuencia, claro.

    Imagino que habría que poner, como mínimo, Google y Yahoo, Facebook y Twitter, Bitácoras, Menéame, y algún otro sitio más en español y alguno de habla inglesa por si acaso.

    En el tema de los códigos no ando tan perdido como en esa cuestión... Como no tengo el blog apuntado casi en ningún sitio de esos...

    ¡Un saludo!

    ResponderEliminar
  52. Hola!

    Tengo un blog en blogger y he intentado expandir artilugios y buscar el primer código pero no lo hay. Hace algún tiempo cambié la plantilla y no se si influirá algo pero me gustaría solucionarlo o al menos, intentar agregarlo de otra manera. ¿se puede?

    Gracias.

    ResponderEliminar
  53. @
    Tal vez sea porque tu plantilla utiliza comillas doble. Intenta buscar por:

    post-footer-line-3

    Asi lo deberias encontrar. Saludos!

    ResponderEliminar
  54. Carlos Javier14/10/09 17:54

    Hola Admin:

    Gracias por la info, me ha sido de gran utilidad :)

    Solo quería joderte con una cosa: te molestaría compartirnos el código para generar un marcador que permita compartir el contenido de un post a través de email y en LinkedIn?

    Gracias y saludos!

    ResponderEliminar
  55. @Carlos Javier
    Mediante los comentarios no puedo pasarte el codigo (porque no lo acepta el formulario de comentarios)

    Lo que puedes hacer es ver el codigo fuente de esta pagina y alli buscar donde esta el de email y linkedin.

    Si no lo logras, dejame tu email y te envio el codigo.

    Saludos!

    ResponderEliminar
  56. Perdonad que me meta en la conversación, pero sí es posible poner código html en los comentarios. Mirad:

    <html>

      <head>

       contenido

      </head>



      <body>

       contenido

      </body>

    </html>

    Sólo hay que convertir el código para que no lo interprete Blogger. Yo uso SimpleCode.

    Estaría bien que se pusiera también lo del e-mail en los comentarios para que todos lo pudiéramos ver. Probad con el conversor y veréis cómo lo coge el formulario. Sólo quitar las etiquetas <code> y </code> y el resto, copiar y pegar y ya está.

    Un saludo.

    ResponderEliminar
  57. @José GDF
    Agradezco tu aporte, pero como dije antes, en los comentarios no se puede usar codigo (solo las opciones basicas)

    Mira lo que sucede cuando intento añadirlo: http://i38.tinypic.com/wtmx2.png

    ResponderEliminar
  58. Prueba a quitar <code> y </code> y verás como sí. En la captura, Blogger te lo está diciendo.

    Además, aquí mismo y en mi anterior comentario tienes dos buenos ejemplos de que sí es posible.

    Prueba y verás como sí.

    ResponderEliminar
  59. @José GDF
    Tampoco me deja... en los comentarios no se puede añadir HTML mas que para links o cosas básicas...

    ResponderEliminar
  60. BUENISIMO!!! Probe con codigos de otras web y no me andaban, me marcaban error. Menos mal que encontre el tuyo, lo probe y entro de una. Muchas gracias!!!
    Saludos!

    ResponderEliminar
  61. No sabes cuanto te amo!!!!
    Me he matado hace dias tratando de hacerlo!!! y gracias ti lo logre, me costo mucho buscar el scrip pero cuando lo encontre casi me cai de la silla de la alegria!!!!
    ERES LO MAS!

    ResponderEliminar
  62. @Tamack @Arjona Delia
    Me alegra que les haya sido de utilidad =)

    Gracias por comentar, saludos!

    ResponderEliminar
  63. Muchas gracias por enseñarnos ;)

    Me sirvió

    ResponderEliminar
  64. Hola, funciona perfectamente... Estoy muy agradecido.
    Si quieren chequearlo mi blog es: universalestudio.blogspot.com

    Gracias

    ResponderEliminar
  65. Hola.

    He intentado poner los bookmarks tal como explicas, pero me samen en vertical y no en horizontal. Que hago mal?

    ResponderEliminar
  66. Hola, funciona perfectamente. Muchas gracias. También querría ponerlo a tuenti, wikio y enchílame. ¿Me podrías ayudar a saber qué código pongo o dónde busco eso? Muchas gracias.

    ResponderEliminar
  67. muchisimas gracias!!
    en diseño/ edicion de html y despues hacen clik en Expandir plantillas de artilugios, ahi me salio

    http://utopia-real-coalicion.blogspot.com/
    asi quedo :)

    ResponderEliminar
  68. Que buen Post
    Felicidades funciono!!!!

    y solo una pregunta se pueden cambiar los iconos por unos 3d??

    grax

    ResponderEliminar
  69. Muchas gracias!! Me due de mucha utilidad.

    ResponderEliminar
  70. Anónimo10/4/11 7:36

    Muchas gracias! ha sido superfácil hasta para mi ;)

    ResponderEliminar

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.