Poner Boton Oficial de Google Plus en Blogger / Sidebar o entradas

Google+ se ha convertido en una red social potente en ciertos sectores, y es una red social que no debemos descuidar. Es obvio qeu se trata de Google y su red social es muy importante ya que simplemente el hecho de compartir tus entradas en Google+ facilita que tus artículos salgan en los resultados de Búsquedas.

Muchas veces al realizar una búsqueda no te salen solo páginas webs, vídeos o imágenes si no que también te salen publicaciones en esta Red Social de Google.

Te muestro un ejemplo a continuación del resultado que me aparece al poner Tutoriales Blogger. Salen normalmente al final de todos los resultados recomendados en la primera página, pero pueden salir en cualquier sitio. La realidad es que aparece y es, junto a Youtube, la única Red Social que, pro el momento, recomienda en los resultados de búsqueda.

Por lo tanto es importante añadir un botón de seguidores de Google + y trabajar esta red social. Si no le quieres dar tanto movimiento como a Facebook o Twitter, no pasa nada, pero deberías publicar siempre tus artículos en esta red social.

¿Cual es el botón Oficial de Google+ y para qué sirve?

Ya te he comentado algo importante, pero te contaré más.

Botón +1

Este botón no actúa solo como para ganar fans o seguidores, si no que sirve para recomendar, tanto a los círculos de las personas que hacen +1 como a Google mismamente.

Eso del +1 es lo que hace el botón, ganas un seguidor o seguidora y a la vez estás creando una recomendación.

En este caso al hacer click en este botón es como si dieramos click en compartir en Google+, botón que ya tenemos en nuestras entradas, personalizado totalmente,  tras el tutorial que hicimos en el curso, no obstante, este es el oficial, por si a alguien le interesa.

Es muy recomendable usar este botón en tus entradas y hasta en tu página principal, con lo cual vamos a ver cómo lo podemos añadir después de explicarte el otro botón que Google+ nos ofrece.

Botón Seguir

Este es muy similar, no obstante simplemente «te sigue» digamos que no es una recomendación en sí, si no más bien simplemente te añade a sus círculos y te sigue en esa red social.

Es también relevante, porque sabemos que cuantos más seguidores a más gente llegaremos.

Tutorial Blogger para añadir botones oficiales de Google+

BOTÓN +1 DE GOOGLE+

En este caso vamos a añadirlo en nuestro sidebar y debajo de nuestras entradas. Intentaremos personalizarlo también.

Colocar botón de Google+ en nuestro Sidebar

  • Vamos a nuestro panel de control y a Diseño
  • En nuestra Sidebar le damos a Añadir gadget, y elegimos HTML/Javascript
  • Copia este código y pégalo en ese gadget:

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

  • Dale a Guardar, muévelo donde quieras que aparezca y ve a ver cómo ha quedado.

Colocar botón de Google+ en nuestras entradas

  • Vamos a nuestro Tema y Editar HTML
  • Buscamos : si no sabes cómo buscar en tu plantilla mira este vídeo
post-footer-line post-footer-line-1 

  • Justo encima pega el código.
  • Dale a Guardar y ve a mirar cómo ha quedado.

¿Quieres personalizarlo?



Vamos a personalizarlo un poco. Para ello vamos a añadirle una clase, en la que le diremos que esa «zona» tendrá un margen con respecto al botón y este margen es un fondo al que le pondremos un color. Principalmente quedará mejor el color de la red social, porque en este caso este botón no es personalizable. ¿Queríamos el oficial no?

<div class="botongoogle1"><g:plusone size="tall"></g:plusone></div>

Hemos añadido el botón a un div, así ya lo tenemos dentro de un lugar que podemos personalizar.

  • Ahora añade en tu Plantilla HTML , en la zona de CSS  [ buscando /b:skin  y pegándolo antes de los dos corchetes como este ] el siguiente código y luego dale a Guardar:
.botongoogle1 {text-align:center;padding:20px 10px 10px 10px;max-width:70px;width:100%;background-color: #db4437}
  • Eso es un fondo de color, pero si queremos solo un borde añadimos esto en vez de lo anterior:

.botongoogle1 {text-align:center;padding:20px 10px 10px 10px;max-width:70px;width:100%;border:1px dashed #db4437}

Diferentes estilos de línea que puedes usar, si cambias en este último código la palabra «dashed» que significa líneas, por alguna de las siguientes

  • Solid = significa línea normal, sólida.
  • Dotted = significa línea de puntos.

Botón Seguir de Google+ en tu Blog

  • Para este caso seguimos los mismos pasos que en el caso anterior pero en vez del código :

<div class="botongoogle1"><g:plusone size="tall"></g:plusone></div>

usaríamos este otro:

<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'es'}
</script>

<!-- Inserta esta etiqueta donde quieras que aparezca widget. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/109892936955162106419" data-rel="publisher"></div>

En este caso la opción de personalización la descarto. Si queremos el oficial mejor dejarlo así. De todas formas si quieres puedes modificar el tamaño donde pone data-height=»24″ y puedes poner el ancho que quieras, pero no pasará de 24px de ancho, que es el máximo.

Puedes ver las opciones de Google en su página oficial 
  • Botón +1 y Botón follow

Te dejo con el vídeo tutorial de Blogger para añadir los botones:

Esto es todo. Cualquier duda intentaré resolverla siempre en los comentarios. En próximos osts veremos cómo añadir los botones de Youtube para suscribirse desde el blog y el Me gusta de Facebook.

Comparte

MI LIBRO

TU PROPIO ÉXITO

DESARROLLO PERSONAL Y BRANDING

Consigue tu ejemplar con ejercicios e ilustraciones.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments