Como muchos habrán notado, hace una semana aproximadamente salió la nueva red social de Google, llamada Google plus. Y junto a esa red, salió un botón de recomendación estilo TweetMe o Me Gusta, sólo que este es Google +1.
Este botón, al ser de Google, tiene un gran poder en los buscadores, cuantos más clicks tengamos, tenemos más probabilidades de obtener mejores posiciones en los buscadores. Google ya anunció que el botón Google +1 será determinante en el posicionamiento de varios sitios, y suena lógico.
Hoy quiero explicar como agregar el botón de Google +1 al blog, ya que como mencioné antes, es beneficiario en el posicionamiento web, y vale la pena colocarlo para todas nuestras publicaciones. El botón de Google +1, por si no lo conocen, es el que estoy utilizando en la derecha, al comienzo de cada artículo.
A continuación, los pasos a seguir para agregar el botón de Google +1 a sus sitios:
[1] Primero vamos a la página del generador del botón
Google +1.
[2] Allí veremos una serie de opciones, pero lo explicaré por pasos. En la primera opción podemos elegir el tamaño del botón. El pequeño, el mediano, el normal o el alto.
En la segunda opción podemos elegir el idioma del botón, el idioma se ve afectado sólo cuando colocamos el cursor sobre el botón, ya que se despliega un cuadro que dice que hagamos click para publicar el contenido en nuestra cuenta.
A la derecha podremos ir viendo una vista previa de como va quedando nuestro botón.
[3] A continuación podemos utilizar otra opción llamada Opciones avanzadas, la cual al desplegar, podemos encontrar otras opciones.
Allí podremos elegir si utilizar el contador o no (sólo para los botones horizontales).
Podemos elegir también si queremos que se utilice el botón para la página en donde se está navegando o en una página única indicada, por ejemplo la página principal de un blog.
También podemos encontrar la función de devolución de llamada de JavaScript, la cual no entendí mucho, pero me parece que es para utilizar nuestro propio código JS y no depender del de Google, aunque no sé si estoy acertado en eso.
Por último está la opción de agregar nuestra propia URL al botón de Google más uno, si es que seleccionamos esa opción antes.
[4] Finalmente, sólo nos queda copiar un código que se genera según las opciones que hayamos elegido. El código está situado abajo, es fácilmente reconocible. El mío es algo así:
<!-- Agrega esta etiqueta en la cabecera o delante de la etiqueta body. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es-419'}
</script>
<!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->
<g:plusone size="tall"></g:plusone>
[5] Ahora tenemos que pegar el código en nuestro sitio. A continuación voy a explicar cómo hacerlo para Blogger y para WordPress:
Si utilizás Blogger:
1. Primero que nada vamos a descomponer el código en dos partes. Como vemos en el código nos explican dónde pegar cada cosa, entonces haremos eso.
2. Debemos ir a Diseño > Edición de HTML y vamos a espandir los artilugios.
3. Luego vamos a buscar la etiqueta </head> y antes de ella vamos a pegar lo que esté antes de <!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->, en mi caso quedaría así:
<!-- Agrega esta etiqueta en la cabecera o delante de la etiqueta body. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es-419'}
</script>
</head>
Esta parte del código es el script, el cual estaremos llamando con el otro código faltante por colocar.
4. Ahora vamos a buscar la siguiente linea y pegar todo el código restante a continuación de ella:
<div class='post-header'>
5. A continuación vamos a encerrar el código que pegamos recién en un divisor con estilos, para que quede mejor alineado con el texto:
<div style='float: right; padding:10px;'>
Código restante del botón Google más uno (+1)
</div>
En mi caso quedaría algo así:
<div style='float: right; padding:10px;'>
<!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->
<g:plusone size="tall"></g:plusone>
</div>
6. En caso de que quieras que el botón se vea sólo en las páginas individuales del blog, debemos etiquetar el código que nos quedó del paso anterior nuevamente, pero ahora entre una condicional, que le dirá al blog que ejecute el código que está entre medio sólo en las páginas individuales:
<b:if cond='data:blog.pageType == "item"'>
Código del paso 5.
</b:if>
En mi caso el código quedaría algo así:
<b:if cond='data:blog.pageType == "item"'>
<div style='float: right; padding:10px;'>
<!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->
<g:plusone size="tall"></g:plusone>
</div>
</b:if>
Si utilizás WordPress:
1. Vamos a Apariencia > Editor. Primero vamos a buscar el archivo header.php o similar y vamos a pegar antes de </head> el código que está antes de <!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->, lo cual quedaría algo así:
<!-- Agrega esta etiqueta en la cabecera o delante de la etiqueta body. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es-419'}
</script>
</head>
2. Guardamos los cambios y ahora vamos a seleccionar el archivo en donde se encuentran las páginas individuales, generalmente es algo como single.php.
3. En ese archivo vamos a buscar la parte que refiera a lo que es el contenido, en el caso de muchos es <?php the_content(); ?>, obviamente puede tener distintos atributos. Entonces vamos a pegar el código restante de lo que teníamos al comienzo justo antes de esa etiqueta:
<div style='float: right; padding:10px;'>
Código restante del botón Google más uno (+1)
</div>
Y obviamente sustituiremos lo que dice Código restante del botón Google más uno (+1) por el código restante, dejando algo como esto:
<div style='float: right; padding:10px;'>
<!-- Agrega esta etiqueta donde quieras colocar el botón +1 -->
<g:plusone size="tall"></g:plusone>
</div>
4. Ahora simplemente guardamos los cambios y listo.
