Como poner una cajita flotante con botones de: Me gusta de Facebook, twitter y Google +1

Antes habíamos visto la forma de agregar botones para compartir las entradas usando un sprite, y hoy vamos a ver otra forma de facilitarle a tus usuarios compartir las entradas o artículos de tu blog, usando botones de: Me gusta de Facebook, Twitter y Google +1, dentro de una cajita flotante. 

Yo no se quien fue el primero al que se le ocurrió esto, (meterlos en una caja flotante) pero es muy popular, y páginas como Mashable, Naldz Graphics, por mencionar algunas,  lo usan.

¿Qué vamos a hacer?

Para conseguir que los botones se mantengan fijos o floten, y tengan la apariencia que queramos, lo que hacemos, es declarar algunas reglas de estilo en el CSS para la cajita que los contiene, y posicionamos los botones dentro de la cajita por medio del margen, con la clase que creamos para poder mover los botones.

En mi blog lo puedes ver en acción,  al estar dentro de cada post o artículo, es ligero, ya que no usa ningún script ni librería externa para que funcione, excepto por los scripts de los botones, por tu parte, puedes personalizar el color de la cajita contenedora a tu gusto, el borde, y el mensaje arriba de los botones;).

¿Cómo poner la cajita con los botones?

Paso 1. Ve al Diseñador de plantillas ► Avanzado ► Añadir CSS y en el campo a la derecha, pega este código:

#caja-botones{
width: 90px; /*el ancho de la caja*/
height: 240px; /*el alto de la caja*/
position: fixed; /*para que la caja se mantenga fija*/
top: 200px; /*movemos la caja de arriba*/
left: auto;
margin: 80px 0 0 -120px; /*los margenes que puedes editar*/
background-color: #ffffff; /* el color de fondo de la barra*/
border: 1px solid #cccccc; /*el color del borde*/
}
#caja-botones p {
margin: 4px 0;
padding: 0;
text-align: center;
font-size: 12px;
color: #0d72fb; /*el color del texto*/
font-weight: normal;
letter-spacing: 0em; 
}
.b-entradas {
margin: 6px 0 7px 9px;
padding: 0;
}
.b-google {
margin: -2px 0 0 16px;
padding: 0;
}

Importante: 

Con el margen negativo, arriba marcado con rojo (-120px) hacemos que la caja siempre se mantenga en la misma posición, sin importar la resolución de pantalla del usuario, ya que de no ser así, en resoluciones de pantalla pequeñas, la caja se va a ir encima del contenido, o en resoluciones muy grandes, se va a ir hasta el extremo. Esto no sería necesario si por ejemplo usáramos un diseño fluido y declaráramos en porcentajes los márgenes o superpusiéramos el contenido sobre la caja, pero ese es otro rollo.
Esto quiere decir que resoluciones de 1024 pixeles o menos, no verán la caja con los botones, a menos que se use un ancho del blog completo menor de 800 pixeles.

Paso 2: Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y con la ayuda de Ctrl F busca: <data:post.body/> (el primero de arriba hacia abajo) e inmediatamente después pega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='caja-botones'><p>&#161;Compártelo!</p>
<div class='b-entradas'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
    </div>
<div class='b-entradas'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=80&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:65px'/>
    </div>
<div class='b-google'>
<g:plusone size='tall'/>
</div>
  </div>
    </b:if>

Puedes cambiar: &#161;Compártelo! por otro mensaje corto que quieras que aparezca arriba de los botones.

 &#161; es el código del signo de admiración inicial: ¡.

El texto del botón de Facebook siempre se mostrará en Español: "Me gusta".

Paso 3: Con la ayuda de Ctrl F, busca: </body> y justo antes, pega el script del botón +1 de google:

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (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>

Nota: Si ya tienes el script pegado ahí, porque usas los botones para compartir tu blog, incluyendo el de +1, entonces no lo pongas.

Paso 4: Internet Explorer 6 tiene problemas con la posición fixed, cuando esta no se usa en el body (background o fondo de la plantilla), pensando en eso,  tenemos tres opciones: (1)ignorarlo, (2)hacerlo funcionar, o (3) evitar que se vea, eligiendo la última opción, tendrías que agregar esto después de ]]></b:skin> 

<!--[if IE 6]>
<style type="text/css">
#caja-botones{
display: none;
}
</style>
<![endif]-->

Con el código anterior, estamos condicionando, para que no se muestre la caja en IE6 (Internet explorer 6).

*Otra opción es usar un hack, en el que se puede declarar cualquier propiedad para IE6 y solo lo al CSS del Paso 1:

* html #caja-botones {
    display: none;
}

Paso 5: checa en vista previa y si todo luce bien, guarda los cambios. La caja con los botones aparecerán al estar dentro de cada post o artículo.

Notas:

• Puedes agregar otros botones, solo tienes que aumentar el tamaño del alto de la caja (height) 
• Siempre es bueno ir a obtener los códigos de los botones en las respectivas páginas, para no perderse de actualizaciones, etc.
• Esta caja flotante, no debería ser la única opción para compartir entradas,  ya que en resoluciones pequeñas no se verá, por ello, es aconsejable, usar la caja + los botones ya sean los de Blogger para compartir entradas u otros personalizados dentro del mismo post.

Páginas oficiales de los botones:
Facebook
Twitter
Google

Referencias:

Ejemplo y como funciona la posición fixed

También puedes ver como hacer funcionar la posicion fija en IE6:

fixed positioning in IE6


Puedes checar la caja en distintas resoluciones de pantalla en test size.

[*Actualizado: Oct/07/2011]