Cómo añadir el botón Google Plus a la página web

Cómo añadir el botón Google Plus a la página web

  • Autor de la entrada:
  • Categoría de la entrada:seo
  • Comentarios de la entrada:Sin comentarios

Debes saber lo importante que es añadir botones de compartición social en tu sitio, que traen tráfico a tu sitio web y son buenos para el SEO también. Si su contenido se ha convertido en viral en los sitios de redes sociales como Google, Facebook, Twitter, etc. entonces, hay grandes posibilidades de que el contenido se gane rápidamente una buena SERP. Esa es la razón por la que desde hace un par de días, he estado escribiendo cómo añadir manualmente los botones de medios sociales (G plus, Facebook, twitter) a su sitio web.

Aquí están los enlaces de algunos artículos que escribí…

Añadir el botón de twitter a la página web
cómo poner un botón como el de Facebook en la página web

Hoy, vamos a cubrir cómo añadir un botón de Google plus a su sitio web. Debes añadir un botón de Google +1 en cada página web de tu sitio, ya que seguramente te ayudará un poco en la búsqueda de Google, si escribes contenido de calidad y tienes un buen fan siguiendo en Google plus. Cuanto más +1 gane una página web, más posibilidades tendrá esa página web de obtener buenas SERP.

Google-plus-icon

¿Qué tengo que hacer para añadir el botón a mi página web?

Todo lo que tienes que hacer es, sólo tienes que seguir los siguientes dos simples pasos:

Paso 1: Seleccione el botón que le guste, copie el código del botón correspondiente y péguelo en la plantilla del tema de su página web (en el lugar donde quiera que se muestre el botón).

Paso 2: He proporcionado dos JavaScript después del código del botón, elija uno de ellos.

Los botones de Google Plus y su código

Así es como se ve un botón estándar de Google +1.

Botón Google +1

Aquí está el código:

<Coloca esta etiqueta donde quieras que el botón +1 se muestre. --><div class="g-plusone"></div>

El tamaño del botón anterior es estándar y la anotación es burbuja. Existen otros pocos tamaños (pequeño, mediano, alto) y anotaciones (en línea, ninguno) disponibles en la página de desarrolladores de Google +1.

Básicamente, para los diferentes tamaños es necesario añadir un atributo extra de tamaño de datos:

Botón estándar:

El código proporcionado anteriormente es para el botón estándar, por lo que no es necesario el atributo de tamaño.

Botón pequeño:

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

Botón mediano:

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

Botón alto:

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

La misma manera para las anotaciones de datos-un atributo de anotación necesita ser definido

Así es como se ve un botón de anotación en línea de pequeño tamaño.

gplus-botón; tamaño: pequeño; anotación: en línea

Y, aquí está el código para el botón de arriba:

<Coloca esta etiqueta donde quieras que el botón +1 la represente. --><div class="g-plusone" data-size="small" data-annotation="inline" data-width="300"></div>

JavaScript

Guión sincrónico

El guión sincronizado ralentiza un poco tu sitio web. No recomendamos el uso de la escritura sincrónica en su blog o sitio web hasta que no tenga una razón de peso para hacerlo.

<!-- Coloca esta etiqueta en tu cabeza o justo antes de tu etiqueta corporal cercana. --><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Script asíncrono

No afecta a la velocidad de carga de la página web, por lo que preferimos usar esto en nuestro sitio.

<Coloca esta etiqueta después de la última etiqueta del botón +1. --><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>

Haznos saber si necesitas ayuda para configurar el botón de Google Plusone en tu sitio.

Deja una respuesta