Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bit?coras)

Hay muchos sitios para compartir nuestras entradas, y muchos de ellos proveen un bot?n para compartir, lamentablemente a veces tenemos que elegir s?lo un par de ellos pues si ponemos todos, (o la mayor?a de ellos) entonces el blog se ve muy saturado. As? que una opci?n es poder agruparlos en un contenedor que est� invisible y accesible s?lo cuando el lector haga click sobre �l. De esa forma podemos agregar los botones para compartir de habla hispana m?s importantes, como son Facebook, Twitter, Google+, Taringa y Bit?coras.

Lo que haremos entonces ser? mostrar una burbuja (bot?n) al final de las entradas, y cuando el lector de cick sobre �l se abrir? con un efecto deslizante un contenedor que tendr? dentro los botones de las principales redes sociales de habla hispana. Este gadget para promocionar nuestros posts ser? visible s?lo en las entradas individuales.

Puedes ver un ejemplo al final de esta entrada, haciendo click en el bot?n se desplegar?n los botones para compartir.

El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el bot?n) lo haremos con CSS3.

Empecemos: primero ingresa en la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery(&quot;#msg-compartir&quot;).click(function(event) {
event.preventDefault();
jQuery(&quot;#btns-compartir&quot;).slideToggle();
});
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del tri?ngulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}

Por ?ltimo, busca esta l?nea:

<div class='post-footer'>

Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>

<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

<td><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este art?culo en Bitacoras.com'/></a></td>

</tr>
</table>
</div>
</center>
</b:if>

Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las ?reas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada bot?n.

Recuerda que:

• S?lo ser? visible en las entradas individuales, NO en la portada.
• La burbuja est? hecha con CSS3, as? que si usas un navegador viejo como Internet Explorer 8 s?lo ver?s un rect?ngulo.
• En Internet Explorer el bot?n de Facebook no se ver? bien, aunque s? funcionar?.

Comparte esta entrada

Tweet