miércoles, 16 de noviembre de 2011

Insertar badge o iconos de las páginas de Google Plus en nuestro sitio (paso a paso)

Widget, badge icono boton Google plusDesde hace unos días es posible incluir un widget en nuestros blogs o sitios de nuestras páginas en Google Plus. Para esto, debemos configurar nuestro badge ingresando a esta página.
Antes era necesario registrarse en el grupo de Google+ Platform Preview, pero desde ayer ya no es necesario y cualquier usuario puede insertar, ver y usar el widget.

¿Para que sirve el badge de Google Plus?
Bueno, en primer lugar, nos permite ofrecer a nuestros visitantes la opción de agregarnos a sus circulos sin salir de nuestro blog o web, ya que al posar el puntero del mouse se despliega la ventana de los circulos, tal como lo haría dentro del propio Google+.
En segundo lugar incluye el boton +1. Es decir que le brindamos a nuestros visitantes la posibilidad de votarnos directamente.
Además permite que al buscar en la forma +NOMBRE_DEL_SITIO en el buscador de Google, mediante la característica Direct Connect, las personas encuentren fácilmente nuestra página que quedará asociada a nuestro sitio.

Veamos, una vez en la página de configuración nos encontraremos con un recuadro en blanco, ahí colocaremos el número de Id de nuestra página. Luego podremos seleccionar el idioma Español y la forma que tendrá nuestro badge o si en cambio será un icono. En la imagen que acompaña este post podemos notar claramente las diferencias.
[caption id="attachment_660" align="aligncenter" width="446" caption="Este es el ID de nuestra página de Google Plus"]ID página de Google Plus número[/caption]
Standard Badge: es la más completa, incluye la opción de agregar directamente a los círculos y el botón +1, esto además permite que si el visitante está logueado con su cuenta de Google pueda ver aquellos de sus contactos que hicieron +1 y es probable que si ve a alguien que conoce que recomendó nuestra página, se interese. De momento el mensaje "Estamos en" no puede modificarse.
Small Badge: Lo mismo que el anterior, pero sin la opción del boton +1.
Small Icon: Un icono de 16x16px que lleva a nuestra página de Google plus. En este sí podemos modificar el mensaje en un cuadro que dice "Customize name". Aparece debajo de la vista previa del badge.
Medium Icon: Mismo que el anterior con el icono de 32x32px.
Large Icon: Lo mismo con un icono de 64x64px. En este sin embargo el mensaje que hayamos escrito se presentará debajo del icono.
No Badge: Nos da la parte del código necesaria para asociar nuestro sitio con nuestra página de Google Plus. Nos sirve en el caso de que solo queramos hacer esto. O tal vez en el caso de que queramos insertar un simple enlace a nuestra página de Google Plus.
Para colocar un enlace, basta insertarlo con código HTML como lo haríamos normalmente en cualquier lugar
<a href="URL_COMPLETA">Mi página en Google+</a>

Reemplazamos donde dice URL_COMPLETA por la dirección completa de nuestra página en Google Plus (entre comillas). El mensaje que encierra el código, desde ya puede cambiarse por lo que deseen.
¿Por qué es tan importante asociar nuestro sitio con nuestra página de Google Plus? Porque le sirve a Google para validarla. De esta manera se evita que se creen páginas falsas. De todas formas esto en principio sería para aquellas páginas populares, con muchos seguidores.

Para insertar el widget en nuestro sitio basta copiar y pegar la primera parte del código antes del cierre de "head"
<head>
<link href="https://plus.google.com/ID_DEL_SITIO" rel="publisher" />
</head>


Y la segunda parte del código donde queremos que se muestre el badge:
<g:plus href="https://plus.google.com/ID_DEL_SITIO" size="badge"></g:plus>


En el caso de los badges la primera parte viene acompañada de código en javascript que también debemos insertar.
En el caso del icono, a la segunda parte lo acompañará bastante código en HTML, que le da formato y ahí podemos cambiar la posición, tamaño, alineación, etc.

Insertar el widget de Google Plus en Blogger:


Vamos a editar la plantilla (siempre guardando la actual por si surge algún problema):
Plantilla > Edición de HTML > Continuar
Apretamos Ctrl+F para buscar en la plantilla y justo antes de eso pegamos la primera parte del código. Guardamos la plantilla.
Luego deberíamos insertar un elemento HTML en nuestro sidebar (o el lugar que les guste):
Diseño > Añadir un gadget > HTML/Javascript
Pegamos la segunda parte del código. Guardamos y luego lo arrastramos a la posición deseada.

Insertar el widget de Google Plus en Wordpress mediante un plugin:


En este caso disponemos de un plugin que simplifica mucho las cosas, seguimos estos pasos:

1— Descargamos el archivo .zip desde aquí
2— Nos dirigimos a "Plugins" y subimos ese archivo. Lo instalamos y luego seleccionamos "activar plugin"
3— Ahora vamos a Apariencia > Widgets. Ahí encontraremos el widget, con nombre "Google+ Badge". Lo seleccionamos y arrastramos hasta la ubicación del sidebar que más nos guste.
4— Una vez ahí podremos poner un titulo (se puede dejar en blanco para que no muestra nada), el ID de nuestra página de Google Plus y el estilo de badge que queramos. Guardamos.

El creador del plugin es Robert Pitt y está alojado en Crazygeek.tv donde explican más acerca de este widget para WordPress.

Si tienen dudas o algún inconveniente dejen sus comentarios. Y pueden agregar nuestra página de Google Plus a sus círculos para enterarse de las últimas noticias, trucos y demás de Google Plus.

ACTUALIZACIÓN:
Se fue mejorando el funcionamiento del badge. Ahora es posible personalizar el tamaño, cambiando los valores en el código width (ancho) y height (alto). También, desde "Advances Options" podremos cambiar el color del tema del badge, blanco (light) o negro (dark).
No es más posible crear badges con nuestros perfiles personales, siendo necesario crear la página de Google Plus de nuestro blog.

7 comentarios: