Estás en: Inicio » Twitter » Caja flotante para compartir en redes sociales

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.

ESCRITO POR Facundo
Me llamo Facundo, entre al mundo de los blogs hacia el año 2009. Soy estudiante de secundaria. Actualmente soy administrador de este blog en el cual publico cosas que me interesan.