Botones flotantes para recomendar el blog (Facebook, Twitter, PlusOne)

La instalación de estos botones es bastante sencilla, primero entra en la Edición HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:

#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del botón */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tamaño del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}

Ahora antes de </head> pega este código; si ya lo tuvieras no hace falta ponerlo otra vez:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>

Luego pega antes de </body> lo siguiente:

<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
<table border='0' id='expandirBotones' style='display:none'>
<tr>
<td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
<td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti también te gustará:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table>

Si ya estuvieras usando el botón +1 de Google entonces no hará falta repetir el código del script, así que busca esta línea todas las veces que la tengas y elimínala:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Sólo dejaremos el script que hemos puesto en este código, excepto si has decido poner los botones sólo en la portada, si así fuera entonces no hará falta quitar esa línea salvo algunas excepciones.

ACTUALIZACIÓN: En Internet Explorer el botón de Facebook no se ve bien cuando se agrega de esta forma.