Como funciona Google +1

Para entender el funcionamiento de Google +1 se ha preparado un video el cual explica al detalle la forma en que funciona y se integra con nuestro web:

Como Implementar el botón Google +1

Para implementar el Google +1 es nuestra web primero hay que ir Add +1 to your pages to help your site stand out en donde podremos seleccionar el tamaño del botón a utilizar el idioma del botón y algunas opciones avanzadas.

Luego de ello debemos copiar un primer bloque de código en el header de nuestro HTML (Ubicar el código justo antes del tag </head>):

1
2
3

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

Luego debes colocar el siguiente código en el lugar donde deseas se muestre el botón Google +1.

1

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

Listo, esto es todo y ya tendremos el botón habilitado mediante el cual nuestros usuarios podrán compartir de manera sencilla el contenido de nuestra web con todos sus contactos.

Tweet

Insertar Tweet Button

Utilizar Tweet Button es muy sencillo, para ello tienes que editar el código html de la página donde deseas mostrar el botón e insertar las siguientes líneas.

1
2

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Con lo cual obtendremos el siguiente resultado:

Tweet

Utilizar el Generador de Tweet Button

Tweet Button tiene parámetros adicionales que te permitirán adaptarlo a tus necesidades, para ello Twitter ha creado Tweet Button Goodies Page, un Generador que te permite configurar todos los parámetros disponibles y al final generará el código necesario para copiar y pegar en tu web.

Utilizar WP-TweetButton Plus para insertarlo en WordPress

WP-TweetButton Plus es plugin para WordPress que te permitirá incluir Tweet Button en los posts de tu blog sin necesidad de editar tu template, además cuenta con un panel de configuración muy útil para configurar el botón y adaptarlo a tus necesidades.

Tweet

Activar Botones para Compartir

Si deseas activar los botones para compartir debes acceder a tu panel de Blogger, luego vas a editar el diseño de tu tema mediante: Diseño > Elementos de la página.

Seleccionas “Editar” las entradas del blog, en donde tendrás todas las opciones que se pueden habilitar para los posts, donde hay una opción llamada Mostrar botones para compartir.

Una vez habilitado esta opción se mostrarán 5 botones para compartir el contenido de blog:

• Enviar por correo electrónico
• Escribe un blog
• Compartir con Twitter
• Compartir con Facebook
• Compartir con Google Buzz

No aparecen los botones “Mostrar botones para compartir”?

Si estas utilizando un tema que no ha sido creado por Blogger, es probable que los botones no aparezcan, esto es por que estos temas no tienen incluido la etiqueta para mostrar estos botones. Para resolver este inconveniente debes editar el código de tu tema en Diseño > Edición de HTML.

En el código debes buscar el elemento includable que se encarga de mostrar el contenido del post:

1
2
3

<b:includable id='post' var='post'>
...
</b>

Dentro de este tag debes incluir el siguiente código, que es el encargado de mostrar los botones para compartir. Debes colocarlo en donde prefieras que se muestren los botones, generalmente luego del botón de edición.

1
2
3
4
5
6
7

<b:includable id='post' var='post'>
...
   <!-- share buttons -->
   <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
   </div>
</b>

Pueden ver estos botones habilitados en nuestro blog de ejemplo: http://2webfacil.blogspot.com.

Mas Información

• Blogger Buzz: New Share Buttons
• Los botones para compartir de Blogger

Tweet

AddThis
AddThis es una librería Javascript que permite agregar fácilmente los botones para compartir contenido en diferentes sitios. Se puede personalizar y soporta hasta 50 idiomas y soporta mas de 150 servicios como Twitter, Facebook, MySpace entre otros.

Como utilizar AddThis
El uso de AddThis es sencillo para ello accedemos a http://addthis.com en donde seleccionamos que tipo de página tenemos (Blogger, WordPress, MySpace o un Web normal) luego el tipo de botón a utilizar, opcionalmente puedes seleccionar una opción para obtener estadísticas de las visitas para lo cual hay que registrarse y finalmente generamos nuestro botón.

AddThis en tu Website
Si seleccionamos website el código generado será de la siguiente forma, el cual debes colocar en cada página donde desees agregar la opción para compartir.

1
2
3
4

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aff590b0be123da"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aff590b0be123da"></script>
<!-- AddThis Button END -->

AddThis en Blogger
Si utilizas Blogger puedes agregarlo rápidamente a tu sidebar con la opción Install to Sidebar que agregará el código necesario automáticamente. Ahora si deseas agregar la opción en cada post debes editar tu plantilla y agregar el código generado justo después de la etiqueta >div class=’post-footer’<

Guardas tu plantilla y ya tienes instalado esta opción en tu blog. Puedes el ejemplo funcionando en nuestro blog de prueba en: http://2webfacil.blogspot.com

Tweet