28 febrero 2013

Botón animado para compartir en 6 redes

+Oloblogger nos mostró en el día de ayer un simpático botón animado para compartir en 4 redes el cual 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.

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

Me he tomado el placer de modificarlo un poco para aquellos que dicen "una imagen vale más que mil palabras" y le he introducido imágenes y un par de redes más (Bitácoras y Linkedín).

Antes de mostraros el código podéis ver como queda Ver Demo

Para instalarlo en vuestras plantillas deberéis seguir los siguientes pasos:

1.- Antes de ]]></b:skin> colocamos el siguiente CSS
/* Botón único para compartir */
.share_button { width: 450px;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: 8%; overflow: hidden; width: 100%;color: #fff; font-size: 16px; }
.share_button ul li { position: absolute; height: inherit; width: 225px; margin: 0 !important; padding: 0 !important; background: #4F4E4E;
-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: 30%; height: 35px; overflow: hidden; margin-top: 5%; cursor: pointer; 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);
}

2.- Ahora buscamos <div class='post-footer-line post-footer-line-1'> y a continuación pegamos el siguiente HTML
<b:if cond='data:blog.pageType == "item"'><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'><img height='31' src='http://www.adra-es.org/wp-content/themes/adra/images/new_socials/facebook.png' width='30'/></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'><img height='31' src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT6frfJ6r6X5tulPKb988FXEionrbf3PXqjsQPD_u9jfmppzeQ0' width='30'/></a>
</h2>
<h2>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Compartir en Google Plus'><img height='31' src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSCdBstNntP4xqDqktXeYWdDvWl-rl4W4hQz0CzvJYfUPp_P4FJ' width='30'/></a></h2>
</li>
</ul>
<ul>
<li>
<h1>
sta página
</h1>
</li>
<li>
<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'><img height='31' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2BPc7311aGaRRMZZigMImVcaa74fbn2RG-zkjYFN8GuumvSvHpw' width='30'/></a>
</h2>
<h2>
<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Compartir en Bitacoras'><img height='31' src='http://www.fromspaintouk.com/images/sociable/bitacoras.png' width='30'/></a></h2>
<h2>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;source=&quot; + data:blog.title + &quot;&amp;summary=&quot; + data:post.snippet' target='_blank' title='Compartir en Linkedin'><img height='31' src='http://catedraseat.upc.edu/media/ico_linkedin.png' width='30'/></a>
</h2>
</li>
</ul>
</div> </b:if>


Y esto es todo, ya tenéis vuestro botón de compartir al final de cada página.

11 comentarios

Muchísimas gracias, lo implementé y queda estupendo.Serías tan amable de indicarme como quito los que vienen por defecto en el blog? Es que ahora los tengo duplicados.En espera de tu respuesta recibe un saludo

Hola de nuevo: Lo he probado y me dice que la página no existe.¿ A qué se debe? Gracias

Prueba ahora cambiando el 2º código, había un fallo.

Hola: Cuando lo implementé la primera vez sin ese fallo que tienes en los códigos, salió pero al probarlo decía que la página no existe y ahora cambiándo el código segundo como dices y borrando esas dos líneas de "see more at"... No aparece nada
Un saludo

No te sale en portada pero debe salir en entradas individuales.

Hola Amor sevillista, veras he visto una entrada tuya donde te he dejado un mensaje, pero supongo al ser tal vez antigua no veas el comentario..podrias echarme una mano.
Aqui te dejo el enlace http://www.amorsevillista.com/2012/02/enumerar-y-dar-estilo-los-nuevos.html

saludos y gracias..

Estoy de vacaciones cuando llegue el domingo te lo paso.
Saludos.

Gracias ..estare pendiente.. Un saludo

Te dejo los estilos de los comentarios, colócalo después de ]]></b:skin>, VER AQUÍ.

Espero que te quede bién.
Saludos.


Muchas gracias Amor Sevillista, ya los colocare.. Mil gracias por todo..

saludos..


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"