Share This para Blogger

by Lorena Fernández Álvarez (@loretahur) / 43

2006 toca a su fin, pero no os preocupéis que no me voy a poner a hacer balances ni declaración de intenciones para el año venidero (total, luego no cumplo ninguno de mis propósitos…).

La mejor forma de despedirme es con otra clase de mi barrio sésamo particular para blogs. Esta vez he incluido una novedad en la parte inferior de cada post, eliminando los botoncitos para mandar la entrada a Del.icio.us, Menéame, etc.. y poniendo un único enlace (Comparte este post) en el que, pinchando sobre él, surge una ventana flotante como ésta:

sharethis
El código está sacado del plugin para wordpress Share This de Alexking que descubrí en este post de Álvaro.

Si queréis incluirlo en vuestros blogs, las instrucciones son las siguientes (para plataforma Blogger):

  1. Deberemos subir a algún sitio accesible el fichero prototype.js. Yo lo he puesto en mi espacio de Google Pages. ¿Y qué es eso de prototype? Pues como bien nos indica la wikipedia, se trata de un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es decir, un grupo de funcionalidades que ya están desarrolladas y que nosotros sólo tenemos que usarlas.
  2. Una vez tengamos ya una ruta para ese framework, en nuestra plantilla de blogger, entre las etiquetas <head> y </head> agregaremos la siguiente línea:
    <script type="text/javascript" src="ruta/prototype.js"> </script>
    Donde ruta/prototype.js es la dirección donde hemos dejado el fichero prototype.js.

  3. Copiamos el siguiente código también entre las etiquetas <head> y </head>.

  4. Agregamos las siguientes líneas dentro de nuestro CSS (entre las etiquetas <style type="text/css"> y </style>)

  5. Donde queramos colocar la frase de Comparte este post (o la que más rabia nos dé), agregaremos lo siguiente:
    <a href="#" onclick="akst_share('<$BlogItemNumber$>', '<$BlogItemPermalinkUrl$>', '<$BlogItemTitle$>'); return false;" title="Mandar a del.icio.us, technorati, etc." id="akst_link_<$BlogItemNumber$>">Comparte este post</a>

  6. Para finalizar con la receta, agregamos este otro código en la parte final de nuestra plantilla (yo recomiendo que sea justo encima de la etiqueta </body>).

Con esto tendríamos ya nuestro bizcocho terminado y listo para servir. Por supuesto, yo sólo he incluido enlaces para mandar a menéame, fresqui, del.icio.us, technorati, digg y blinklist pero se podrían poner muchos más (eso lo dejo a vuestra elección).

Nos vemos el año que viene 😉 (menudo desgaste que le damos a esta frase estos días…).

Actualización 17-01-06: he subido todos los ficheros necesarios en un zip. Os lo podéis descargar aquí.

Publicaciones relacionadas:

Default ThumbnailAdiós Blogger! Hola WordPress! Default ThumbnailDon’t be evil blogger Default ThumbnailIntegración de Feedburner con Blogger Default ThumbnailCódigo de conducta blogger, ¿para qué?

Lorena Fernández Álvarez (@loretahur)

Ingeniera salsera. Actualmente, directora de comunicación digital de la Universidad de Deusto. Miembro del grupo experto de la Comisión Europea Gendered Innovations para analizar el impacto de no incorporar la perspectiva de género en la Inteligencia Artificial. Colabora en el programa de radio “Hoy por Hoy Bilbao” de la Cadena SER desde 2009 con una sección sobre nuevas tecnologías. Además, es jurado del premio Ada Byron a la mujer tecnóloga y mentora del proyecto Inspira STEAM, un proyecto que busca el fomento de la vocación científico-tecnológica entre las niñas. Ha creado junto a Pablo Garaizar e Iñigo Maestro el juego de mesa Nobel Run.

43 thoughts on “Share This para Blogger”

  2. Muy instructivo Loreta pero no he entendido casi nada.

    Por favor un pocquito más básico.

    Gracias y feliz año nuevo.,

  3. @ikari: muchas gracias, lo mismo 😉

    @bonhamled: ¿pero dónde te pierdes? Es que si no no sé donde tengo que reconducir la explicación

  5. LORE POR FAVOR EL TERCER PASO FALLA EL ENLACE. POR FAVOR ARREGLALO. ASI PODEMOS SEGUIR LOS PASOS. UN SALUDO. SINO TENDRE QUE RECURRIR A LOS ICONITOS.

  6. Lo primero URTE BERRI ON a todos y a todas. Lo segundo, muy guapo el truco: lo voy a poner en práctica ya mismo. Lo tercero: qué pasada lo de Google Pages, no sabía ni que existía.

  7. @fedush: a mí sí me funciona. Prueba ahora y si sigue sin irte, mándame un mensaje a mi correo y te paso el código

  8. No encuentro la etiqueta del style/css ¿Esto vale para nueva versión de blogger?

  9. @julen: Yo lo he probado en mi beta (es que me he pasado a medias y aún conservo mi anterior plantilla). Sin embargo, en la nueva beta también puedes editar tu CSS. Tendrás que irte a «Diseño» -> «Edición de HTML» y ahí tienes tu CSS 😉

  10. Hola!
    Realmente útil la adaptacion para blogger :D, gracias!
    Pero cómo podría utilizar la pestaña de enviar por e-mail?

    saludos!

  11. @hombremusgo: pues me temo que la parte de envío de emails no es posible puesto que en blogger no tenemos un servidor de correo propio. Si me equivoco, que alguien me rectifique 😉

  13. adrià tiene razón, en mi blog he añadido un link con un sobre que envia correo a traves de blogspot, ya sabes lo tipico de enviar por mail esta noticia, pero molaria tenerlo incluido en el sharethis 🙂

  14. @adrià y hombremusgo: efectivamente blogger tiene un formulario para enviar los posts por email. El problema es que no dan su código en la plantilla para el mismo. Tienes que habilitarlo desde las opciones del blog y ellos lo incluyen. Una pena 🙁

  15. Lore, a mi lo que me falla es el enlace al código, se me va a una página en blanco

  17. Muchas gracias por esta guia, lo hago bastante bien hasta lo del style/css porque tambien me he pasado a la beta y no encuentro ninguna etiqueta style en lo de editar. Alguna idea de donde puedo meter eso?

    Muchas gracias

  18. @hidalgo: esta receta no vale para Blogger Beta (con la plantilla nueva). Si alguien quiere adaptarla, debería ir a la edición de HTML (con la plantilla extendida).

  19. Hola, espero que alguien lea esta comentario, porque el post ya tiene unos días.
    Primero, muchas gracias por toda la explicación. Mi único problema es que me funciona, pero la ventana emergente para enviar el post a meneame o cualquier otro me aparece en la derecha del blog fuera del area de los posts, incluso tengo que usar la barra de desplazamiento para encontrarlo.
    No se si sabréis a que puede deberse esto, si es así por favor decidmelo.
    Gracias

  20. Hola! Muy buena la idea y la explicación. Pero lo que a mi me pasa a la hora de colocarlo en la plantilla es que no encuentro el codigo de css por ninguna parte. Pero lo que yo no sé si el blog està en blogger beta o no, pero yo diria que no puesto que cuando lo creé blogger ponia que no disponían de más betas. No sé si podréis hecharme un cablecillo, si quereis podeis visitar el blog, es de la entidad que formo parte, shorabaixa.blogspot.com y de paso mirad si encontrais algún que otro fallo más
    Grácias de antemano

  22. Gracias por darme a conocer Prototype: está resultando sorprendentemente interesante.

  23. Pues tengo un problema, cuando he puesto el código, salia bien, pero ahora no se por que, pero se va hasta abajo de la pagina el recuadro con todos los sitios para compartir. Por que pasa eso?? Gracias, y muy bueno el truco

  24. Ya lo he arreglado, y jorge mora, como creo que tienes el mismo problema que yo, te cuento lo que he echo: Pues bien, lo que he echo ha sido poner el codigo del css en el style de la plantilla, y una vez alli, a lo mejor tienes ya un style puesto, pues no pongas este codigo ahí, crea otro style aparte y pon el codigo ahí, asi se me ha arreglado a mi. Espero haberte sido de ayuda.

  25. @baggiobanglio: muchas gracias por poner la solución. Seguro que a muchos más les será de ayuda 😉

  26. baggiobanglio muchas gracias pero sigo sin entender… podrias explicar de manera mas basica como agregaste el style??
    como lo has arreglado?
    porfavor explicanos

  27. A ver, si en el head de tu plantilla tienes puesta una etiqueta que se llama «style» con unos valores, te vas donde pone «/style» y justo encima de esa etiqueta pones el codigo del style. Si no tienes la etiqueta en tu head, pon esto: «style type=»text/css» » y «/style» dentro de ese style es donde tienes que poner el codigo. Tienes que cambiar las comillas por esto < o esto > segun corresponda. Siento la tardanza en contestar.

  28. hmmm ¿nadie lo ha adaptado a beta? a mi me dice:

    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 reference to entity «title» must end with the ‘;’ delimiter.

    imagino que se referira al código javascript

  29. Muchísima gente me ha preguntado cómo adaptarlo a Blogger Beta y, la verdad, es que no saco un rato libre para ponerme (yo sigo siendo un poco cobarde y me mantengo con mi plantilla vieja aunque esté en blogger beta).

    Si alguien se anima a hacerlo, estaría inmensamente agradecida 🙂

  30. Venga, que alguien que sepa lo adapte a blogger beta. Seremos muchos los que lo agradeceremos.
    Gracias

  31. buenas…
    loreta, te agradezco por el widget! funciona perfecto. ahora, tengo una duda: sabés cómo hacer para agregar más links a la lista de los 6 que ya pusiste (del.icio.us, digg, technorati, blinklist, fresqui y meneame)?
    desde ya, muchas gracias!
    ahí se ven!

  32. @el señor de las manzanas: pues lo primero tienes que ver qué tipo de enlace utiliza la nueva aplicación a agregar. Luego tienes que agregar una nueva línea en Share_This_Blogger.txt donde defines ese enlace (puedes tomar de ejemplo las líneas que ya existen para servicios como meneame, etc…).

    También tienes que agregar en Share_This_Blogger_css.txt una definición del css (para que aparezca la imagen del servicio, por ejemplo).

    Y por último, en Share_This_Blogger_cuerpo.txt agregar el enlace al código. Ya te digo que mirando los servicios que ya existen te será fácil replicar uno nuevo.

  34. loretahur, hice lo que me dijiste y funciona todo bien, excepto que no me aparecen los íconos de los nuevos marcadores que agregué. subí los .gif a imageshack.us, puse los vínculos, todo bien, o sea, sé cómo se hace, pero cuando voy a ver cómo queda sólo aparece el vínculo sin el ícono. no entiendo qué pasa. supongo que tendrá que ver con el script, que no está editado, no tengo idea.
    ahí se ven!

  35. @el señor de las manzanas: he visitado tu blog y yo sí veo los iconos. Quizás es que no has publicado lo nuevo. Si es así, publícalo para que pueda ver el código que has puesto

  36. no, los iconitos que pusiste vos sí se ven. igual no hay problema, fui yo, que me olvidé de cerrar un corchete (este simbolito: }) y por eso no aparecían los que había agragado yo, jaja.
    muchas gracias por tu ayuda, loreta! =D
    ahí se ven!

  37. Hola. ¿Se sabe si hay alguna adaptación para el nuevo Blogger (ya sin beta)?

    Gracias. Saludos

  39. @tatoon: por ahora sin novedades 😉

    A ver si me pongo un día (pero es que yo sigo sin migrar del todo… y me da una pereza…)

  42. Ya se puede colocar en Blogger con la versión nueva. Claro que está en inglés…

    Cuando copiamos el código que nos dan en la web y nos disponemos a pegarlo en la plantilla nos da error, hay que colocar en el código justo después de donde se ve & esto: amp
    Si no nos dará error la plantilla.
    Esta es la web:
    http://sharethis.com/publisher

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *