1 simpático botón animado para compartir en 4 redes | Oloblogger 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 co...

27 de febrero de 2013

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.



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
Copy URL

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

follow us in feedly

39 comentarios :

  1. Saludos Oloman, gran post, como nos tienes acostumbrado... Si quiesieramos implementarlo en cada entrada, lo natural sería ir al HTML de cada entrada y colocarlo, pero, ¿Hay alguna forma de ponerlo en la plantilla y que aparezca por defecto en todas las entradas?

    ResponderEliminar
    Respuestas
    1. Sí, claro. Precisamente añadiendo el HTML en la plantilla. Eso es lo que intentaba explicar cuando mencionaba lo de "el valor más natural para ponerlo". Ese DIV que indico es una referencia fácil.

      Eliminar
    2. hecho, muchas gracias!

      Eliminar
  2. Me parece excelente, pero sería mejor que los enlaces para compartir se abrieran en popup como los botones normales. De lo contrario, se pierde a los visitantes

    ResponderEliminar
    Respuestas
    1. No le ha gustado tu comentario a Blogger, pues te he rescato del span :) Sólo se me ocurre que pueda ser por la palabra "PopUp".

      Bueno y no estoy muy de acuerdo en que se pierden visitantes, pues creo que todos saben volver página atrás, pero de todas formas sí se puede hacer. Es lo que tengo en los botones de la izquierda, entre estos comentarios y la sidebar, pero el código sería algo más largo y ya tuve bastante trabajo con añadir los enlaces de la manera que lo hice. Lo dejo para otro post si te parece...

      Eliminar
  3. ¡¡¡Muy buena idea!!!

    Se puede "tunear" cambiando las letras por imágenes y seguro que queda mas bonito aun.

    ResponderEliminar
  4. Saludos Oloman, yo y mis problemas :( Resulta que el código que se usa para detectar la url del post a compartir, parece no ser compatible con mi Blog. Me muestra un texto "TEMP" en vez de la letra de la red social que corresponde y cuando le doy inspeccionar elemento, el html me dice "TEMPLATE ERROR: Invalid data reference post.title: No dictionary named: 'post' in: ['blog', 'skin', 'view']"

    Puedes verlo tu mismo en esta entrada de prueba: http://geropellicer.blogspot.com.ar/2012/11/giladas.html

    El único que funciona es Pinterest, porque no usa el código "data:post.canonicalUrl".. espero puedas ayudarme porque no se que sustituir...Gracias!

    ResponderEliminar
    Respuestas
    1. No sé si cambiaste algo, porque veo un "currentUrl" que no debería estar. Si lo hiciste deja el código tal cual yo lo pongo y prueba.

      Si lo copiaste tal cual prueba a cambiar data:post.canonicalUrl por data:post.url.

      Eliminar
  5. Lo he implementado y queda muy bien.Gracias por compartir cosas originales.

    ResponderEliminar
    Respuestas
    1. Oloman: Una cosa que olvidé decirte,¿Cómo quito las de compartir que vienen por defecto? Es que ahora lo tengo por duplicado. Gracias

      Eliminar
    2. Como tienes los que vienen de serie con Blogger, es fácil. Ve a Diseño, edita el bloque Entradas y ahí encontrarás una casilla de verificación para mostrar o no mostrar esos botones. Supongo que sabrás si se tiene que quedar marcada o no ;)

      Eliminar
    3. Hola:No encuentro la casilla que dices.
      Un saludo y soy una chica

      Eliminar
    4. Pues debería estar. Mira aquí.

      Y perdona si la próxima vez no recuerdo si eres chico o chica. Por el nick cuesta saberlo ;)

      Eliminar
    5. Ok Oloman, cuanto vales... Ya he quitado los botones.Muchísimas gracias

      Eliminar
  6. SMC Music Players, viene de piratear mis blogs y la de toda la clientela que había ocupado sus servicios, la música. Qué puedo hacer??? Por favor ayúdame, no tengo ningún control sobre mis blogs. Puedes constatar, aquí te dejo mis sitios…
    http://www.edicionesdulcineas.blogspot.com
    http://www.vanitasvanitatum-ceciely.blogspot.com

    Gracias por tu respuesta.
    mi e-mail: czevallos31@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Ceciely: También me ha pasado a mi esta mañana. Lo que hice fué quitar el gadget de SMS que tenía con música y quedó arreglado. Un saluso

      Eliminar
    2. Gracias, pero no sé cómo entrar a mis blogs para sacar el gadget…puedes indicarme, por favor?

      Eliminar
    3. Claro: Tienes que entrar desde tu perfil de blogger.Osea desde donde publícas

      Eliminar
  7. Pero no tengo acceso a nada…ni a perfil ni a nada…si deseas puedes verlo…te puse mis blogs en el correo anterior.

    ResponderEliminar
  8. Pero puedes entrar desde cualquier blog.Baja hasta el final y donde dice con la tecnología blogger clica y verás como aparece el tuyo.Entra en el mío o desde este mismo.Abajo dice con la tecnología de bloger y entra

    ResponderEliminar
  9. MUUUUUUUUAAAAAAAA!!! OLOMAN, TE MERECES MUCHOS BESOS…MIL GRACIAS. UNO NUNCA TERMINA DE APRENDER. FUE MUY FACIL.TODO ESTA ARREGLADO…DIME, A ESTE PROBLEMA SE LE LLAMA PIRATEO????

    NO SÉ SI ME RESPONDISTE A MI PRIMER CORREO, TE DECÍA QUE SIEMPRE SE ME PEGA OTRO SITIO WWW.FEMME.COM Y APARECE SEA AL ABRIR MI BLOG O AL RESPONDER COMENTARIOS. Y ME PREOCUPA…HE QUERIDO DESABONARME A ESE SITIO Y NO HAY COMO…TIENES EL MILAGRO EN TUS MANOS? DISCULPA TANTA MOLESTIA.

    ME SALVASTE 2 AÑOS DE TRABAJO.

    ResponderEliminar
    Respuestas
    1. Ceciely, te has confundido. Ese beso debió ser para Localiza Recursos que es el que te ha estado ayudando con lo de SMS. Ya veré lo otro que preguntas cuando llegue a ese post, que voy por orden ;)

      Eliminar
  10. ja ja ja…no importa, pues va para todos, por tu intermedio pude comunicarme con el Servicio que me ayudó. Gracias por verificar lo otro.

    ResponderEliminar
  11. Muchas gracias por tus tutoriales, nos haces la vida más fácil a todos los blogueros, te invito a que sigas al nuevo diseño de mi sitio web....

    http://www.tecnologiasuperz.com/2013/03/nuevo-diseno-de-tecnologiasuperzcom.html

    ResponderEliminar
    Respuestas
    1. Veremos qué es lo que has hecho con la ayuda de esos "sabios" que citas en tu post ;)

      Eliminar
  12. Hola, Oloman!
    Me ha gustado muchísimo este pequeño botoncito de compartir... Peeeero soy nueva en esto y no me entero de nada.
    Para insertarlo en mi blog, dónde tengo que poner exactamente ese código?
    Mil gracias y perdón por la pregunta tan tonta!

    ResponderEliminar
    Respuestas
    1. Se explica en el post. La primera parte de código va antes del cierre del skin y la segunda dentro del DIV con clase post-footer.

      Eliminar
  13. Buen Oloman, a pesar de que has explicado todo claramente, no entiendo por qué no me funciona este truco. Seguí las instrucciones al pie de la letra, y nada. Lo que hice eventualmente (para enseñártelo) fue colocar el código HTML en una entrada de prueba:

    http://maquinometra.blogspot.com/2012/12/entrada-de-prueba.html

    Ese resultado es el mismo que obtengo cuando inserto el código HTML debajo de la línea div class='post-footer'. Es como si el código CSS no tuviera efecto. ¿Qué crees que podría hacer?

    Un gran saludo.

    ResponderEliminar
    Respuestas
    1. Hola Le Corvo. No veo en tu página por ninguna parte el estilo (CSS). Sin él es imposible que te salga algo. Me refiero al primer trozo de código de este post.

      Eliminar
  14. ¡Qué raro! Entré a la edición HTML de la plantilla y ahí lo vi, justo antes del cierre de la etiqueta SKIN. Pero, ciertamente, es como si no estuviera.

    Para ayudarte, te dejo esto:

    view-source:http://maquinometra.blogspot.com/

    Según lo que veo, este código de estilo comienza en la línea 926. ¿Será que lo he colocado mal?

    Disculpa las molestias, Oloman.

    ResponderEliminar
    Respuestas
    1. Descubierto el misterio. Al selector anterior le falta la llave de cierre:
      .trih3 {display: block;
      z-index: -1;
      height: 0px;
      width: 0px;
      margin: -12px 0 0 -40px;
      border: 12px solid transparent;
      border-right: 12px solid #222222;
      } /* AQUI */
      /* Botón único para compartir */
      etc.

      Eliminar
  15. ¡Excelente! ¡Muchas gracias, Oloman!

    ResponderEliminar
  16. Por cierto, Oloman, un último detalle. El CSS funcionó, pero por alguna extraña razón los botones no me funcionan. Sé que soy un fastidio, pero tal vez puedas ayudarme:

    http://maquinometra.blogspot.com/2012/12/entrada-de-prueba.html

    Además de que no me funcionan, me ocurre que cuando coloco el puntero sobre el botón de "Compartir este artículo", dos pequeños puntos aparecen y se mueven en conjunto con el efecto (recuerdo haberlos visto asociados al "compartir e" y al "ste artículo". ¿Cómo podría quitarlos?

    Por último, cambié el último enlace, el de Pinterest, por uno de Linkedin. ¿Estará bien formulado?

    Disculpa tantas molestias, pero es que te tengo mucha confianza para estos menesteres.

    Saludos.

    ResponderEliminar
    Respuestas
    1. El punto lo quitas añadiendo esto:
      .post-body .share_button ul, .post-body .share_button ul li {
      list-style: none;
      }

      Los botones no te funcionan porque tienes algo mal en el código (algunas comillas simples o dobles de más o de menos o algo así), pero a mí me sale ya interpretado y sólo puedo decirte que lo pongas idéntico al que puse yo. Quizás el de Linkedin estropeó los otros. Prueba primero sin él.

      Eliminar
  17. Gracias, Oloman. Me funcionó, pero sólo modificando la plantilla, no añadiéndolo a una entrada. De todas formas, no me molesta cómo queda.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. OK. Si te fallaba en una entrada posiblemente era porque metías saltos de línea en el código que "estropeaban" el asunto. En la plantilla eso no ocurre, pero en cualquier caso el lugar más apropiado para que salga en todas las entradas es precisamente en la plantilla.

      Eliminar
  18. Hola Oloman.

    Puse el código y quedó genial, la lástima es que también se quedaba en la homepage y me descuadraba todo. http://www.buscablogsdeviaje.com/ si miras la home verás q tiene continentes y en vez del nombre de ellos me salía en cada uno lo de compartir lesta página. Podría insertarse algo en el código para que no saliera en la home? gracias

    ResponderEliminar
    Respuestas
    1. Una condición para la parte HTML es lo suyo:
      Guía condiciones Blogger. En ese enlace está explicado. Tienes que usar la de "Ver algo sólo cuando estamos en una entrada individual cualquiera."

      Eliminar
    2. Gracias Oloman, le he puesto el condicional para excluir la home y de momento funciona ;)

      Eliminar