Guía de programación de Botones Sociales (IV): Google

Tras una breve pausa, hoy volvemos con la cuarta entrega de la Guía de programación de Botones Sociales, en la que analizaremos las diferentes alternativas del gigante Google.

Todos los botones y widgets sociales los podéis encontrar aquí. ¡Vamos a ello!

A diferencia de lo que ocurría con las anteriores plataformas, el script sí va a variar en función del botón utilizado.

1. Botón +1 ()

Primero, el código HTML:

<div class=»g-plusone» data-size=»small» data-annotation=»inline» data-width=»300″></div>

data-size: Opcional, este atributo indica el tamaño del botón en sí mismo. Para el tamaño estándar no hay que indicar atributo, pero podemos hacerlo pequeño (valor small) o mediano (valor medium), ambos de menor tamaño que el estándar, o bien más alto, situando la posible información añadida (número de +1) sobre el botón, en lugar de en el lateral, siendo el valor asociado tall.

data-annotation: Especifica cómo se dispone la información añadida al botón con respecto a éste. Este atributo, opcional, tendrá como valor por defecto bubble, recogiendo sólo el número de +1 en una caja. Los otros dos posibles valores son inline, para añadir la frase «Recommend this on Google+», y none para no mostrar información añadida.

data-width: Este atributo, opcional, va asociado al anterior, data-annotation, y sólo será necesario especificarlo cuando dicho atributo tiene el valor inline. Indica el ancho del botón más su información añadida en píxeles y por defecto su valor es 300.

El script hay que situarlo tras el último botón +1 utilizado. En este caso, va a ser aquí donde se especificará el idioma del botón, siendo por defecto inglés de E.E.U.U. (para este idioma no es necesario el fragmento de código señalado en azul).

<script type=»text/javascript»>
window.___gcfg = {lang: ‘es’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Los valores para los distintos idiomas son:

2. Google+ Badge ()

Este widget permite incluir un link a nuestro perfil o a una página de Google+ (que no se explica en este post, al tratarse de una mera imagen con un link) con algunos elementos opcionales:

<div class=»g-plus» data-width=»347″ data-height=»69″ data-href=»URL» data-rel=»publisher» data-theme=»dark»></div>

– Para añadir un botón Añadir a círculos/un botón Seguir y un botón +1: De antemano, es necesario aclarar que el botón Añadir a círculos se mostrará cuando la url indicada sea la de un perfil personal, mientras que el botón seguir aparecerá cuando se trate de la url de una página.

data-href: Este atributo indica la url del perfil o página a seguir. Es obligatorio.

data-theme: Opcional, este atributo indica el color de fondo del badge. El valor por defecto es light, pudiendo sustituirlo por dark si queremos una caja negra.

data-width: Este atributo, opcional, permite modificar el ancho en píxeles del badge, por defecto, 300px.

– Para añadir sólo un botón Añadir a círculos/un botón Seguir: Para que no aparezca el botón +1, tan sólo es necesario modificar el atributo que controla la altura en píxeles del badge, data-height, que por defecto es de 113px., dándole el valor de 69px.

El script, que se coloca en el head o tras el body del código HTML, es el siguiente, y también se indica aquí el idioma del botón, siendo los valores para los distintos idiomas los mismos que en el botón anterior:

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

3. Botón Compartir )

Este botón permite compartir una url en Google+. Su código HTML y atributos son los siguientes:

<div class=»g-plus» data-action=»share» data-annotation=»vertical-bubble» data-width=»300″ data-height=»15″ data-href=»URL»></div>

Todos estos atributos son comunes al Botón +1, con algunas particularidades:

data-href: Aquí este atributo es opcional, tomando por defecto la url en la que nos encontremos si no lo especificamos.

data-annotation: Además del valor inline (por defecto, haciendo este atributo opcional) y el valor none, el valor bubble se refiere en este caso a una caja con el número de veces que el contenido se ha compartido, situada, eso sí, en el lateral derecho del botón, existiendo un cuarto valor, vertical-bubble, que nos sirve para colocar dicha caja sobre el botón.

data-height: Este atributo es obligatorio sólo cuando el valor del atributo anterior es vertical-bubble, siendo por defecto 60.

data-width: Este atributo es opcional, siendo por defecto 20. Podemos variarlo a 15 (menor) o a 24 (mayor), pero no es posible utilizarlo cuando el valor de data-annotation es vertical-bubble.

El script, donde el idioma se indica de la misma manera que en el Botón +1, es el siguiente:

<script type=»text/javascript»>
window.___gcfg = {lang: ‘es’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Y hasta aquí llegamos hoy. Esperamos de nuevo que esta entrada os resulte muy útil, ¡y no os perdáis la próxima y última entrega con los botones sociales de Linkedin!

GUÍA DE PROGRAMACIÓN DE BOTONES SOCIALES

1. Twitter
2. Facebook
3. Pinterest
4. Google
5. …