NorfiPC »
Publicación web »
Botón Seguir en Google+
Como agregar el botón Seguir en la red Google+ a las páginas web
Twittear
Códigos para mostrar en nuestro blog o en las páginas de nuestro sitio web el botón para facilitar que los lectores nos sigan en la red Google Plus. Como insertar los badgets e insignias de las Páginas y Comunidades para atraer nuevos miembros.
En la red social Google+ los seguidores son un equivalente a los amigos en Facebook.Mientras más tengamos, más relevancia tendrá nuestra página de perfil o una pagina.
Una de las principales formas de lograr más seguidores es insertar en nuestro blog en las páginas de nuestro sitio web, el botón que permite a nuestros lectores seguirnos.
Además del botón "Seguir" en Google+ que es la opción más sencilla, es posible insertar y mostrar un badget o insignia para una página o también para las comunidades.
Debemos aclarar que los badgets hacen la misma función del botón "Seguir", que es la de facilitar que los lectores puedan seguirnos sin salir de la página que están leyendo.
Adicionalmente tienen otras funcionalidades y son más vistosos.
Los nuevos badgets sustituyen a los existentes anteriormente, que próximamente quedarán obsoletos.
Podemos situarlos en el encabezado o en la parte inferior de nuestra página insertando un simple código en la plantilla de nuestro sitio o de forma individual en todas las páginas.
Todos los botones o badgets requieren la carga del archivo "plusone.js".
Para eso es necesario insertar el siguiente código en cualquier parte de la página:
También puedes usar un código que cargue el archivo de forma asíncrona o sea por partes, sin perjudicar la carga de los elementos de la página.
Para eso es necesario insertar el siguiente código en cualquier parte de la página:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Si ya usas en tu página el botón +1, no será necesario ya que este lo incluye.También puedes usar un código que cargue el archivo de forma asíncrona o sea por partes, sin perjudicar la carga de los elementos de la página.
Código del botón Seguir en Google+
El botón "Seguir" es un sencillo botón que al dar un clic el lector lo convierte en un seguidor de tu página. Se muestra de color blanco.
Al situar el cursor del ratón encima muestra un menú en el que es posible marcar el círculo donde seremos agregados. Después de usarlo torna su color a azul.
Para agregarlo inserta en el lugar exacto de la página donde deseas se muestre el botón "Seguir" el siguiente código:
<div class="g-follow" data-href="https://plus.google.com/108141328258087945339"></div>
Sustituye la dirección en la etiqueta "data-href" por la de tu página.
Atributos y opciones del botón Seguir en Google+
En el código es posible usar otros atributos para configurar la forma en que se muestra el botón.
| data-annotation | Se pueden usar tres valores:
none – Solo el boton bubble – Muestra los seguidores vertical-bubble – Crea un botón vertical más grande |
| data-height | Se pueden usar tres valores:
none – Solo el boton bubble – Muestra los seguidores vertical-bubble – Crea un botón vertical más grande |
| data-rel | Indica la relación que existe entre la página que contiene el botón y la que hace referencia:
author Publisher |
Síguenos en Google+:
Se emplea el siguiente codigo:
<div class="g-follow" data-href="https://plus.google.com/108141328258087945339" data-annotation="vertical-bubble" data-rel="author"></div>
Encuentra más información detallada en:
https://developers.google.com/+/web/follow/
Código de los badgets de Google+
Los badgets o insignias son recursos muy vistosos que nos permiten darle más publicidad a nuestra página en Google+. Se puede escoger entre tamaños y estilos diferentes.
Muestran lo siguiente:
• El nombre de la página
• La cantidad de seguidores
• El botón Seguir.
• El botón +1
• Un vínculo a la página.
Para agregar un badget inserta en el lugar exacto de la página donde deseas se muestre uno de los siguientes códigos.• La cantidad de seguidores
• El botón Seguir.
• El botón +1
• Un vínculo a la página.
Para una página de perfil personal:
<div class="g-person" data-href="https://plus.google.com/111787464232412773584"></div>
Para otra página de Google+
<div class="g-page" data-href="https://plus.google.com/108141328258087945339"></div>
Sustituye la dirección en la etiqueta "data-href" por la de tu página.
Los codigos anteriores escriben los siguientes badgets:
Para personas (perfiles)
Para Páginas
Atributos y opciones de los badgets o insignias de Google+
Puedes agregar en el código los siguientes atributos para configurar la forma en que se muestra y personalizarlo a tu gusto.
| data-layout | Orientación del badget, el valor predeterminado es "portrait"
landscape portrait |
| data-showcoverphoto | Muestra la foto de cubierta si existe, el valor predeterminado es true (mostrar)
true false |
| data-showtagline | Muestra una etiqueta del usuario.
true false |
| data-theme | Tema a emplear, predeterminado light. Se debe usar dark en un fondo oscuro.
light dark |
| data-width | Ancho del badget, predeterminado es 300. Usa el valor entre los rangos:
Portrait (180-450 pixeles) Landscape (273-450 pixeles) |
Insignia para las comunidades en Google+
El que posee una comunidad en Google+ también tiene la opción de mostrar una insignia para atraer nuevos miembros. Se pueden configurar para adaptarlos al estilo de la página.
Al dar los lectores un clic en la insignia se abrirá en una nueva ventana una vista previa de la comunidad, con las publicaciones recientes.
Usa el codigo de la siguiente forma:
<div class="g-community" data-href="https://plus.google.com/communities/XXXXXXX"></div>
Los valores de configuración y atributos son similares a los de los badgets.Encuentra más información detallada en: https://developers.google.com/+/web/badge/
Insertar el botón Seguir en Wordpress y Blogger
Las dos famosas plataformas de publicación y creacion de blogs, Wordpress y Blogger permiten agregar los scprits o códigos para escribir los Gadgets y botones de Google+.Lee con más detalle en otra página de nuestro sitio como hacerlo: ¿Cómo insertar los códigos en un blog de WordPress o Blogger?
Cargar de forma asíncrona el código de Google+
Al insertar el siguiente código el archivo "plusone.js" se carga por partes, sin retrasar los restantes elementos en la página.
<script type="text/javascript">
window.___gcfg = {lang: 'es-419'};
(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>
window.___gcfg = {lang: 'es-419'};
(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>
Páginas relacionadas
Qué es la red social Google+, como funciona y por qué participar
Como crear una página en Google+ y vincularla con un blog o sitio web
Como insertar los botones Me Gusta y plusone +1 en las páginas web
Como saber el posicionamiento real de una página web en Google
Como demostrar ante Google ser el autor de lo que publicamos
Como crear una página en Google+ y vincularla con un blog o sitio web
Como insertar los botones Me Gusta y plusone +1 en las páginas web
Como saber el posicionamiento real de una página web en Google
Como demostrar ante Google ser el autor de lo que publicamos
Comparte esta página
Facebook
Twitter