Botones flotantes para compartir de Facebook, Twitter y Google +1

Hace ya algo de tiempo vimos cómo poner los botones de compartir de Facebook y Twitter en la parte superior de las entradas, pero ahora veremos cómo ponerlos en modo flotante tal como el ejemplo de este mismo post, verás que aun con subir o bajar el scroll de la página los botones permanecen ahí (en el lado izquierdo).

Además del botón Me gusta de Facebook, el botón para twittear, se ha incluido el botón +1 de Google.

Veremos cómo ponerlos de dos formas, o mejor dicho, con dos funciones diferentes, la primera será para que sólo se muestren en las entradas y que su función sea compartir (o recomendar) la entrada donde se ha hecho click en el botón.

La segunda opción será mostrarlo en todas partes inclusive en la portada, pero con la diferencia que no será para compartir las entradas, sino el blog completo.

El procedimiento es sumamente sencillo, sólo hay que entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios, y pegar antes de ]]></b:skin> lo siguiente:

table#RedesSociales{
position:fixed;
top:150px;
left:5px;
z-index:200;
}

Ahora busca esta línea:

<!-- clear for photos floats -->

Debajo de ella agrega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></td></tr>

<tr><td><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'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>

</tbody></table>
</b:if>

Guarda los cambios y listo. Ese servirá para que se compartan las entradas individuales, así que no se verán en la portada, sólo ingresando a un post.

Pero si lo que quieres es compartir o que se recomiende la URL de tu blog y no las entradas, entonces en lugar de ese código, el que pondrías sería este:

<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td>&lt;iframe allowTransparency=&#039;true&#039; frameborder=&#039;0&#039; scrolling=&#039;no&#039; src=&#039;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=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#039; style=&#039;border:none; overflow:hidden; width:73px; height:60px&#039;&gt;&lt;/iframe&gt;</td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Título del blog' 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>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/></td></tr>

</tbody></table>

En este caso, hay que poner los datos que se indican en color rojo. Si usas un dominio propio entonces no pongas .blogspot.com sino la extensión de tu dominio propio. Por ejemplo, en lugar de ciudadblogger.blogspot.com sería ciudadblogger.com

En ambos casos podemos cambiar la posición de los botones, eso se controla en el primer código.

top:150px; es la distancia que habrá desde arriba, con un valor más alto los botones se bajarán.

left:5px; es la distancia que tendrán desde al lado, left indica que estarán a la izquierda, si los quieres a la derecha cambia left por right

Y listo. Otra forma de ofrecerle a los lectores la posibilidad de que valoren nuestro blog y entradas en las diferentes redes sociales.