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