Botón +1 Google

Google recientemente se ha apuntado a la moda de los botones para compartir contenido de forma “social”, que ya era hora, ya que la única forma que tenía la gran “G” para compartir era por medio de los bookmarks, iGoogle (que no sé si lo usará alguien) y poco más.

La idea (por cierto aun esta en fase de pruebas y puede que aún no aparezca) es que al llevar a cabo una búsqueda en Google nos parazcan junto a los resultados cuántos +1 ha obtenido esa web. Su influencia en el posicionamiento SEO de las páginas recomendadas aun es una incógnita.

Su implementación es realmente sencilla, solo tienes que copiar el código ofrecido por Google en tu página web.

 

Primero vamos a la página que provee Google http://www.google.com/webmasters/+1/button/ y escogemos el tamaño del boton y el idioma. Con esto se nos generará un código para que peguemos en la cabecera de nuestra web, entre las etiquetas <head> y </head>, o al menos antes de la etiqueta <body> y otro para el botón.

 

Por ejemplo, para el botón en español a tamaño medio (20px) este es el código de la cabecera

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

 

Y este el del botón:

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

el cual se pone en el lugar dónde queramos que aparezca.

 

Y quedaría algo así:

<!DOCTYPE>
<html>
<head>
<title>Página de pruebas</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}
</script>
</head>
<body>
<h1>Esta es mi prueba de botón +1</h1>
<p>Un poquito de loren ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
<g:plusone size="medium"></g:plusone>
</body>
</html>

Demo

2011-07-01 | Publicado en Blog, Demos, Desarrollo | Etiquetado , , , | Deja un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>