Botones flotantes para compartir

Botones flotantes de facebook, twitter y +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.

Ir a 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:

Debajo de ella agrega este código:

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

<tr><td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=60&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:60px'/></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><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&layout=box_count&show_faces=false&width=73&height=60&action=like&font=tahoma&colorscheme=light' style='border:none; overflow:hidden; width:73px; height:60px'></iframe></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>

Edita las partes en color rojo si usas un dominio propio diferente a blogspot.com quita la parte en color verde por dominio que usas (ejemplo: .com, .es, .tk, .info etc...)

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