Iconos para marcadores sociales | Oloblogger Hay varios sistemas para colocar los enlaces para notificaciones sociales (del.icio.us, fresqui, men...

16 de junio de 2007

Iconos para marcadores sociales

Hay varios sistemas para colocar los enlaces para notificaciones sociales (del.icio.us, fresqui, meneame, etc), pero el que se describe a continuación es el único que, de momento, he conseguido que funcionara bien en Blogger. Cuando conozca otro sistema más sencillo ya lo os lo paso.


Bueno...¡al tajo!: Hay que editar la plantilla HTML (hacer una copia de seguridad antes de trastear nada), Expandir plantillas de artilugios y localizar las líneas de código que muestran el pie de los posts. En concreto hay que localizar la última línea. Tiene este aspecto:

<p class='post-footer-line post-footer-line-2'>

Puede ser line-1, ó line-2, ó line-3...Nos interesa la última. El código descrito es la etiqueta de comienzo. Llevará algo de código adicional que hará referencia a lo último que muestran vuestras entradas, según la configuración de cada cual. Fijaros en lo último que muestran vuestros posts y eso confirmará que estais en esta última línea. Como pistas, PostLabels son las Etiquetas, PostBackLinks son los Vínculos de Retroceso, PostComments los Comentarios, Post.EmailPostUrl es el enlace para enviar por correo, Post-TimeStamp es la fecha, Post-Author el autor de la entrada...

En cualquier caso, tras la última line y su código, estarán las etiquetas </div> </div>

Justo delante de ellas es donde hay que copiar el siguiente código:

<!-- NOTIFICACIONES SOCIALES --><p class='post-footer-line post-footer-line-3'><span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='10%'><div expr:id='"sbtxt"+data:post.id'>Compartir:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + "<data:post.id/>&quot;,0)</script></td><td><a expr:href='"http://www.blogmemes.com/post.php?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Blogmemes' src='http://farm1.static.flickr.com/169/408948874_ff61f10cb7_o.gif'/></a><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Menéame' src='http://farm1.static.flickr.com/175/408950197_fe135ad0a0_o.gif'/></a><a expr:href='"http://ocio.fresqui.com/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Fresqui' src='http://farm1.static.flickr.com/166/408948877_5a350c6157_o.gif'/></a><a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='http://farm1.static.flickr.com/165/408950201_452c9115d9_o.gif'/></a><a expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='http://farm1.static.flickr.com/179/408948876_9174c1d5ec_o.gif'/></a><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://farm1.static.flickr.com/174/408948875_d286be5064_o.gif'/></a><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' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='http://farm1.static.flickr.com/177/408948871_0c6287dfd6_o.gif'/></a><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='http://farm1.static.flickr.com/133/408950203_98a6d97d1d_o.gif'/></a><a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='Google' src='http://farm1.static.flickr.com/181/408950196_683192a7d8_o.gif'/></a><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' target='_blank'><img alt='Reddit' src='http://farm1.static.flickr.com/186/408950199_14c90ab3f0_o.gif'/></a><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='http://farm1.static.flickr.com/162/408948880_b57aa7eb00_o.gif'/></a></td></tr></table><br/></span></p><!-- NOTIFICACIONES SOCIALES -->

Lo único que hay que cambiar es el número de línea, poniendo el siguiente al último utilizado hasta ahora.

Para eliminar cualquiera de los iconos que aquí se pueden ver, sólo hay que eliminar entero el párrafo del marcador correspondiente, que va desde el <a expr:> hasta el </a>, ambos inclusive.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

30 comentarios :

  1. Hola estaba viendo el tutorial y dos cosas me saltan como duda:

    1º al copiar el codigo donde tu dices no se porque mi blog le pone un borde grueso blanco a las imagenes, no lo pone cuando copio el codigo ne otro sector del blog.

    2º no entendi la parte que explicas al final del tutorial , debajo de la ventanita con el codigo.

    tengo que cambiarle algo al codigo para que funcione?

    Desde ya muchas gracias y saludos desde Chile...

    ResponderEliminar
  2. 1. Eso debe sr porque tú tienes configurado que todas las imágenes de tu blog lleven ese borde. Los iconos son imágenes y entonces llevan borde. Ver esta entrada

    2. No hay que cambiar nada. El código funciona. Esas son unas aclaraciones para blogs que tengan muchas líneas en el pie de cada entrada y también para gente que quiera quitar alguno de los servicios, respectivamente.

    ResponderEliminar
  3. Muchas gracias de nuevo, no pense que podia ser algo como eso porque si ponia los iconos debajo de la fecha se veian sin borde jejej

    Muchas gracias de nuevo, dentro de la semana te agrego a mis vinculos ;)

    ResponderEliminar
  4. Buenas oloman
    Buscando cosas para mi Blog he encontrado tu blog esta muy bien y me ha ayudado mucho pero tengo un problemilla para poner lo de meneame, diggs, etc. Cuando lo pongo me sale en vertical y no puedo cambiarlo, lo e modificado entero y nada, no me deja.
    ¿Podrias ayudarme?
    Gracias por adelantado
    Sacerdote

    ResponderEliminar
  5. Ya he visto tu código y simplemente se trata de poner todo en la misma línea.

    El puñetero intérprete de Blogger te mete espacios y líneas en blanco cuando pones los TD y los TR en distintas líneas.

    Prueba a poner todo en la misma línea y creo que te funcionará bien. Es un lío para estructurar, pero así si que funciona.

    ResponderEliminar
  6. Gracias Oloman, otra vez. ¿Has pensado en incluir en esta lista la votación a bitácoras que tratada en un post posterior?

    ResponderEliminar
  7. gracias loco la verdad he podido mejorar mi blog gracias a muchas cosas que he encontrado aqui

    ResponderEliminar
  8. El único sitio donde me he enterado de la explicación de como se hace esto.
    Muchas Gracias.
    SALU2

    ResponderEliminar
  9. Hola, ante todo gracias por compartir tus conocimientos con todos los que como yo nos perdemos en este "mundo" pero no por eso dejamos de intentar probar cosas nuevas.

    He puesto el código en mi blog y funciona perfectamente, lo único que al principio de cargar la página si aparece el texto "Compartir:", pero en cuanto termina de cargarla lo sustituye por UNDEFINED ¿A qué se debe esto?.

    Un saludo.

    ResponderEliminar
  10. Hola Nemula. Lo he vuelto a probar y me funciona correctamente. Puede que el código interfiera con algo que tú tengas instalado.

    No obstante, como posible solución rápida, prueba a quitar
    expr:id='"sbtxt"+data:post.id'
    al principio, en el primer DIV.

    ResponderEliminar
  11. Hola Oloman, he estado comprobando que sucede al pasar el ratón por encima, no se si eso te puede indicar mejor lo que le pasa, de todas formas lo más parecido que encuentro al código que me dices que quite es:

    expr:id='"sbtxt"+data:post.id'

    No se si te refieres a este.

    Por otro lado le he añadido al código los marcadores de enchilame, chido y webeame, pero no eso no produce el bug porque lo hice a posteriori.

    De todas formas muchas gracias por responder con tanta rapidez.

    Un saludo.

    ResponderEliminar
  12. Vaya! acabo de publicar el post y me he fijado que al publicarlo el código que te he puesto es exactamente el mismo que el que tu me has dicho, sólo que a mi en la plantilla me sale con &quot en lugar de las comillas, quizá sea eso?

    ResponderEliminar
  13. Es lo mismo Nemula. A blogger le sientan mal las comillas dobles (")en la parte del HTML. En esa parte hay que usar las simples ('). Lo que ocurre es que ciertos tipos de códigos necesitan usar las dos. En ese caso, el truco es escribir &quot; que sí que admite Blogger, pero que el navegador interpreta como ".

    Creo que si quitas esa expresión, el problema se te solucionará.

    ResponderEliminar
  14. Ya está solucionado, disculpa que haya sido tan pesado, definitivamernte soy un completo ignorante de todo esto ;)

    ResponderEliminar
  15. yo soy incapaz de añadir cosas a las entradas porque en el codigo me aparece esta etiqueta

    b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/

    Alguien me puede ayudar?

    ResponderEliminar
  16. Sí Dagandara. Si te aparece la barra al final es porque no has pinchado "Expandir plantillas de artilugios". Una vez que clickes ahí, podrás ver más código.

    ResponderEliminar
  17. Hola Oloman, he estado leyendo este post, y me parece muy interesante.

    Tengo el mismo problema que tuvo Sacerdote:

    "Buenas oloman
    Buscando cosas para mi Blog he encontrado tu blog esta muy bien y me ha ayudado mucho pero tengo un problemilla para poner lo de meneame, diggs, etc. Cuando lo pongo me sale en vertical y no puedo cambiarlo, lo e modificado entero y nada, no me deja.
    ¿Podrias ayudarme?
    Gracias por adelantado
    Sacerdote"

    El problema es que con la respuesta que tu le distes:

    "Ya he visto tu código y simplemente se trata de poner todo en la misma línea.

    El puñetero intérprete de Blogger te mete espacios y líneas en blanco cuando pones los TD y los TR en distintas líneas.

    Prueba a poner todo en la misma línea y creo que te funcionará bien. Es un lío para estructurar, pero así si que funciona."

    No entiendo que le quieres decir con eso, por favor podrias echarme una mano, es que no consigo ponerlo en vertical.

    Muchas gracias

    ResponderEliminar
  18. Perdon queria decir en horizontal.

    Gracias

    ResponderEliminar
  19. Hola paisano.
    Se trata de teclearlo todo seguido, sin saltos de línea. Creo recordar que lo modifiqué tras ese problema y actualmente el código que se ofrece no contiene saltos. Copia y pega tal cual y ya me cuentas. Si no te funciona me lo dices y lo dejas temporalmente para que pueda ver dónde está el problema.
    Quizás te interese utilizar el servicio Tell a Friend, que actualmente incluye enlaces a (casi)todss los agregadores conocidos. Echa un vistazo en este mismo blog, al final de cada post.

    ResponderEliminar
  20. No me jodas que eres de Cartagena!!! que coincidencia!! jajaj

    Bueno te dejo el blog como me has dicho...

    Un saludo

    ResponderEliminar
  21. Acho Juan, ya veo que sale todo en vertical y lo cierto es que no tengo ni idea de por qué. Coge los marcadores que te interesen (desde <a href=".... hasta </a> inclusive) y los pones a continuación del que tienes ahora de Menéame. Sin tabla y sin nada. Creo que te debería funcionar.

    De todas formas no olvides la opción de Tell a Friend, que me parece actualmente la mejor.

    ResponderEliminar
  22. Gracias! lo intentare mañana porque hoy ya es demasiado tarde, mañana te cuento aunque voy a terminar pomiendo lo del Tell a Friend, un saludo y gracias!!!

    ResponderEliminar
  23. Jelou otra vez! conoces algun otro gestor de marcadores sociales como el "tellafriend" no se porque pero no me deja registrarme...

    Gracias

    ResponderEliminar
  24. Acho Juan, a bote pronto no conozco ninguno. Este lo descubrí de casualidad, pero seguro que dándole un poco a Google, descubres otro.

    De todas formas, me sorprende que no puedas registrarte...

    ResponderEliminar
  25. Es rarisimo, me he tenido que registrar en el trabajo, creo que es por el navegador, en el portatil tengo el explorer 6, en el trabajo el 7, me he registrado ahi, pero claro...desde el portatil tampoco iniciar sesion, mañana intentare meterlo desde el trabajo.

    ResponderEliminar
  26. Ya me extrañaba... Bienvenido al misterioso mundo de Internet Explorer :)

    ResponderEliminar
  27. Anónimo29/8/09 5:27

    creo que finalmente encontré el verdadero blog ayuda, estoy segura que aprenderé muchísimo!!! gracias!!!!!!!!
    Saludos Julia,
    desde Argentina.

    ResponderEliminar
  28. Hola:

    Hace unos días encontré este blog y ha sido mi salvación para muchas cosas que no sabía hacer! Lo único que hago es dedicarme a escribir y escribir y publicar, pero hay muchos detalles de los que no tenía ni idea. ENHORABUENA POR EL BLOG!

    Mi duda es la siguiente, he metido este código en uno de mis blogs y me he dado cuenta de que algunas redes no salen, como tuenti, facebook, ¿como se pueden añadir aquí? y ¿se podrían poner un poquito más grandes? A lo mejor en otros sitios se ven grandes, pero en mi blog los veo muy pequeñitos (los iconos).

    Gracias!! esta primera prueba la he puesto en http://destylou-rarezas.blogspot.com

    ResponderEliminar
  29. Hola Lourdes. En primer lugar, para que los iconos sean más grandes, simplemente tienes que cambiar la dirección de cada imagen por otra, la que tu gustes y del tamaño que quieras. Intenta que todas sean iguales para que quede mejor.

    Con respecto a las otras redes (que casi no existían cuando hice este post), habría que insertar un trozo igual al comprendido entre cada <a expr:href.... y </a> pero cambiando la imagen y el enlace.

    Si no te aclaras mucho, aquí tienes otra explicación que incluye las redes más habituales de hoy día:
    http://gemablog-.blogspot.com/2010/02/redes-sociales-en-el-post-footer.html

    ResponderEliminar