Parece que la guerra de botones sociales ha comenzado. A los ya omnipresentes botones de Facebook o los de Twitter se suma el botón +1 de Google. La intención de este nuevo botón social de Google es la de ir puntuando el contenido de los sitios web que veamos. Estas recomendaciones aparecerán nuestros amigos cuando hagan una búsqueda relacionada. En la práctica será un indicador más de popularidad que veremos en los sitios webs a partir de ahora.
El botón +1 tendrá que convivir con los ya habituales “Me Gusta”, Tweet Button o el recién llegado Follow Button. Los desarrolladores web tendremos que ir buscándole entre nuestro saturado espacio dedicado a las redes sociales. La integración es bastante sencilla como podemos comprobar en la documentación oficial de Google Webmaster.
Cómo instalar el botón +1 en nuestra web o blog
Basta con añadir estas líneas de código
<!-- Añade esta etiqueta en la cabecera o delante de la etiqueta body. --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <!-- Añade esta etiqueta donde quieras colocar el botón +1 --> <g:plusone></g:plusone>
Con esto ya tendremos el botón funcionando en nuestra página. Pero ojo, la url a la que se le asigna será por este orden:
- El valor de la etiqueta link rel=”canonical” de nuestra página.
- La URL de la página tal como se define en document.location.href.
Si queremos fijar la URL del botón a una concreta deberemos usar el parámetro href de la etiqueta del botón +1.
El código del botón quedaría así:
<g:plusone href="https://www.genbetadev.com"></g:plusone>
Además del parámetro href disponemos de los parámetros callback para definir una función para manejar los eventos del botón, count para indicar si mostrar el número total de +1 y size para indicar el tamaño. Todos estos parámetros están definidos en la documentación del botón +1.
Añadir Google Analytics para analizar las estadísticas del botón +1
Un buena idea para conocer mejor a los usuarios que hagan click en el botón +1 es la de usar Google Analytics para trackear esos eventos.
Para ello podemos modificar ligeramente la etiqueta g:plusone añadiendo el parámetro callback para manejar el objetivo definido en Google Analytics .
<g :plusone size="tall" callback="plusone_vote"></g>
En la función callback tendremos el objeto que almacena el estado del botón una vez pulsado: “on” o “off”. Después definimos con la API de Google Analytics el objetivo deseado. El código simplificado quedaría de este modo:
<script type="text/javascript">
function plusone_vote( obj ) {
_gaq.push(['_trackEvent','plusone',obj.state]);
}
</script>
Vía | Yoast Sitio web | Botón +1 Google Más información | Google Webmaster,