Como incluir el botón Google +1 en tu Web

El botón Google +1 es una utilidad de Google que permite a los usuarios marcar como recomendado el contenido de un determinado web. Estas recomendaciones serán mostradas en los resultados de Google y deben ser hechas por usuarios con cuentas de Google. De esta manera nuestros visitantes recomendarán a sus amigos nuestro contenido de forma que tendremos una nueva manera de publicitar nuestra web.

Generador de Google +1

Google ofrece una página donde puedes configurar rápidamente el botón +1, obtener el código javascript para colocarlo en tu web. Para ello primero ingresamos a http://www.google.com/webmasters/+1/button/ donde seleccionamos el tamaño del botón (Small, Medium, Standard, Tall) y el idioma para obtener el código javascript.

El primer código lo ubican en donde desean se muestre en botón Google +1, pueden ubicar el varios lugares el código para mostrar varias veces el botón.

HTML4
  1. <g:plusone></g:plusone>

El siguiente código se pone una sola vez y hay que colocarlo justo antes de la etiqueta </body>. Este código es la forma asincrona de insertar javascript externo en una web, lo cual hace que primero cargue todos los elementos de la pagina y al final recién se carga el javascript necesario para el funcionamiento del botón +1.

HTML4
  1. <script type="text/javascript">
  2.   (function() {
  3.     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  4.     po.src = 'https://apis.google.com/js/plusone.js';
  5.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  6.   })();

También es posible utilizar la forma tradicional para llamar al javascript externo, para ello en lugar del código anterior colocaremos el siguiente código en el header de tu HTML.

HTML4
  1. <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Con lo cual obtenemos el siguiente resultado en nuestra página:

Estas son las configuraciones básicas, ahora si necesitas personalizar o integrar aún mas el botón Google +1, puedes leer la documentación en Adding the +1 button to your site.

Como pueden ver utilizar este nuevo botón es sencillo y ayudará a obtener mas visitas a nuestras paginas mediante las recomendaciones de nuestros visitantes a sus contactos.

Comentarios Total 10 comentarios


piloto
Publicado: 10/08/2011 1:14 pm

perdona la ignorancia, pero qué clase de tags es eso de ?

piloto
Publicado: 10/08/2011 1:15 pm

disculpa de nuevo, me refiero al < g >
no sé como funciona eso

Laura Abadi
Publicado: 26/09/2011 8:15 am

Muchas gracias, muy útil!

David
Publicado: 16/10/2011 7:06 am

Hola.
Me gustaría mostrar solo el botón +1 y no el que muestra en número de veces que te han hecho un +1, pero no lo consigo:

Yo estoy incluyéndolo así (es la única forma en que se ve en mi página):

{“lang”: “es”}

(el idioma tampoco me funciona)

y en una parte de la página pongo lo siguiente:

Alguna sugerencia?, No sé que más probar.

Gracias.
Salu2

David
Publicado: 16/10/2011 7:09 am

Hola.
Me gustaría mostrar solo el botón +1 y no el que muestra en número de veces que te han hecho un +1, pero no lo consigo:

Yo estoy incluyéndolo así (es la única forma en que se ve en mi página):


<head>
<script type="text/javascript"
src="https://apis.google.com/js/plusone.js">
{"lang": "es"}
</script>
</head>

(el idioma tampoco me funciona)

y en una parte de la página pongo lo siguiente:

<div class="g-plusone" width="100px" data-size="Small" annotation="none"></div>

Alguna sugerencia?, No sé que más probar.

Gracias.
Salu2

compartir velero
Publicado: 19/11/2011 1:45 am

A mi lo que me gustaría saber es como poder presentar dos contadores diferentes de G+ en la misma URL (página)

Me gustaría, por ejemplo, poner un contador G+ para el artículo del blog y otro contador G+ de la home del blog

por ejemplo
Visitar la Isla de Cabrera
Como puedes ver, me gustaría que los dos contadores sean diferentes, un contador para el artículo y otro para la home.

Gracias amigo

Eduardo

Xavi
Publicado: 02/01/2012 7:23 am

Hola, he creado una pagina de pruebas de lo mas simple y como era de esperar, funciona, obtengo el boton +1 sin problemas

En el momento en que quiero integrarlo en la web principal que funciona con templates (.tpl), ya la cosa se complica pues no muestra nada de nada, algun error hay o desconozco como hacer que se pueda mostrar en un template

gracias, Xavi

Jorge Juan
Publicado: 22/02/2012 3:10 am

Hola, muy buenos dias.

Mucho escucho y leo del botón +1, pero en la práctica no se que resultados positivos puede tener para mi página.
Yo tengo incorporado en mi web facebook y twitter. Ambas tienen un sentido práctico pues consigo que los usuarios al teclear en una u otra entren a dialogar conmigo en estas redes sociales creando contenido.

Me gustaría saber que aporta el botón +1 a una página web o en otro ámbito.

Gracias

Jhonatan World
Publicado: 12/04/2012 9:43 pm

Hola a todos, espero poder ayudar.

@Eduardo. Entiendo lo que quieres decir, intenta lo siguiente, donde está el código del g+ míralo y él tiene una URL seguramente la del home, cámbiala por la URL de la entrada (Post), guarda y mira haber que tal.
Ejemplo:

@Jorge Juan. El +1 es prácticamente lo mismo que él Me gusta y compartir de facebook y Twitter. Todos los que tengamos Google+ podemos darle al 1+ para compartir la web o Post que te allá gustado, trae muchos beneficios en cuanto a posicionamiento y popularidad, ya que +1 es una red social de google y le da mucha relevancia.

Les recomiendo que lo coloquen, es bueno para la página y cada vez toma más fuerza.

Saludos!!
Diseño web html5

manuel
Publicado: 12/11/2012 2:13 am

por fin consegui poner el boton!!!!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)