martes, 27 de diciembre de 2011

Como colocar más de un botón +1 de Google en una sola pagina

Con los cambios introducidos en la pagina principal de pizcos.net, hemos insertado la función de compartir los artículos, si pulsáis el botón "Compartir" os aparecerán los botones para hacerlo. Colocar los botones de Twitter y Facebook no tiene mayor dificultad pero hacer que funcione el botón +1 de Google Plus es una autentica odisea.

Me ha llevado tres días hacerlo, seguí las instrucciones del propio Google, leí los foros de ayuda y busque por la red en busca de respuestas, los intentos de que funcionaran correctamente eran nulos, no había manera. Hoy se me ha encendido la luz y en dos minutos lo he logrado, así que paso a explicarlo por si os sirve de ayuda.

Cuando uno sigue las instrucciones que dan, para insertar varios botones +1 en una misma pagina con diferentes urls para compartir, no funciona. El botón no aparece, o aparece en un solo post, o aparece en todos pero solo comparte la url principal del blog y no las individuales, es decir no sirve para nada.

Hay dos detalles importantes a tener en cuenta para lograr que funcionen:

.- El script del botón de Google solo debemos de cargarlo una vez, normalmente lo cargamos para las entradas individuales y otra vez para el home, eso no es necesario y solo debemos insertarlo una vez, de lo contrario el botón no ira en la pagina principal.

.- En el código del botón +1 que Google nos proporciona debemos realizar una corrección para poder compartir las urls individuales, al menos para Blogger.

Este es el código habitual que Google nos da si usamos su generador y que funciona para páginas individuales
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>

Para hacer que funcione también el botón +1 en la pagina principal con varios artículos debemos quitar de ese código el script <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> e insertarlo al final de la plantilla antes de la etiqueta </body>

En la página principal deberemos insertar el siguiente código
<g:plusone expr:href='data:post.url ' size='tall'/>

En las páginas individuales podéis mantener el anterior

<g:plusone size="tall"></g:plusone>

De esta forma es la única que he conseguido que funcione correctamente... Google ¿tan difícil es explicarlo?

No hay comentarios:

Publicar un comentario