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.
No hay comentarios:
Publicar un comentario