Con la llegada del botón +1 (PlusOne) y su prometedor éxito, es seguro que la mayoría ya sabe cómo agregar el botón +1 de Google en el blog. ¿Pero, qué posibilidades tiene el botón para ser configurado?
La verdad es que si partimos del punto que podemos hacer un callback para leer funciones Javascript entonces las posibilidades son muchas.
Una de esas posibilidades es poder mostrar un texto en el botón +1, un mensaje cuando el usuario nos regale un voto y otro mensaje para cuando el usuario quiera deshacer la recomendación.
Puedes ver el ejemplo en este botón, si le das click para recomendar aparecerá un mensaje de agradecimiento, después de eso dale click nuevamente y aparecerá un mensaje distinto.
Ahora vamos a ver cómo ponerlo en el blog. Entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios.
Si lo quieres debajo del título de la entrada entonces busca esta línea:
<div class='post-header'>O si lo quieres al final de las entradas entonces busca esta línea:
<div class='post-footer'>En cualquiera de los casos, agrega debajo de una de esas líneas lo siguiente:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// mensaje Google+ (ciudadblogger.com)
function saludoPlusOne(plusone) {
var div_ty = document.getElementById("mensajePlusOne");
if (plusone.state == "on") {
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros."; document.getElementById('mensajePlusOne').className='msgPlusOne';
} else {
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad."; document.getElementById('mensajePlusOne').className='msgPlusOne';
}
}
//]]>
</script>
<div align='right'><g:plusone callback='saludoPlusOne'/>
<div id='mensajePlusOne'/></div>
Ahora antes de ]]></b:skin> pega los estilos:
.msgPlusOne {
background:#0B0B3B;
color:#A4A4A4;
padding:10px;
font-style:italic;
}
Esos son los estilos que tendrá el recuadro donde aparecerá el mensaje, puedes establecer otros o simplemente no ponerlo si es que no quieres que tenga alguna apariencia. Lo que está en color rojo son los mensajes que mostrará, el primero es el mensaje que aparece cuando se hace click para recomendar, y el segundo para cuando ya no le gusta al lector.
Y habiendo hecho eso tendrás el botón +1 de Google que muestra un mensaje al hacer click.
Ciudad Blogger
Muchas gracias Potro por tus aportaciones, siempre super interesantes. Saludos.
ResponderEliminarGenial! Potro Muchas Gracias por tus tips :)
ResponderEliminarmuy bueno potro , yo como quien lo dice e sobrecargado mi blog con estos botones , que la verdad ayudan muchisimo al posisionamiento.
ResponderEliminarEsta muy bueno este truco, lo instalaré seguro =) Gracias potro
ResponderEliminarPablo, saludos y buen inicio de semana!
ResponderEliminarSergio Molina, gracias a ti por pasar bro.
alvaro, pues lo ideal es no sobrecargar tanto, pero si te funciona pues no hay mucho que objetar ;)
Olmo Axayacatl, que todo salga bien!
Tengo otro boton que quedo justo debajo del que tu recomiendas, sabes como lo quito.
ResponderEliminarMHERMON
Intente poniendo el script en un gadget pero no funciona el mensaje, como habría que hacer para que funcione si es posible? Muchas gracias.
ResponderEliminarMHermon, entré pero no vi el otro botón, supongo que ya supiste quitarlo.
ResponderEliminarMaGoS RaDioMuSiC, buen inicio de semana :)
3-M-i-L-i-0, en los gadgets no funcionan los botones.
Excelente!, xD parece que ya no te gustamos u_u, ojala nos des otra oportunidad T_T xDDDD
ResponderEliminarse que te va a parecer raro e inusual pero no te encuentro y nesesito alluda en otro post tullo
ResponderEliminares sobre poner 3 fanbox en uno solo agruparlos entre pero no encontre unas cosas ya comente lo que no encontraba en el otro tema buen te sigo esperando muy buena pag.
TutoGeek, es mejor que ponerle un mensaje de resentimiento ¿no?:P
ResponderEliminarX.A.N.A, ya te he respondido allá, lo que sucede es que voy respondiendo conforme llegan los comentarios, y había otros antes que el tuyo ;)
Hola Potro:
ResponderEliminarHecho.
Saludos
Genial, queda de maravilla.
ResponderEliminarUn saludo!
Este comentario ha sido eliminado por el autor.
ResponderEliminargracias no tenia idea de ke se podia configurar tanto el boton de google
ResponderEliminarHola Potro:
ResponderEliminarsera que puedo poner también un botón me gusta de facebook, en ese mismo lugar donde es estamos poniendo el botón +1 de Google, es posible!?
Si es posible como lo pongo y con que codigo?
Gracias Potro por tu ayuda y por leer mi comentario.
Oye mi blog no tiene este code class='post-header'> y si lo pongo en abajo de este code class='post-header-line-1'/> se sube arriba del titulo y queda mal. Como lo puedo poner arriba si mi blog to tiene es codijo. Muchas gracias.
ResponderEliminarOhh me sigue gustando, podria intertar de nuevo el poner el boton jeje lo intentare y vere como funciona ahora.
ResponderEliminarSaludos...
FRANCISCO, te ha quedado muy bien!
ResponderEliminarRoster, ¡saludos!
Peyo, y quienes saben bien Javascript seguro podrán hacer muchas cosas más.
bU, gracias a ti por pasar.
.:R.G.F:., por supuesto, el código sería así:
ResponderEliminar<table border="0" cellpadding="4"><tbody>
<tr><td> ...Aquí el código del botón +1... </td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=450&height=40&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px'/></td></tr></tbody></table>
Jason Santoro, ¿y cuál es tu blog donde lo quieres poner?
ResponderEliminarjavi_anubis , que todo salga bien ;)
@ El Potro y mi blog es http://www.mygossip565.com y estube intentando y puse tu codigo arriba de este codigo funciono pero no muy bien me gusto las lineas que dejo en mis posts.
ResponderEliminarOla potro mi blog es estilo Magazine , http://saintkeane.blogspot.com/
ResponderEliminarPuse , y si sale pero , desplaza alguna lineas del post.
Otra que digamos le goy un G+ a un post del mediodigamos el tercero y el mensaje me sale en el primer post.
Uhm se puede cambiar el fondo que me sale azulito ? pa combinarlo con los colores de mi blog ?
Atte. Jimmy
Gracias de antemano
Jason Santoro, entré a tu blog y veo el botón debajo del título de la entrada, tal como debería quedar. Supongo que ya lo has arreglado. Saludos.
ResponderEliminarLJK, veo que eso sólo sucede en la portada, quizá la opción más "sana" es que encierres el código en una condicional para que sólo se muestre en las entradas individuales. Ahí no tendrás ese problema. Para cambiar el color se hace en background ahí se cambia el código del color.
una pregunta potro.
ResponderEliminarhace tiempo que tengo de estar buscando un codigo en html o scrip. que sea capaz de mostrar un iframe de una pagina pero que se pueda modificar para que muestre solo la zona que uno quiere que se vea y no la pagina completa. algo asi como el centro de la pagina o otra parte que uno quisiera meter en el blog. sera eso posible.
Muchas gracias Potro, es muy interesante, tendré que ponerlo en Diseño & Blog´s :)
ResponderEliminar@ El potro perdon, no mire que mi comententario no tenia els codigo. Puse tu codigo arriba de este data:post.body/ si sale el buton pero no muy bien me gustan las lineas que dejo en mis posts. Soy muy picky. Gracias por la ayuda.
ResponderEliminarcuanto me viene a costar una publicidad de 150x150 en tu web....para prenotarte 2. Fbk kendall de la Rosa. Twitter dembowz4.
ResponderEliminarhenry Jason, me temo que no es posible. Un iframe lo único que hace es mostrar una página fuera de su dirección original, pero no la altera para mostrar únicamente un área determinada.
ResponderEliminarMaGoS RaDioMuSiC, ¿verdad que sí? ¡saludos!
DisenBlog's, gracias a ti por tu visita y comentario!
Jason Santoro, supongo que lo que no te gusta mucho es que el recuadro del mensaje queda muy pegado a los posts, y que se mezcla con el otro botón de los tweets. Si a eso te refieres entonces puedes agregar unos estilos para separar más el recuadro del mensaje de los posts y reducirlo de ancho.
ResponderEliminarEso puedes hacerlo cambiando esto:
.msgPlusOne {
background:#00ffff;
color:#A4A4A4;
padding:10px;
font-style:italic;
}
Por esto:
.msgPlusOne {
background: cyan;
color: #A4A4A4;
padding: 10px;
font-style: italic;
margin-bottom: 10px;
margin-right: 100px;
width: 250px;
}
Dembowz4, las únicas medidas por el momento son de 125x125 pero por ahora todos los espacios se encuentran ocupados. Cuando se desocupe un espacio aparecerá el banner de disponibilidad con el enlace a la información de los precios. Saludos.
ResponderEliminarok esta bien pero si te lo quiero compral En Anticipo.
ResponderEliminarpara estar seguro Deque otro no Lo Compre.
Eso Dentro De Cuanto Seria Los Spacios Disponibles..
Y Si Me Puedes Dar Otras Pagina De Referencias Para Yo Anunciar Mi Blog. Musical
ResponderEliminarPozo+10™ , ni idea, desconozco cómo lo hayas configurado y asociado a Hotmail, pero igual puedes crearte uno con Google Apps:
ResponderEliminar[Configurar correo personalizado]
Dembowz4, la disponibilidad no te la puedo asegurar ya que algunas veces poco antes de que un banner caduque el que lo ocupa extiende el tiempo de publicación. Probablemente haya uno disponible el 15 de agosto. Mientras te dejo el enlace con la información sobre la publicidad y las condiciones:
http://ciudadblogger.com/p/ventas.html
Queda perfecto!
ResponderEliminarGracias!!
HOLA POTRO QUE BIEN COMO SIEMPRE A LA VANGUARDIA SOLO UNA COSAS YO TENGO MI BOTON PERO NO UNA CUENTA VOS NO ME PODRÍAS INVITAR A GOOGLE PLUS PARA TENER UNA CUENTA AHI
ResponderEliminarMerovingio, gracias a ti por tu visita!
ResponderEliminarTH3 V1P3R, por supuesto, dame tu correo para enviarte una invitación de Google+
Pozo+10™, qué bueno que ya lo has resuelto todo :)
@ El Potro gracias me ayudo mucho el codigo.
ResponderEliminarMI CORREO ES ESTE giovanisr@live.com.mx de antemano muchas gracias como siempre
ResponderEliminarJason Santoro, por nada ;)
ResponderEliminarTH3 V1P3R, listo!
GENIAL GRACIAS POTRO SOS MI IDOLO
ResponderEliminarGracias potro :P
ResponderEliminarPotro, una cosa que valoro mucho, es a personas como tú, el compartir tantas informaciones que nos ayudan o desconocemos para ¡Juntos ser más eficientes!
ResponderEliminarNuevamente ¡Felicidades! por todos los consejos.
Gracias José. La idea es poder compartir lo que aprendemos para que el conocimiento no se quede en unos cuantos sino que esté al alcance de todos.
ResponderEliminarSaludos.
Vaya este truco se ve genial agregandolo
ResponderEliminar¿Verdad que sí? Parece que a muchos les ha gustado :)
ResponderEliminarEn primer lugar, agradecerte tus recomendaciones, eres muy didáctico y gracias a ello no me siento tan desastre.
ResponderEliminarEn segundo lugar, esta vez he podido poner el boton de G+, pero no me sale el mensaje... :-(
¿Se te ocurre qué es lo que puedo haber hecho mal?
Muchas gracias y disculpa la torpeza.
Hola C. Martín,
ResponderEliminarMuchas gracias por tu amable comentario.
Seguramente no ha funcionado porque el último código, el de los estilos, lo has puesto dentro del script (el primer código), y deben ir justo antes de la etiqueta ]]></b:skin>
Prueba de nuevo poniéndolos en el lugar que se indica y mira si eso lo hace funcionar.
Saludos.
Hola potro te comento que ya puse este truco en uno de mis blog y me quedo genial, gracias por el truco, quisiera saber si hay algun script que muestre las cantidades de post, comentarios que tiene un blog me puedes decir cual seria el codigo y potro me ayudas en explicarme el porque a l ahora de cargar la plantilla de mi blog se agranda bien feo y cuando termina de cargar se acomoda me puedes decir a k se debe porfavor.
ResponderEliminarMi blog es: Altabloggers
Gracias.
Hola Wmasterconsultores,
ResponderEliminarEn esta entrada puedes ver ese gadget de estadísticas.
Lo que sucede con la plantilla es que las imágenes tardan en cargar, y como no cargan entonces el blog se empieza a acomodar como va leyendo los códigos, una vez que terminan de cargar entonces todo se pone en su lugar.
Ya tengo cuenta ahí, poco la uso, pero ha servido más igual para invitar a otros a que prueben la nueva red :)
ResponderEliminarLa imagen en miniatura es el avatar, ¿a ese te refieres?
Ese lo toma de tu perfil público de Google.
Saludos!
hola, muchas gracias pero quisiera saber i se puede colocar para que solo recomiende la pagina principal
ResponderEliminarClaro, sólo cambia esto:
ResponderEliminar<g:plusone callback='saludoPlusOne'/>
Por esto:
<g:plusone callback='saludoPlusOne' href='http://nombre-de-mi-blog.blogspot.com'/>
O si lo prefieres mira esta entrada:
http://ciudadblogger.com/2011/07/boton-google1-plusone-en-una-barra.html
Sólo localiza el código de esa área y ponlo al lado, pero como este botón tiene un contenedor abajo (donde muestra el mensaje) no sé si pueda quedar bien ahí al lado. De todas formas haz la prueba.
ResponderEliminarHola, Potro.
ResponderEliminarHe colocado el código pero no aparece nada. Lo he intentado con otras opciones pero no logro que se vea el botón. ¿Puedes ayudarme a detectar el problema?
Hola Efraín, necesitaría verlo puesto en tu blog para ver qué puede estar fallando.
ResponderEliminarHola de nuevo.
ResponderEliminarEstá puesto para que aparezca al final de las entradas pero no sale. Mi blog es http://www.diariodelcosmos.net/
Pues nada Efraín, no veo puesto ninguno de los códigos en ese blog.
ResponderEliminarTe pido disculpas, Potro. Estuve probando algunas soluciones y puede que miraras justo en el instante en que quité el código para intentarlo con otro.
ResponderEliminarEn cualquier caso lo he conseguido con la forma "estándar". Coloqué el código del botón justo antes de las metaetiquetas, y luego "g:plusone size='small'" justo después de "b:include data='post' name='postQuickEdit'".
No sé por qué, pero ha funcionado y así se va a quedar hasta que aprenda un poco más de html. Muchas gracias por tu tiempo.
Descuida Efraín, qué bueno que al fin pudiste ponerlo. Cualquier cosa por acá andamos. Buen fin de semana.
ResponderEliminarHOLA AMIGO ME QUEDA MUCHO ESPACION EL LAS DEMAS ENTRADAS CON LO COMENTARIOS HAY ALGUNA FORMA DE REDUCIRLO... O SEA Q DE DONDE TERMINA LA ENTRADA A DONDE ESTAN LAS ETIQUETAS Y COMENTS ES MUCHO ESPACIO Q NO ME AGRADA, Y ESO LO HACE DESDE QUE AGREGUE ESTE BOTON QME ENCANTO :)
ResponderEliminarHola *✿｡мiαnαly｡✿* ,
ResponderEliminarHe entrado al blog de tu perfil pero no veo ningún espacio excedente al final de las entradas o.O
creo q no es mucha es muy leve gracias asi la dejare :)
ResponderEliminarHola Potro, tengo otra pregunta, en vez de poner mensaje ¿se puede poner imagen?
ResponderEliminarNo lo he intentado, pero prueba poner en lugar del texto rojo el código de una imagen:
ResponderEliminar<img src="URL de la imagen"/>
Lo he intentado poniendo la url de la imagen en una parte de tu codigo pero no se si he eliminado algo que no debo..no se si lo hice bien, asi que no me ha dado resultado, cuando tu tengas tiempo podrias intentar hacer algo asi.
ResponderEliminarAhhhhh me acaban de aparecer los botones al intentar lo de la imagen jajjajaj
un saludo
Tienes razón, no funciona con imágenes, sólo con texto :(
ResponderEliminarGran truco Ciudadano Blogger!
ResponderEliminarGracias :)
ResponderEliminarMe gusto el botón, pero lo quisiera debajo del post como este pero sin el mensaje. Como lo cambio? También quiero aprovechar y preguntarte si sabes algo de problemas con blogger, tengo varias entradas que no se ven, dependiendo del link aveces salen pero si la buscas directo no. Gracias por tu tiempo.
ResponderEliminarHola Mari, en la entrada dice cómo ponerlo debajo de las entradas.
EliminarLo de las entradas, ¿hiciste algún cambio recientemente en la plantilla? ¿has probado verlo en otro navegador?
Saludos.
Llevo bastante tiempo queriendo poner el botón +1 en mi blog de cocina esta noche gracias a ti lo he conseguido. Cuando he visto que estaba en todas las entradas de mi blog me ha dado una alegria grandicime de ver como lo he conseguido. Mil gracias
ResponderEliminarA mí me alegra también que lo hayas conseguido, y más aun sabiendo que ya tenías un rato tratando de tener algo así :)
EliminarHola amigo [ El Potro ]
ResponderEliminarTe tengo una nueva inquietud..
Será posible el poder poner el botón "Google+1" junto con las imágenes de quienes dieron clic cómo lo indica la siguiente imagen:
http://img1.imagilive.com/0312/Google_1_OK.png
Yo puse el botón en la parte inferior de fan Facebook pero no se cómo poner todas la opciones que se ven en la imagen anterior.
Tan bien me podías ayudar a que la linea de borde se separe más de el botón?
http://img1.imagilive.com/0312/Google_1_Mal.png
Gracias por tu ayuda.!
Hola BDJMarcelo, para poner las anotaciones al lado cambia esta línea:
Eliminar<g:plusone callback='saludoPlusOne'/>
Por esta otra:
<g:plusone callback='saludoPlusOne' annotation='inline' />
Para separar los bordes podrías poner un padding en los estilos del contenedor:
padding:7px;
Saludos.
Hola amigo [ El Potro ]
EliminarE estado un poco ocupado por eso no e podido implementar tu sugerencia pero ya puse el cambio y sólo aparece una pequeña imagen junto donde está el botón de G+1.
NO cómo lo indica la imagen con todos los botones y textos:
http://img1.imagilive.com/0312/Google_1_OK.png
Ojalá y pronto puedas conseguir el código para poder ponerlo en un blog.
Chau... Gracias...!
Hola de nuevo BDKMarcelo, el atributo annotation='inline' es el único que permite mostrar los avatares de quienes han dado click, pero toma en cuenta que sólo podrás ver los avatares de quienes estén en tus círculos, de lo contrario no se mostrarán.
EliminarSaludos.
Gracias potro ya lo puse, en http://www.noticiasps4.info abajo del buscar, muy muy serca del buscador. Gracias una vez más por tus tantas ayudas que brindas.
ResponderEliminarPor nada Oscar ;)
EliminarHola Amigo [ El potro ]
ResponderEliminarPor favor me podrías ayudar..
Me gustaría tener el botón (Google +1)junto con el botón (Me Gusta) de "facebook" en la parte inferior de las entradas uno junto al otro pero centrados.
¿cómo lo puedo hacer ?
Gracias por la ayuda..!
Pon los códigos de ambos en una tabla, así será más fácil alinearlos:
Eliminarhttp://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html
http://ciudadblogger.com/2011/06/anadir-el-boton-1-de-google-en-blogger.html
http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html
http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html
Hola Amigo [ EL Potro ]
EliminarTe comento que intenté poner las tablas a los dós códigos pero los resultados no són los que quería..
En esta imagen puedes ver el código del botón Google+1 junto con el de Facebook.
Están con los códigos de las tablas sin borde.
http://img1.imagilive.com/0412/Cdigo_1.png
En vista previa queda así.
http://img1.imagilive.com/0412/Previa_1.png
Como ves no están alineados los dós botones, pero si quito el código de Facebook queda así.
http://img1.imagilive.com/0412/Previa_2.png
Pero me gustaría que quedasen mas o menos así:
http://img1.imagilive.com/0412/Previa_3.png
Perdona la molestia y gracias por la ayuda.!
Mira de nuevo la entrada sobre el botón 'Me gusta', verás que dentro del código hay una especificación (bueno, dos) sobre la altura del botón, si reduces esa altura seguramente el botón quedará del mismo alto que el otro botón y podrán verse alineados ambos.
EliminarHola amigo [ El Potro ]..
EliminarGracias por el dato ya logré al fin poner los dos juntos, cambie el tamaño del (Me gusta)(width:100px; height:30px) lo único malo es que NO se ve los avatares de quienes le gusta el contenido. Ya cambie (show_faces=false)(show_faces=true)
¿Que puedo hacer.?
Gracias por la respuesta.
Para que las pueda mostrar es necesario que tenga el ancho original (me parece que es de 450px) y además recuerda que sólo aparecerán los avatares de quienes sean tus amigos en Facebook.
EliminarHola amigo [ El Potro ]
EliminarPues NO no funcionó... Lo único que hace es ubicar los dos iconos a la izquierda y no aparece nada.
Bueno voy a dejarlo así por el momento de todas maneras gracias..
Hola Potro:
ResponderEliminarEstoy tratando de poner este bendito botón y no queda. Puedes ver que pasa? He seguido todos los pasos e incluso en uno de los comentarios sugieres cambiar unos px pero NADA. Además me gustaría colocarlo junto con el Botón de RSS que tengo en el sidebar. SE PUEDE? O colocar LOS BOTONES DE RSS/G +1/FACEBOOK en ese mismo lugar del RSS que tengo ahora.
Agradezco tus comentarios.
Un abrazo desde Montevideo-Uruguay
Hola ELSACERDOTE2011, ¿a qué te refieres con que no queda, no funciona o no aparece?
Eliminar¿En cuál blog lo has puesto?
iAy! Me gustaria usar eso en mi site! Nos es blogger... Como debo usar esto en otro sitio que no sea blogger?
ResponderEliminarSólo lo he aplicado en Blogger, desconozco si pueda usarse en otras plataformas.
EliminarHola Potro! ;-)
ResponderEliminarMe puse eso al mi entrada, pelo cuando hago click para compartir en GooglePlus veo la mensaje, pero cuando voy a mi Profile Google+ no hay lo que he compartido!
No hay de quedar la entrada compartida en timeline de Google+???
Mira a una de las entradas que puse este codigo
http://www.garota-web.blogspot.com
:-/
Hola zs, este botón es para que la gente haga un +1 en la publicación, no para que aparezca en Google+. Existe la opción de que cuando hagas +1 te aparezca la opción de compartirlo. Para habilitar esa opción mira el comentario #80.1
EliminarSaludos.
111111111111
ResponderEliminar