Blogger: iconos sociales flotantes

El crecimiento de las redes sociales nos invita cada día a incluir botones que permitan a los visitantes compartir uno u otro post y así facilitar la expansión de nuestro sitio en la red. Es bastante raro que el día de hoy un sitio no incluya este tipo de métodos, ahora más, que siempre hay una alternativa diferente.

Y para agregar otra opción a la lista, esta vez mostrare una manera de colocar iconos sociales de manera flotante, combinado CSS+Javascript. Puedes ver una demostración aquí.

La idea en este caso es que aparezcan los iconos solo cuando entramos a un post, eso lo controlamos anteponiendo a cada trozo de código que usemos, la siguiente línea:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   // aquí tu código
</b:if>

Los pasos para aplicarlo son los siguientes:

1.- agregamos antes de la etiqueta </head> el CSS:

Clic aquí para mostrar u ocultar la lista

<style>
#DivCompartir {
   clear:both;
   position: fixed;
   left: 0;
   margin: 0;
   padding: 0;
   top: 45%;
   width: 45px;
   height: 107px;
   display: block;
   z-index: 10000;
}

#DivCompartir ul { margin:0; padding:0; }

#DivCompartir ul li { 
   float: left; 
   display:block; 
   background: 0 none; 
   padding: 0; 
   position:relative; 
   margin-bottom:5px;
}

#DivCompartir ul li a.icon_face,
#DivCompartir ul li a.icon_twit,
#DivCompartir ul li a.icon_tuen { 
   width: 31px; 
   height: 33px;
   display: block;
}

#DivCompartir ul li a.icon_face 
{background: url(http://i52.tinypic.com/2gx1v11.png) no-repeat; }
#DivCompartir ul li a.icon_face:hover 
{ background: url(http://i56.tinypic.com/34940lx.png) no-repeat; }

#DivCompartir ul li a.icon_twit 
{ background: url(http://i51.tinypic.com/106zqs7.png) no-repeat; }
#DivCompartir ul li a.icon_twit:hover 
{ background: url(http://i53.tinypic.com/otqh6r.png) no-repeat; }

#DivCompartir ul li a.icon_tuen 
{ background: url(http://i53.tinypic.com/bf5eea.png) no-repeat; }
#DivCompartir ul li a.icon_tuen:hover 
{ background: url(http://i51.tinypic.com/ip0eba.jpg) no-repeat; }

#DivCompartir ul li span { 
   padding: 3px 3px 3px 8px;
   background: #f9f9f9;
   border: 1px solid #c1930b;
   position: absolute;
   top: 0;
   left: 25px;
   width: 230px;
   height: 23px;
   display: block;
   z-index: -2000;
}

#DivCompartir ul li span a{ 
   width: 230px;
   height: 28px; 
   display: block; 
   text-align:left; 
   font:11px/24px normal normal; 
   text-decoration: none; 
   color: #4d4a47;
}

#DivCompartir ul li #zona_face a { 
   background: transparent url(http://i51.tinypic.com/2hwji4y.png) no-repeat 143px 3px;
}

#DivCompartir ul li #zona_twit a { 
   background: transparent url(http://i53.tinypic.com/s6ug4p.png) no-repeat 160px 0px; 
}

#DivCompartir ul li #zona_tuen a { 
   background: transparent url(http://i53.tinypic.com/23k24gm.png) no-repeat 143px 0px; 
}
</style>

2.- seguidamente colocamos el código Javascript que usaremos para mostrar u ocultar el elemento que "invita a compartir":

<!-- mostrar u ocultar elementos -->
<script>
<!-- // --><![CDATA[
function change_display(id){
   if (document.getElementById){
     // obtenemos una referencia al elemento y cambiamos su estilo
     var elemento = document.getElementById(id);
     elemento.style.display = (elemento.style.display == "none") ? "block" : "none";
   }
}
//]]>
</script>

3.- por ultimo agregamos antes de la etiqueta </body> el código que imprimirá los iconos y los enlaces:

Clic aquí para mostrar u ocultar la lista

<div id='DivCompartir'>
<ul><li>
 <a class='icon_face' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' 
onmouseout='change_display(&quot;zona_face&quot;);' 
onmouseover='change_display(&quot;zona_face&quot;);' target='_blank'/>
 <span class='zona_face' id='zona_face' nmouseout='change_display(&quot;zona_face&quot;);' 
onmouseover='change_display(&quot;zona_face&quot;);' style='display: none;'>
 <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' 
target='_blank'>compartir en Facebook</a></span>
</li>
<li>
 <a class='icon_twit' expr:href='&quot;http://twitter.com/home?status=&quot; + 
data:blog.pageTitle + &quot; - &quot; + data:blog.url' 
onmouseout='change_display(&quot;zona_twit&quot;);' 
onmouseover='change_display(&quot;zona_twit&quot;);' target='_blank'/>
 <span class='zona_twit' id='zona_twit' onmouseout='change_display(&quot;zona_twit&quot;);' 
onmouseover='change_display(&quot;zona_twit&quot;);' style='display: none;'>
 <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.pageTitle + 
&quot; - &quot;+ data:blog.url' target='_blank'>compartir en Twitter</a></span>
</li><li>
 <a class='icon_tuen' expr:href='&quot;http://www.tuenti.com/share?url=&quot; + data:blog.url' 
onmouseout='change_display(&quot;zona_tuen&quot;);' 
onmouseover='change_display(&quot;zona_tuen&quot;);' target='_blank'/>
 <span class='zona_tuen' id='zona_tuen' onmouseout='change_display(&quot;zona_tuen&quot;);' 
onmouseover='change_display(&quot;zona_tuen&quot;);' style='display: none;'>
 <a expr:href='&quot;http://www.tuenti.com/share?url=&quot; + data:blog.url' 
target='_blank'>compartir en Tuenti</a></span>
</li>
</ul>
</div>

Iconos para usar hay muchos, y aparte, la API de Bit.ly (aquí tienes dos ejemplos 1,2) para generar URL cortas.