1 simpático botón animado para compartir en 4 redes

Esto lo vi en Paulund, un sitio muy recomendable con una buena recopilación de snippets o lo que vendría a ser en castellano común, una colección de pequeños códigos que desarrollan diferentes utilidades, todas ellas aplicables al diseño web.

En esta ocasión se trata de un gran botón rectangular con una frase invitando a compartir, que al pasar el puntero sobre él nos muestra tras un efecto, cuatro iniciales que son realmente enlaces para poder compartir la página que se está viendo en Facebook, Twitter, Google+ y Pinterest.

Me ha gustado por su sencillez y sus posibilidades, pues desde el CSS podemos cambiar lo que queramos de su aspecto.


Por ejemplo se pueden adaptar fácilmente la fuente y los colores, pero también podríamos cambiar las letras por iconos de las distintas redes para hacerlo algo más gráfico.


Una cosa a tener en cuenta es que en este ejemplo utilizamos cuatro redes sociales concretas, pero podrían ser otras cualesquiera sólo cambiando el enlace (ver Lista de URL para enviar artículos). Y por qué no, también utilizarlo para otro tipo de enlaces o simplemente para mostrar otro tipo de información -no enlaces- que queramos que inicialmente esté oculta.


En su versión original se usaban etiquetas típicas de HTML5 para marcar los distintos elementos (section, article) pero yo he preferido hacerlo con una lista. Sinceramente no sé qué será mejor o peor, pero por si acaso, en el enlace del principio de este párrafo tenéis esa versión de Paulund.

No incluían en esa web cómo construir los enlaces para compartir, pero de eso me he ocupado yo y lo he insertado en el siguiente código para que sólo tengáis que copiar y pegar... y es que a medida que me hago mayor me cuesta más trabajo explicar las cosas detalladamente, así que el que quiera entender lo que hace esto que lo estudie un poco y si tiene alguna duda que pregunte sin problemas.

Pero antes del código podéis ver aquí el botón en acción y en esta página de pruebas otra versión de color rojo.

• Compartir e

• F

  T

• sta página

• G

  P

Esta sería la parte de estilo que necesitamos:

Lo que hay que insertar antes del ]]></b:skin>

/* Botón único para compartir */
.share_button { width: 300px;height: 60px; margin: 10px auto; }
.share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; }
.share_button ul h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff; font-size: 16px; }
.share_button ul li { position: absolute; height: inherit; width: 150px; margin: 0 !important; padding: 0 !important; background: #eacc6a;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { display: inline-block; width: 40%; height: 40px; overflow: hidden; margin-top: 10%; cursor: pointer; font-size: 24px; border: 0 !important; }
.share_button ul li h2:hover { text-shadow:2px 2px 2px #555; }
.share_button ul li h2 a { color:#FFF; text-decoration: none; }
.share_button ul:first-child li:first-child{ text-align: right; }
.share_button ul:last-child li:first-child{ text-align: left; }

.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Y este sería el HTML para insertar el botón en la plantilla. El lugar más natural para ponerlo probablemente sería justo después de <div class='post-footer'>.

<!-- Botón único para compartir -->
<div class='share_button'>
<ul>
<li>
<h1>
Compartir e
</h1>
</li>
<li>
<h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Compartir en Facebook'>F</a>
</h2>
<h2>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Compartir en Twitter'>T</a>
</h2>
</li>
</ul>
<ul>
<li>
<h1>
sta página
</h1>
</li>
<li>
<h2>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Compartir en Google Plus'>G</a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Compartir en Pinterest'>P</a>
</h2>
</li>
</ul>
</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter