Cómo configurar el nuevo botón de Google +1

Cómo configurar el nuevo botón de Google +1 Ayer justamente Google presentó novedades en cuanto a su botón +1. Específicamente nos permite ahora compartir directamente en nuestro perfil desde cualquier sitio web o blog, lo que antes era imposible. Hay que recordar que el botón +1 servía para agregar a nuestro Buzz la noticia que estábamos compartiendo, pero no salía propiamente en nuestro perfil de Google+.

Entonces, después del salto vamos a ver cómo configurar el botón +1 para poder compartir con imagen y descripción del artículo, puesto que no en todos los casos lo va a hacer.

Noticia

Cómo instalar el botón si aún no lo tienes

Para instalar el botón en nuestro blog o sitio web, basta con copiar el siguiente código en el lugar donde queramos:

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

Con esto garantizas que ya puedas tener el botón +1 en tu blog, o sitio web.

Configurar nuestros posts para +1

Ahora si, lo que ha pasado con este nuevo botón es que ahora podemos compartir directamente desde ese botón a nuestro perfil de Google+, algo como los botones de Twitter o Facebook. Sin embargo lo que Google ha agregado se llama +Snippets, que es la posibilidad de incluir un título, descripción e imagen que queramos que aparezca cuando la gente quiera compartir dicha noticia, para asegurar propiamente lo que queremos que vean en la miniatura.

Entonces, lo único que tenemos que hacer es agregar tres parámetros para cada elemento HTML. Para las imágenes, si queremos que una en especial aparezca como portada le agregaremos el parámetro itemprop="image" para que el código de la imagen quede así:

Para un párrafo y especificar una descripción usamos itemprop="description" terminando así:

<p itemprop="description">Aquí va la descripción del post o artículo</p>

Para un título itemprop="name"

<h1 itemprop="name">Este es el título del post</h1>

Y por último, para hacer válidas todas estas propiedades en la etiqueta <body> le agregamos a un lado itemscope itemtype=http://schema.org/Article

Añadiendo todo esto estaremos garantizando que “se vea mejor” nuestro artículo al momento en que alguien lo quiera compartir desde el mismo sitio, si lo hacemos desde Google+ no hay problema porque te busca contenido para añadir, así que espero les sirva el tutorial.