Estás en: Inicio » Archivos de mayo 2012

Caja flotante para compartir en redes sociales

Hola amigos, hoy les traigo una interesante caja flotante hecha con Css, la cual nos va a permitir tener la opcion de copartir en Google +, Twitter y Facebook. Para utilizarla en nuestro blog debemos hacer lo siguiente:

Antes de ]]></b:skin> pegamos el siguiente código:

/****** Contenedor de botones facebook, twitter y Google ********/
#caja-botones {
position: fixed;
top:207px;
bottom: 30%;
margin: 120px 0 0 -160px;
left: auto;
z-index: 2;
width: 85px;
height: 245px;
background-color:#f7fcfd;
border: 1px solid #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#caja-botones h4{
font-size: 11px;
margin: 4px 0 3px 0;
padding: 0;
text-align: center;
color: #0d72fb;
font-weight: normal;
background: none;
letter-spacing: 0em;
}

.boton-facebook {
float: left;
display: block;
margin: 3px 0 2px 7px;
padding: 0;
width: 80px;
height: 70px;
}
.boton-twitter {
float: left;
display: block;
width: 80px;
height: 70px;
margin: 4px 0 2px 9px;
padding: 0;
}
.boton-google {
float:left;
display: block;
text-align: center;
margin: 2px 0 0 7px;
padding: 0;
width: 70px;
height: 65px;
}

Una vez realizado el paso anterior buscamos <div class='post-footer'> y antes de esto pegamos el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<div id='caja-botones'><h4>¡Compartir!</h4>
<div class='boton-twitter'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='facu_b' href='http://twitter.com/YOUR_USERNAME'>Twettear</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='boton-facebook'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?locale=es_ES&href=" + data:post.url+ "&layout=box_count&show_faces=false&width=80&height=70&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:70px'/>
</div>
<div class='boton-google'>
<g:plusone size='tall'/>
</div>
</div>
</b:if>

Pueden ver un ejemplo funcionando en este blog de pruebas.

Leer mas