Botones flotantes para compartir de Facebook, Twitter y Google+

Hace unos días publicamos acerca de cómo agregar el botón 'me gusta' de Facebook en las entradas, pero si no basta con que se compartiera la entrada en Facebook, hoy podrás agregar los botones flotantes de Facebook, Twitter y Google+, los cuales permanecerán ahí aunque bajes o subas la página.

Te explicaremos cómo ponerlo con dos funciones diferentes, la primera será para que se muestren solamente en las entradas y que su función sea que al hacer click en cualquier de esos botones, se comparta la entrada. La segunda será para que se muestren en todas partes, inclusive en la portada, pero la diferencia será que en vez de que al momento de hacer click se comparta una entrada, se comparta todo el blog.


El procedimiento para añadir los botones es sencillo, sólo tienes que entrar a Diseño > Edición de HTML > Expandir artilugios y pegar antes de ]]></b:skin> lo siguiente:

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

Después de pegar el código anterior, busca la siguiente línea:

<!-- clear for photos floats -->

Debajo de la línea anterior, pega lo siguiente:

<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, con eso tendrás los botones flotantes solamente en las entradas, así que no se verán en la portada, sólo ingresando a una entrada.

Si lo que quieres es que se comparta tu blog en vez de las entradas, entonces en lugar del código anterior, agrega 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, tendrás que poner los datos que se indican en color rojo.