El botón no sale, sale pero no refleja los +1 que realmente lleva acumulados, cuando coinciden dos botones en la misma página lo mismo desaparece un botón que el otro sale a cero... En fin, diversos avatares que con lo sencilla que es la instalación del botón, parecen increíbles.
Servidor no había tenido nunca este problema hasta que hace unos días se puso a trastear la plantilla y tocó algo sin recordar qué. Eso provocó estos problemas que comento.
Pero afortunadamente, el Sr. Pizcos publicó ayer un artículo que me hizo recordar dónde estaba el quid de la cuestión. Y este no es otro que saber el lugar adecuado dónde colocar el código del script.
Hay que distinguir entre el propio código que captura y genera los datos del botón y el código que lo "pinta" en web.
El primero hay que situarlo antes de </body> ya que precisamente las pegas surgen cuando se coloca en el sitio que para nosotros debería ser el normal (<head>). Podéis usar el script normal o el asíncrono. Este último sirve para que la página cargue sin la interferencia del botón. Aquí están los dos y podéis usar el que prefiráis, siempre teniendo en cuenta situarlo antes de </body>:
Estándar
<!-- Boton +1 -->
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
Asíncrono
<!-- Boton +1 -->
<script type='text/javascript'>
//<![CDATA[
window.___gcfg = {lang:"es"};
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
window.___gcfg = {lang:"es"};
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
//]]>
</script>
Una vez metido esto en la plantilla, ahora sólo tenemos que poner el siguiente código dónde queramos que aparezca el botón (post-footer, post-header, etc.)
<g:plusone></g:plusone>
Pero si por cuestiones de diseño, el botón debe aparecer más de una vez por página, por ejemplo como ocurre en el Home cuando se ven varios posts de una tacada, a este código hay que añadirle la dirección de la entrada correspondiente para que no haya conflictos. En Blogger, esta dirección la conocemos por la variable data:post.url:
<g:plusone expr:href='data:post.url' ></g:plusone>
Y cómo ya comentamos en una entrada anterior, si además queremos poner un botón adicional para hacer +1 en nuestra dirección principal, directamente ponemos dicha dirección y listo:
<g:plusone href="http://www.oloblogger.com" ></g:plusone>
Como podéis comprobar, actualmente en esta misma entrada coexisten sin problemas ese botón de arriba que va sólo sobre la dirección principal, el de la barra lateral con el mismo destino, otro en la parte superior del post con referencia a la dirección de la entrada y otro en el pie del post con idéntico puntaje.
Y tampoco habrá ningún inconveniente si se utilizan simultáneamente los botones sociales que nos proporciona Blogger de serie.
Actualización:
Tal y cómo avisa Chacien en un comentario, este código es innecesario desde que Blogger incorporó de serie como gadget, el botón +1 para recomendar el sitio (no las entradas).
Para mayor ventaja, el script que se inserta en ese caso es el asíncrono, en mi opinión el más conveniente.
Tal y cómo avisa Chacien en un comentario, este código es innecesario desde que Blogger incorporó de serie como gadget, el botón +1 para recomendar el sitio (no las entradas).
Para mayor ventaja, el script que se inserta en ese caso es el asíncrono, en mi opinión el más conveniente.
¿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.
Y muchos más artículos interesantes si nos sigues en...
Buen artículo Oloman.
ResponderEliminarNo es necesario especificar el atributo href para las entradas, siempre y cuando el botón se encuentre en las entradas individuales (al condicionarlo para que se muestre en "al entrar a cada post"). Y si usas + botones como para que te den +1 al blog, escribes la URL como mencionas.
En las "páginas estáticas" (ya lo usé), habrá que especificar la URL para cada una.
Feliz 2012!!
¿Sabías que estos botones no aparecen con Mozilla Firefox?
ResponderEliminarHe estado viendo varios blogs que los tenéis instalado, y con este navegador ni siquiera son visibles.
Yo estoy utilizando firefox 9 y los botones de google plus se ven muy bien aqui y les di su respectivo clic a cada uno xD
ResponderEliminarAhora a probarlo en mis blogs...
saludos gente!
Así es Karla. Gracias por hacer ese buen resumen. Feliz Año.
ResponderEliminarBlogsmadeinspain, ya vi hace unas semanas que volviste a la carga con tu página pero centrado en plantillas y promocionando tus diseños ;) Sobre lo de Firefox, yo uso la versión 8 y con este sistema se ven perfectamente. Quizás el problema esté en la configuración del propio navegador.
Oziel gracias por recomendarnos y por confirmar la visibilidad en FF 9. Saludos.
este boton lo kiero poner dentro de estos
ResponderEliminary kitarle ese de votar y poner el de g+
pero como lo hago?
Por favor, no hace falta que me dejes comentarios sobre lo mismo por todas las entradas. Ya te contesté en la que enlazas. No te muevas de ahí si sigues teniendo problemas tras mi respuesta.
EliminarTú no lo has puesto con este código sino con el de Addthis y con ese, yo no sé controlarlo. Podrías probar con lo que se explica aquí que yo creo que sí te va a salir.
ResponderEliminarObservo que el botón está, pero que no tiene contenido. Es decir, aparece la capa, está reservado el espacio para mostrar el botón y están los estilos del botón. De hecho tienes tres, uno junto a otro ente el sobre de envío por e-mail y los botones Compartir. Sin embargo, no se carga en ese espacio el iframe que muestra el botón y por eso no se ve nada.
ResponderEliminarEsos son los síntomas, pero no tengo ni idea de cual puede ser el diagnóstico y la cura. Pienso que debes tener algún script que hace que no se muestren los iframes o que interfiere de alguna manera con el botón, así que mientras no soluciones eso, lo pongas con el codigo que lo pongas, creo que no te saldrá.
Y yo desde aquí no puedo ver los scripts que tienes, así que tendrás que ir quitando y probando si se ve, hasta que des con el que estropea el asunto. Prueba uno a uno y los vas reponiendo según compruebes que no afectan.
Lo siento de verdad, pero no se me ocurre nada más. No soy capaz de solucionarlo todo :(
ResponderEliminarGracias, el problema que tenia tenia lo he solucionado - salu2
ResponderEliminarHe comprobado que si instalas el nuevo gadget del botón +1, automáticamente, a través de menú "Diseño", no es necesario volver a añadir el script para instalar el botón que contabilice los +1 en cada uno de los post. Te lo digo por si quieres aclararlo en una actualización, no sea que a algún despistado le pase como a mí, que después de instalar el gadget en la sidebar volví a incluir el script que proporcionas en este post, lo cual no es más que una pérdida de tiempo.
ResponderEliminarTambién he descubierto que se puede elegir entre las diversas opciones que tiene el gadget para la "burbuja" donde se contabilizan los clics y aplicarlo al botón que se muestra en los post. Para ello solo hay que añadir al código el atributo "annotation"
< g:plusone expr:href='data:post.url' annotation='none'>< /g:plusone>
Los tres valores a elegir son "none", "inline" y "bubble".
Asimismo, se puede modificar el tamaño del botón añadiendo al atributo "size" las diversas opciones: "small", "medium", "standard" o "tall". Por ejemplo, si ponemos size='tall' se verá el botón de tamaño más grande (60 px).
Un saludo, y perdón por la parrafada :(
Muchas gracias. No había caído en la cuenta. Ya he incluído una actualización en la entrada.
EliminarTambién interesante lo de la personalización para los botones del post. Te lo copio y a ver si lo publico aparte.
Me parece una buena idea que le dediques un espacio aparte a lo de la personalización, pues de este modo le llega a más gente. Es muy interesante, sobre todo para los que no recibimos demasiados clics, tener la opción de que no se vea la burbuja con el cero patatero :)
EliminarGracias por utilizar mi nick en la mención de la actualización: ya que nos la ha jugado Google a algunos con el nuevo perfil, por lo menos que se note que los amigos sí tienen en consideración nuestros deseos.
Me has despistado Carlos. Los botones +1 que vienen de serie para las entradas no llevan burbuja, sólo el mensaje de "Recomendar esto en Google" ¿A cuáles te refieres exactamente? ¿A los que se ponen con los códigos de esta entrada? Si es así, como dijiste, ya no hace falta añadir código alguno, ni siquiera ese que pones en tu comentario.
EliminarYo instalé el botón +1 en la sidebar eligiendo la opción sin burbuja, pues al instalar el gadget, como sabes, te da a elegir entre tres opciones. Luego instalé el código asimétrico que pones en este post (que más tarde descubrí que resultó inútil porque, al estar ya instalado, se ve que el sistema no permite duplicidades y lo elimina automáticamente, porque desapareció del lugar en que lo había colocado). Ahora bien, como al insertar el código para las entradas (no para todo el blog) en el footer me aparecía por defecto la burbuja (como lo tienes ahora mismo tú en tu footer, al pie de cada entrada), es decir, como esto no me gustaba me puse a investigar en el código fuente de la ventana que se abre para configurar el gadget (de donde deduje el nombre en inglés de los diferentes valores) y en la propia plantilla, a través de la herramienta "Inspeccionar elemento" de Chrome, de donde deduje el atributo necesario "annotation".
EliminarEn resumidas cuentas, la solución que yo he probado sólo es útil para quien quiera personalizar el botón que se instala manualmente, el que sirve para cada una de las entradas y no para todo el blog, puesto que este último se puede personalizar más fácilmente durante la instalación del gadget.
Insisto, yo instalé el gadget sin burbuja, pero los botones de cada entrada, al instalar manualmente el siguiente código en el footer
< g:plusone expr:href='data:post.url' >< /g:plusone>
sí que mostraban la burbuja por defecto, porque, como es lógico (o al menos a mí me lo parece), las opciones que eliges durante la instalación del gadget sólo afectan al propio gadget y no a los botones que instalas de forma manual que, naturalmente, muestran la configuración por defecto.
Quizá me haya alargado demasiado en esta explicación, pero ¿me dirás al menos que ya me has comprendido?
Perfectamente. Ahora sí. Pensé que te referías a los botones sociales de Blogger que vienen en una tanda (email, twitter, facebook, etc), a la que añadieron hace un tiempo el +1. Esos creo que no se pueden personalizar mucho y de ahí que me pareciera un oportuno descubrimiento.
EliminarPero lo de personalizar el botón que se incluye a mano es fácil de hacer. En este enlace sólo hay que marcar las opciones que desees y te facilitan el código correspondiente: Botón +1. Ahí verás que además de "annotation" también puedes seleccionar el tamaño.
Es fácil para el que lo sabe, como tú, que no se te escapa una, pero los que no estamos metidos en esto, si no nos lo ponen en bandeja, nos vemos obligados a improvisar, haciendo a veces lo fácil difícil; como yo en este caso, que estuve un buen rato dándole vueltas al asunto hasta dar con ello, y anda que no me puse poco contento cuando lo conseguí, y pensar que la solución estaba tan a mano y era tan sencilla.... cosas de principiante :)
EliminarCosas del desconocimiento. Se puede aspirar a ello pero no es posible saber todo de todo...
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¿Podría ser algo pasajero? :)
EliminarHola. Si no tocaste nada, nada habrá cambiado y posiblemente sea un fallo temporarl. De hecho ahora mismo sí que suma los +1. He hecho la prueba...
Este comentario ha sido eliminado por el autor.
EliminarPues gracias por la info, pero si es algo que no soluciona el soporte de Google va a ser difícil que otro de fuera lo haga. Todo lo relacionado con Google+ funciona desde un script que no es manipulable.
EliminarEste comentario ha sido eliminado por el autor.
Eliminaruna pregunta, espero que no te moleste, pero mi boton de g+1 en las entradas ha desaparecido de un dia para otro, pero en la configuracion de la plantilla aparece como que si que esta, me podrias aconsejar alguna manera de hacer que vuelva a aparecer? Gracias y perdona las molestias!
ResponderEliminarYo si lo veo. Está en el pie del post, a la derecha de los de Twitter, Facebook, etc.
EliminarHola Oloman.
ResponderEliminarMe pasa como a Laura, ha desaparecido de pronto junto al gadget de Linkwithin. En la plantilla lo he colocado antes del /body y sigue sin aparecer :(
Si pudieras echar un vistazo a mi código te lo agradecería una barbaridad.
Gracias de antemano.
Pues como a ella, te tengo que contestar que yo sí lo veo. En tu caso a la izquierda del "Publicado por..."
EliminarLo del Linkwithin te lo contesté por otro lado, pero es que también lo veo...
Bueno, tengo que fiarme de lo que me cuentas porque ni veo el gadget, ni el +1, ni el botón de linkedin... misterios insondables.
ResponderEliminarYa limpie navegadores sospechando que fuera problema mío como parece ser pero ni aún así consigo verlo, por cierto, ¿ves el traductor de google arriba a la izquierda?, a ese también le he perdido de vista :(
Gracias mil.
Un saludo.
No. El buscador lo veo en la barra lateral, debajo del slider de imágenes circular que tienes en ella. "Buscando entre sinapsis" se titula.
EliminarSí, el buscador si que lo veo, lo que no veo es el traductor de Google que se supone flota arriba a la izquierda, de un tiempo a esta parte, me han ido desapareciendo artilugios sin venir a cuento...
ResponderEliminarPerdona por las molestias Oloman ;)
Perdón. Leí demasiado rápido. Efectivamente, el traductor no se ve. Prueba a eliminarlo y a volverlo a instalar (solución informática universal), pero en lugar de ponerlo en el crosscol, prueba en la barra lateral y luego muévelo al bloque de entradas, justo encima de ellas.
EliminarPues nada, ya he probado lo que dices y sólo he conseguido ver el título del artilugio, también me aparece la opción de editar y el gadget en diseño pero en la página no se visualiza...
ResponderEliminarHe probado metiendo el código y el gadget de blogger con idéntico resultado.
Ya no se que pensar, no tengo la noción de haber tocado nada de código para hacerlo invisible, jeje... bueno, como con los botones y demás, debe ser que tocaba cambiar de look la página, aunque no quisiera :(
Para mí que no funciona, porque veo el div que debe cargar el gadget vacío. Quizás esté mal, como le pasó al gadget buscador estas semanas atrás. Lo único que se me ocurre ya es que lo elimines y añadas un HTML/JavaScript con el código manual: https://translate.google.com/manager/website/settings
EliminarY otra cosa que se me ocurre es que aunque no funcione bien del todo, el Responder está para algo :p ¡No me abras más hilos! XD
Jeje... pues si no me lo dices... a perdonar ;)
EliminarHola de nuevo Oloman.
EliminarNada, que me dio por mirar el avast y, sin consultar, me tenía bloqueadas las redes sociales y el linkwithin, ahora me sobra un botón plusone que intentaré borrar cuando me encuentre con ánimos de trastear código...
Bueno, gracias por todo y perdona por la brasa repartida ;)
Un saludo.
Ah, vale. No hay perdón... digo, no hay nada que perdonar ;)
EliminarGracias por el articulo, estaba super perdido de como poder poner varios botones, para post y pagina principal. Aqui muy bien resumido.
ResponderEliminar