Colocar el botón de Google Buzz en Blogger : El Escaparate de Rosa

Me solicita Carlos Soler a través de un email, si podría explicar como colocar el botón de Google Buzz en las entradas del blog.

Google Buzz es un servicio que permite la integración con diversas redes sociales, incorporando Google Reader, Twitter, Flickr, Picasa y Youtube. Puedes compartir de forma rápida con todo el mundo o con sólo algunos de tus contactos, todo en una sola página.
Para acceder a todas las posibilidades que ofrece este servicio, únicamente necesitas una cuenta de gmail y estarás listo para probar Google Buzz.

[1] En el panel de configuración de Blogger accedemos a la pestaña "Diseño"

[2] Pinchamos en "Edición HTML".

[3] Marcamos la casilla "Expandir plantillas de artilugios".

[4] Localizamos esta línea de código en la plantilla:

<div class='post-header-line-1'/>

[5] Inmediatamente después de esa línea pegamos el siguiente código:

<div style="float:right;padding:4px;">
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvUyZSVT28Fc2nkWizU15bME3Yzkm1q_37KH75D6l7RFgPvcSclFu4uBTbs-IELkikqQQ-HsidHHpOi3PngypBm46x92fH_ZbsFu4Kwjrmex0mbkA1x1juUT_D_U2PHX61Ub-D3IhPKk/s320/Google-Buzz-Share-button.png' style='border:0px;'/></a>
</div>

[6] Usamos el "Vista previa" antes de guardar.

Notas

Si por lo que sea no encontráis la línea de código a buscar, se obtendrá prácticamente el mismo resultado colocando el código justo antes de <data:post.body> (en algunas plantillas <p><data:post.body></p>).

Si colocamos el código justo después de <data:post.body>, el botón se mostrará entonces al final de cada entrada.

Si queremos usar el botón pequeño o compacto, cambiaremos la url que he marcado de color naranja en el código por esta otra:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrPwu7tw5momwxbTpFKX-AFpi7i5yJIxAxEpSPmcV9w1NleQ6onNT-ZOShY1fNJE7XXcN_m94m-tcCd7fBQzKtt021I7JA4C__g1qBP6XtbDwQCVbr-bSiKEhyjr5clPG9vA8vFHCuDI/s320/Google-Buzz-share-button-compact.png

El botón se mostrará a la derecha de las entradas, si queremos moverlo a la izquierda, cambiamos en el código right (destacado en color azul) por left.

Visto en: Tips o Tricks

Actualización:

En el blog de Pizcos podrás ver como añadir un botón para Google Buzz que contabiliza el número de veces que la entrada ha sido compartida

29 comentarios:

Joaco: Yo ya tengo el botón de tweet this en ese lugar, como hgo para ponerlo al lado de este... lo tengo en este blog: triogeek.blogspot.com
también puedes mirar algo del blog, tal vez te guste ;) Es nuevo ;); 26/2/10
Unknown: Hola rosa
me parece mui buena opcion para añadir al blog
gracias por compartirlo
y saludos
bye; 26/2/10
Viviana: y para los q de un lado tenemos el boton de facebook y del otro, el de twitter?

te preguntaria en donde lo colocamos, pero temo tu respuesta jajajajajaajajaj; 26/2/10
Valentín VN: Muchas gracias Rosa, estaba buscando algo así.; 26/2/10
Anónimo: Ascesino96 Localiza donde has puesto el código del otro y añádelo a continuación o antes...; 26/2/10
Anónimo: Viviana y Sofia Eso no puedo preverlo... indico como colocar este y donde, lo demás es cosa vuestra...; 26/2/10
HechoenMarketing: Hola Rosa yo tengo el Blog http://www.moreadwords.com.ar/ al poner este código, me pasa que se me borran las estadisticas del botón retweet, me parece que no pueden convivir, a un si lo pongo uno como left y el otro como right, se rompe todo el texto y de más, exisitira alguna otra alternativa? Gracias! mi mail es Akaztro@gmail.com o bien si puedes republicar este posto con la solucion (en caso de que exista); 26/2/10
Anónimo: Muchas gracias Rosa! Un abrazo.; 26/2/10
Matías: Hola rosa me gustaria que me des la url de tu favicon en 16x16 ya que he tomado la iniciativa de poner un espacio gratuito para favicones :)

Si quieres incluir mi blog en un post mi blog es http://todojuegosflash.blogspot.com/

Saludos ;); 26/2/10
Joaco: pero me queda uno más abajo que otro ya que el de twittmeme es más grande, en fin, igual ahorita no lo voy a agregar, un saludo ;); 27/2/10
Anónimo: Fracias rosa,esto quedo perfecto,,eres de gran ayuda para todos..bay cuidate

http://nuevayoresblogs.blogspot.com/; 27/2/10
Anónimo: More AdWords Precisamente en el blog de Carlos Soler (enlace en la entrada) puedes ver los dos botones colocados y conviviendo sin problemas...; 28/2/10
Omar Ysrael Cabrera Abán: Hola rosa perdon por escribir en esta entrada pero no sabia donde hacerlo, queria preguntarte como podria cambiarle el color a mi blog, la parte q esta de blanco me gustaria que me indicaras como hacer para q sea de color negro, de antemano muchas gracias.
mi blog: http://llallaguaweb.blogspot.com/; 2/3/10
Anónimo: llallaguaEn esta parte del código de tu plantilla:
body {
background:#fff url("http://img215.imageshack.us/img215/6872/bgbm7.jpg") top left;

Donde dice #fff lo cambias por #000; 2/3/10
Omar Ysrael Cabrera Abán: :) Muchas gracias Rosa eres la mejor, ya lo logre y ahora estoy escojiendo una buena imagen para el fondo de mi blog.; 2/3/10
Urvanna Handmade: hola ROSA!! muyy buena opcion,vere si me animo a tocar la plantilla,jajaja!!!ahora quiero hacerte una consulta,note que mis vistas han bajado bastante,me he linkeado en muchos lugares,pero esto no aumento el trafico.sabes que pude ser???
http://www.ivannateves.blogspot.com/
gracias y q tengas un lindo dia!!!; 13/3/10
Rosa: IVANNA TEVES Las visitas vienen y van... sin ninguna razón...; 13/3/10
Juana Corbalán: Hola Rosa.
Me parecen geniales tus explicaciones tan claras y detalladas. ¡Y sabes elegir muy bien los temas!
Enhorabuena! Vendré mucho más por aquí.
Saludos
Mis blogs:
htpp://www.corbax.com/blog/
http://cagitan.blogspot.com/; 24/3/10
Vanessa: Hola Rosa, coloqué los dos botones, tanto el de googlebuzz como el de tweetmeme, pero los puse al final pues al comienzo me quedaban uno a la derecha y otro a la izquierda. Como no sé si se pueden poner los dos a la derecha, me gusta más como lo tengo.

Muchas gracias, como siempre gran ayuda. Vanessa; 15/4/10
Anónimo: Vanessa Gracias corazón! :D; 15/4/10
@ManelFdez: Rosa,
colocado el botón y funcionando. ¡Gracias!; 16/4/10
Paolo Blanco: Que tal Rosa, la Verdad es que me hice bolas y no sabia donde colocarlo, pero me di cuenta que se puede integrar al final después de esta linea:

post-footer-line post-footer-line-1

Entra al sitio (revista-ea.com) haber que te parece, pero en lo que ami respecta quedó genial, y gracias por todo Rosa.:D; 18/4/10
Anónimo: The Marco 3:16 Pues si, está genial tu blog... justo el tipo de diseño que a mime gusta y nada pesado... lo justo y necesario en gadget. ¡Enhorabuena! :D; 18/4/10
Anónimo: Te paso un email para hacer una pregunta si te paece bien.

saludos.ANGELINA; 27/4/10
Anónimo: ANGELINA GOMEZ RUEDA Claro, para eso está :D; 27/4/10
Anónimo: rosa todo me esta funcionando al 100% gracias; 19/6/10
El Predicador ©: Rosa... y como hago para que esten uno de bajo del otro, por ejemplo: Share, Buzz y Twitter; 12/10/10
Anónimo: El Predicador © Podrías colocar los códigos de los otros dentro del mismo div, es decir, antes del </div> de cierre de este mismo y entre el código de cada botón pones </br> para que se muestren uno debajo de otro....; 12/10/10
Monica: Gracias Rosi!!! tarde en colocarlo pero ya esta en mi Blog; 29/11/10

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.