Botones flotantes para compartir de Facebook, Twitter y Google +1
28 de julio de 2011 Etiquetas: Facebook , Google Plus , Twitter 569 comentarios ,
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.