Google+ Platform

Botón +1

Documentación

Puedes añadir y personalizar el botón +1 para satisfacer las necesidades de tu sitio web, por ejemplo, modificando el tamaño del botón y la técnica de carga. Al añadir el botón +1 a tu sitio web, permites a tus usuarios recomendar tu contenido a sus círculos y dirigir tráfico a tu sitio web. El botón +1 también aumenta el tiempo que pasan en tu sitio web proporcionando recomendaciones de otro contenido que pueden leer.

El uso del botón +1 está sujeto a la Política del botón +1 de Google.

Introducción

Un simple botón

El método más fácil para incluir un botón +1 en tu página es insertar el recurso necesario de JavaScript y añadir una etiqueta del botón +1:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

La secuencia de comandos se debe cargar desde el protocolo HTTPS y se puede incluir desde cualquier punto de la página, sin ninguna restricción. Para obtener más información, consulta las preguntas frecuentes. También puedes cargar la secuencia de comandos de forma asíncrona para tener un mejor rendimiento.

Etiqueta +1

Para mostrar una simple etiqueta +1:

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

También puedes utilizar una etiqueta +1 compatible con HTML5 configurando el atributo de clase como g-plusone y prefijando los atributos del botón con data-.

<div class="g-plusone" data-size="tall" ... ></div>
  

De forma predeterminada, la secuencia de comandos incluida recorrerá el DOM y mostrará las etiquetas +1 como botones. Puedes mejorar el tiempo de muestra en páginas grandes utilizando el API de JavaScript para recorrer un solo elemento de la página o para mostrar un elemento específico, como un botón +1.

Carga de JavaScript asíncrona

La inclusión asíncrona permite que la página web siga cargando mientras el navegador obtiene el archivo JavaScript de +1. Al cargar estos elementos en paralelo, te aseguras de que cargar el archivo JavaScript del botón +1 no aumenta el tiempo de carga de la página.

Para incluir el archivo JavaScript del botón +1 de forma asíncrona, utiliza el código siguiente:

<script type="text/javascript">
  (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>

Si quieres establecer parámetros de la etiqueta de secuencia de comandos, utiliza la sintaxis siguiente:

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

En los ejemplos podrás ver un ejemplo completo.

Configuración

Cómo establecer la URL objetivo de +1

La URL en la que se hace +1 se determina por el orden siguiente:

1. Atributo href del botón.
Este atributo define explícitamente la URL objetivo del +1.
2. La etiqueta <link rel="canonical" ... /> de la página.
Si no se proporciona el atributo href del botón +1, Google utiliza la URL canónica de la página. Para obtener más información sobre cómo definir la URL canónica de una página, consulta este artículo de ayuda.
3. URL proporcionada por document.location.href, lo cual no se recomienda.
Si ninguno de estos elementos está presente, Google utiliza la URL de la página que se encuentra en el DOM. Dado que esta URL podría contener ID de sesiones, anclajes u otros parámetros que en realidad no forman parte de la URL canónica, recomendamos encarecidamente establecer el atributo href para el botón +1 o añadir una etiqueta <link rel="canonical" ...> a tu página.

Parámetros de la etiqueta de secuencia de comandos

Estos parámetros se definen dentro del elemento <script />. Controlan el idioma y el mecanismo de carga del botón que se utilizan en toda la página web.

Clave Valor Predeterminado Descripción
lang language code en-US Establece el idioma que se utiliza para los botones +1 de la página. Para ver los valores language code disponibles, consulta la lista de códigos de idiomas compatibles y un ejemplo de lang.
parsetags explicit, onload onload Determina el mecanismo de carga que se va a utilizar.
onload
Todos los botones +1 de la página se muestran de forma automática justo después de que cargue la página. Consulta el ejemplo de carga asíncrona.
explicit
Los botones +1 solo se muestran con llamadas explícitas a gapi.plusone.go o gapi.plusone.render.

Cuando utilizas la carga explicit junto con las llamadas go y render que apuntan a contenedores específicos de la página, evitas que la secuencia de comandos recorra todo el DOM, lo que puede mejorar el tiempo de muestra del botón. Consulta los ejemplos gapi.plusone.go y gapi.plusone.render.

Atributos de la etiqueta +1

Estos parámetros controlan la configuración de cada botón. Puedes establecer estos parámetros como pares atributo=valor en etiquetas de botón +1 o como pares key:value de JavaScript en una llamada a gapi.plusone.render.

Esta función actualmente se encuentra en vista previa de la plataforma.
Atributo Valor Predeterminado Descripción
href URL to +1 current page URL Establece la URL en la que se hace +1. Configura este atributo cuando tengas un botón +1 junto a una descripción de un elemento para otra página y quieras que el botón haga +1 en la página a la que se hace referencia en lugar de en la página actual. Si estableces este atributo utilizando gapi.plus.render, no debes olvidar la URL.
size
  • small
  • medium
  • standard
  • tall
standard Establece el tamaño del botón +1 que se muestra. Para obtener más información, consulta los tamaños del botón.
annotation
  • none
  • bubble
  • inline
bubble Establece la anotación que se muestra junto al botón.
none
No muestra anotaciones adicionales.
bubble
Muestra el número de usuarios que han hecho +1 en la página mediante un gráfico situado junto al botón.
inline

Muestra imágenes de perfil de usuarios conectados que han hecho +1 en la página y el número de usuarios que han hecho +1 en la página.

width int Si annotation se establece como inline, este parámetro establece la anchura en píxeles del botón y su anotación insertada. Si se omite la anchura, el botón y su anotación insertada utilizarán 450 píxeles.

Consulta Anchuras de la anotación insertada para obtener ejemplos de cómo se muestra la anotación según la configuración de su anchura establecida.

align
  • left
  • right
left Establece la alineación horizontal de los elementos del botón dentro de su marco.
expandTo comma-separated list of
  • top
  • right
  • bottom
  • left
empty list

Establece las posiciones preferidas para mostrar los cuadros que aparecen al situar el cursor encima y al confirmar en relación con el botón. Establece este parámetro si tu página contiene ciertos elementos, como objetos Flash, que pueden interferir con la forma de mostrar los cuadros.

Por ejemplo, top sirve para mostrar dichos cuadros sobre el botón.

Si se omite, la lógica de muestra deducirá la mejor posición y normalmente elegirá de forma predeterminada mostrarlos bajo el botón utilizando el valor bottom.

callback function(jsonParam) Si se especifica, esta función se llama después de que el usuario haga clic en el botón +1. La función de devolución de llamada debe estar en el espacio de nombre general y aceptar un solo parámetro, que es un objeto JSON con la siguiente estructura:
{
  "href": target URL,
  "state": "on"|"off"
}

La propiedad state se establece como on para un +1 y como off para la eliminación de un +1.

onstartinteraction function(jsonParam)

Si se especifica, esta función se llama cuando el usuario sitúa el cursor encima del botón +1 y se muestra un cuadro o cuando el usuario hace +1 en la página y se muestra un cuadro de confirmación. Puedes utilizar esta función de devolución de llamada para modificar la página, por ejemplo, para detener un vídeo cuando aparezca el cuadro.

Esta función debe estar en el espacio de nombre general y aceptar un solo parámetro, que es un objeto JSON con la siguiente estructura:

{
  "id": target URL,
  "type": hover|confirm
}
onendinteraction function(jsonParam)

Si se especifica, esta función se llama cuando desaparece un cuadro de confirmación o que se muestra al situar el cursor encima. Puedes utilizar esta función de devolución de llamada para modificar la página, por ejemplo para continuar con la reproducción de un vídeo cuando desaparezca el cuadro.

Esta función acepta un solo parámetro con estructura idéntica a la del parámetro que se pasa en onstartinteraction.

recommendations true, false true Para inhabilitar la opción de mostrar recomendaciones dentro del cuadro que aparece al situar el cursor encima del botón +1, debes establecer recommendations como false.
count true, false true Obsoleto: para inhabilitar la opción de mostrar el recuento, utiliza annotation="none".

Tamaños del botón

Si se especifica una altura menor que la altura más pequeña compatible, se muestra la altura más pequeña compatible. Las otras alturas muestran el botón más grande que encaje y centran el icono verticalmente en el espacio solicitado. Si hay suficiente espacio disponible horizontalmente, los botones pequeño y estándar muestran el número total de +1 de la página.

Tipo de botón (anotación) Ejemplo Anchura (píxeles) Anchura máxima (píxeles) Altura (píxeles)
Pequeño (ninguno) 24 15
Pequeño (cuadro) 70 15
Mediano (ninguno) 32 20
Mediano (cuadro) 90 20
Estándar (ninguno) 38 24
Estándar (cuadro) 106 24
Alto (ninguno) 50 20
Alto (cuadro) 50 60

Anchuras de la anotación insertada

La forma de mostrar anotaciones insertadas varía en función del valor del parámetro width.

  • Si el parámetro de la anchura no se especifica, el botón +1 y su anotación insertada utilizan una anchura de 450 píxeles.
  • La anotación insertada requiere un mínimo de 120 píxeles para mostrarse. Si se utilizan valores más pequeños, se redimensionan automáticamente. La anchura mínima recomendada es 250 píxeles.
  • Para otras anchuras, la forma de mostrar las imágenes de perfil y el texto insertados varía en función de la anchura definida, como se muestra en los siguientes ejemplos.
Anchura Botón +1 (www.google.com)
250 píxeles
300 píxeles
350 píxeles
Sin especificar (450 píxeles)

Cómo rellenar el fragmento de Google+

Tras hacer clic en el botón +1, el usuario dispone de la opción de compartir la página en Google+ a través del cuadro para compartir que se muestra. Dicho cuadro con la publicación de la actividad de Google+ resultante contiene una vista previa, o Fragmento de Google+, que incluye el título de la página, una descripción breve y una imagen en miniatura. Los datos se extraen del contenido que se encuentra en la URL objetivo y el editor del contenido puede especificarlos fácilmente.

Para obtener información más detallada acerca de cómo personalizar tu propio fragmento, consulta la documentación del fragmento.

API de JavaScript

El JavaScript del botón +1 define dos funciones de muestra del botón bajo el espacio de nombre gapi.plusone. Debes ejecutar una de estas funciones si inhabilitas la visualización automática estableciendo parsetags en explicit.

Método Descripción
gapi.plusone.render(
container,
parameters
)
Muestra el contenedor especificado como un widget de botón +1.
container
El contenedor que va a mostrarse como botón +1. Especifica el ID del contenedor (cadena) o el propio elemento DOM.
parameters
Un objeto que contiene atributos de etiqueta +1 como los pares clave=valor, por ejemplo {"size": "tall", "callback": myCallbackFunction}.
gapi.plusone.go(
opt_container
)
Muestra todas las etiquetas +1 y las clases en el contenedor especificado. Esta función se debe utilizar únicamente si parsetags se establece como explicit, lo que se puede hacer por motivos de rendimiento.
opt_container
El contenedor que incluye las etiquetas del botón +1 que se muestran. Especifica el ID del contenedor (cadena) o el propio elemento DOM. Si se omite el parámetro opt_container, se muestran todas las etiquetas +1 en la página.

Ejemplos

Página básica

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

Carga explícita

<html>
  <head>
    <title>+1 demo: Explicit load</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

Muestra explícita

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

Carga asíncrona

<html>
  <head>
    <title>+1 Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plusone></g:plusone>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };

      (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>
  </body>
</html>

Preguntas frecuentes

Las siguientes preguntas frecuentes tratan información técnica y detalles de implementación. Para obtener recursos adicionales, consulta las preguntas frecuentes generales y el foro de debate de la plataforma.

¿Puedo ubicar varios botones en una sola página de forma que cada uno sirva para hacer +1 en una URL distinta?
Sí. Utiliza el atributo href según se especifica en los parámetros de la etiqueta +1 para indicar la URL en la que se hace +1.
¿Dónde debo ubicar el botón +1 en mis páginas?
Eres el que mejor conoce tu página y tus usuarios, por lo que te recomendamos ubicar el botón donde creas que será más eficaz. Normalmente, en la mitad superior de la página, junto al título de la página y cerca de los enlaces de compartir suele ser una buena ubicación. También puede ser eficaz ubicar el botón +1 al final de un artículo o historia, o bien al principio.
¿La posición de la etiqueta <script> en la página puede tener alguna repercusión en la latencia?
No, la ubicación de la etiqueta <script> no tiene ninguna repercusión importante en cuanto a la latencia. Sin embargo, si ubicas la etiqueta al final del documento, justo antes de la etiqueta de cierre del cuerpo, podrías mejorar la velocidad de carga de la página.
¿La etiqueta <script> debe incluirse antes de la etiqueta +1?
No, la etiqueta <script> puede incluirse en cualquier parte de la página.
¿La etiqueta <script> debe incluirse antes de que otra etiqueta <script> llame a uno de los métodos de la sección API de JavaScript?
Sí, si utilizas alguno de los métodos de API de JavaScript, debes ubicarlos en la página después de la inclusión de <script>.
¿Qué ocurre si hago +1 en una URL privada?
El botón no funciona. Los +1 solo funcionan para URL públicas.
¿Debo utilizar el atributo href?
El atributo href no es necesario. Para obtener más información, consulta URL objetivo de +1.
¿Todas mis páginas deben tener una etiqueta rel="canonical"?
No, aunque es recomendable. Si el atributo href no se ha establecido, Google buscará la etiqueta rel="canonical" en la página. Si no la encuentra, utilizará document.location.href. A veces, este valor final puede ser engañoso debido a las variables de estado que se mantienen en ocasiones en la URL. Por lo tanto, utilizar una etiqueta rel="canonical" puede ayudarte a especificar la URL exacta en la que quieres hacer +1.
Algunos de mis usuarios reciben una advertencia de seguridad cuando visitan páginas con el botón +1. ¿Cómo puedo evitarlo?
El código del botón +1 necesita una secuencia de comandos de los servidores de Google. Puede que obtengas este error al incluir la secuencia de comandos a través de http:// en una página que se carga a través de https://. Es recomendable utilizar https:// para incluir la secuencia de comandos:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Si tu página utiliza https://, algunos navegadores y algunas herramientas de verificación mostrarán un error cuando se llame a los elementos de la página a través de http://. Si tu sitio publica páginas a través de https://, asegúrate de que el código del botón +1 de dichas páginas también utilice https://. De hecho, está bien utilizar https:// en el código del botón para todas las páginas, incluso si solo se publican a través de http://.
¿Puedo realizar un seguimiento de las interacciones del botón +1 con Google Analytics?
Sí, la versión más reciente de Google Analytics realiza un seguimiento automático de todas las interacciones del botón +1 sin que tengas que modificar tu código de seguimiento actual. Puedes ver las estadísticas sociales con los informes en Visitantes > Social. Para obtener más información, consulta la página Acerca del complemento social en Analytics del Centro de asistencia.
¿Por qué el contenido Adobe Flash corta el cuadro que aparece al situar el cursor encima?

De forma predeterminada, el contenido Flash se muestra encima del resto del contenido HTML. Esto incluye los cuadros que aparecen al situar el cursor encima y el resto de contenido que muestra el botón +1. Como resultado, parte del contenido del botón +1 puede aparecer cortado por los elementos Adobe Flash de la página.

La solución depende de tu situación. Si puedes editar el código HTML del objeto Flash de tu página, puedes añadir simplemente una propiedad al elemento del objeto. Sin embargo, si el elemento Flash se añade a la página mediante una secuencia de comandos (lo más habitual en el caso de los anuncios), deberás recurrir a una solución más sofisticada.

Primero, si tienes acceso al código fuente HTML del objeto Flash de tu página, debes establecer el parámetro wmode como transparent. Puedes hacerlo añadiendo un parámetro al elemento del objeto Flash:

<object ... >
<param name="wmode" value="transparent">
... </object>

En otros casos, donde el elemento Flash se añade mediante una secuencia de comandos, también puedes solucionar esta incidencia. Puedes añadir el parámetro descrito anteriormente de forma programada utilizando JavaScript. FlashHeed es un ejemplo de esta técnica. Funcionará siempre y cuando el elemento Flash no esté insertado dentro de un marco flotante. Si el elemento Flash está dentro de un marco flotante, debes modificar la posición del contenido Flash o del botón +1 para impedir que se solapen.

He incluido el código del botón +1 dentro de un marco flotante. ¿Por qué el diálogo para compartir se corta en algunos navegadores web?

Al hacer clic en el botón +1, se muestra un diálogo para compartir. Este diálogo es mucho más grande que el botón +1. Por lo tanto, si incluyes el código del botón +1 en un marco flotante más pequeño que el diálogo para compartir, algunas partes de dicho diálogo pueden aparecer cortadas, lo que impedirá que los usuarios puedan acceder a ellas.

Para solucionarlo, es mejor incluir el código fuente del botón +1 directamente en las páginas. Si debes utilizar un marco flotante para incluir el botón +1, asegúrate de que haya espacio suficiente para el diálogo para compartir.

He establecido la alineación de mi botón como right, pero el botón no aparece alineado a la derecha en la página.
Si has establecido align="right", Google alineará a la derecha los elementos del botón dentro de su marco. Sin embargo, para que el botón aparezca alineado a la derecha en la página, debes establecer la alineación del contenedor del botón. Por ejemplo:
<div style="float: right">
  <g:plusone align="right"></g:plusone>
</div>
Las recomendaciones que aparecen al situar el cursor encima del botón +1 no son adecuadas para mi sitio web. ¿Cómo puedo eliminarlas?
Infórmanos de por qué las recomendaciones no son adecuadas para tu sitio web para que podamos mejorar el producto y la experiencia de tu sitio web. Si necesitas inhabilitar las recomendaciones, puedes establecer el atributo de las recomendaciones como "false" en la etiqueta +1.
¿Qué navegadores web son compatibles?
Todos los complementos de Google+ son compatibles con los mismos navegadores web que la interfaz web de Google+:
  • Windows: Chrome, Firefox 3.6 y superiores, Internet Explorer 8 y superiores.
  • Linux : Chrome, Firefox 3.6 y superiores.
  • Mac: Chrome, Firefox 3.6 y superiores, Safari 4 y superiores.

Códigos de idiomas

Idioma Valor
afrikáans af
amárico am
árabe ar
euskera eu
bengalí bn
búlgaro bg
catalán ca
chino (Hong Kong) zh-HK
chino (simplificado) zh-CN
chino (tradicional) zh-TW
croata hr
checo cs
danés da
neerlandés nl
inglés (Reino Unido) en-GB
inglés (Estados Unidos) en-US
estonio et
filipino fil
finlandés fi
francés fr
francés (Canadá) fr-CA
Idioma Valor
gallego gl
alemán de
griego el
gujaratí gu
hebreo iw
hindi hi
húngaro hu
islandés is
indonesio id
italiano it
japonés ja
kannada kn
coreano ko
letón lv
lituano lt
malayo ms
malayalam ml
maratí mr
noruego no
persa fa
polaco pl
Idioma Valor
portugués (Brasil) pt-BR
portugués (Portugal) pt-PT
rumano ro
ruso ru
serbio sr
eslovaco sk
esloveno sl
español es
español (Hispanoamérica) es-419
suajili sw
sueco sv
tamil ta
telugú te
tailandés th
turco tr
ucraniano uk
urdu ur
vietnamita vi
zulú zu

Autenticación obligatoria

Tienes que acceder a Google+ para realizar esta acción.

Acceder a...

Desarrolladores de Google necesita tu permiso para realizar esta acción.