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{Ahora busca esta l?nea:
position:fixed;
top:150px;
left:5px;
z-index:200;
}
<!-- clear for photos floats -->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=63&action=like&font=tahoma&colorscheme=light"' 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><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>
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.
