Gadget desplegable y adaptable de botones para compartir | Oloblogger Algún título le tenía que poner a la entrada pero lo que veremos puede servir tanto para montar una botonera social, como para cualquier otr...

4 de abril de 2014

Gadget desplegable y adaptable de botones para compartir

Algún título le tenía que poner a la entrada pero lo que veremos puede servir tanto para montar una botonera social, como para cualquier otra situación en la que necesitemos mostrar varias opciones dispuestas en una única fila.

El resultado será una especie de menú en el que el contenido de cada uno de los elementos se mantendrá oculto hasta hacer hover sobre él. En ese momento el elemento señalado se ensanchará, cambiará de color y dejará mostrar lo que hay en su interior.

Ya que estaba en el tajo y dado que el número de plantillas adaptables (RWD) disponibles va en aumento por aquello de la cada vez más amplia difusión de Internet en dispositivos portátiles, he ajustado el CSS para que la caja principal y sus elementos se adapten a cualquier ancho.



En la demo que he montado usé la fuente de iconos Awesome, pero evidentemente todo esto es modificable, pudiendo poner en la parte inicialmente visible texto, imágenes o cualquier otra cosa con los correspondientes ajustes de estilo.

Y como decía al principio lo mismo ocurre con el contenido; se puede poner el código de unos botones como en este ejemplo, pero también podemos insertar otro tipo de código, enlaces, galerías de imágenes, vídeos... En fin, que lo podemos simplificar o complicar lo que queramos.


Para ponerla tal cual veis aquí, el código necesario lo tenéis disponible en este Codepen, un enlace que os recomiendo como primer destino tras terminar de leer este post. Allí podréis hacer todo tipo de pruebas y vuestras propias modificaciones.


Para los que gusten ir a lo directo pues ya pueden empezar a tomar notas... pero pocas. Más bien preparados para montar todo en dos pasos: copiar y pegar. Lo que puse al final de la entrada es lo único que habría que insertar en la plantilla.

¿Dónde? Pues o bien justo a continuación de la línea <div class='post-header'> o bien tras la de <div class='post-footer'>, según queramos ponerlo al principio de cada entrada o en el pie de la misma.

Yo para que lo veáis en directo lo he puesto aquí en medio:




Por cierto que incluí algunos comentarios en la parte de estilo para facilitaros la tarea de la modificación.

<!-- Botonera social desplegable -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<ul class='acordeon'>
<li><h4><span class='fa fa-facebook'/></h4>
<div class='contenido'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/>
</div>
</li>
<li><h4><span class='fa fa-twitter'/></h4>
<div class='contenido'>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</li>
<li><h4><span class='fa fa-google-plus'/></h4>
<div class='contenido'>
<g:plusone size='medium'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
</div>
</li>
<li><h4><span class='fa fa-pinterest'/></h4>
<div class='contenido'>
<a target='_blank' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet ' class='pin-it-button' count-layout='horizontal'><img alt='Pin It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKY8nMa63uqNlD0MzYuoYzgpSLMk41fgg0Tv76qLFw1i6q3kPbk6N8MV3e_FqtkD3q_wgg_CkcwokQfQAEGn-_vLoLwWpx4ut4pl-Eczoq6Mdx06ryQxEj4l6rU4xs7Ix0yy7bTXnewMo/s1600/pin+it.gif' /></a>
<script type='text/javascript' src='//assets.pinterest.com/js/pinit.js'/>
</div>
</li>
<li><h4><span class='fa fa-linkedin'/></h4>
<div class='contenido'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: es_ES1</script><script type='IN/Share'/>
</div>
</li>
</ul>
<style>/* Ajustes generales */
ul.acordeon * {
margin: 0 auto;
padding: 0;
vertical-align: top;
color: #fff;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor general */
ul.acordeon {
width: 90%; /* Personalizar sncho total desplegado */
overflow: hidden;
margin: 20px auto;
padding: 0;
text-align: center;
list-style: none;
font-size: 0;
}
/* Cada elemento */
ul.acordeon li {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 12%; /* 90 : (nºelem+2) */
height: 50px; /* Personalizar altura*/
background: #ccc;
text-align: center;
border-right: 1px solid #eee;
}
/* Títulos pestañas */
ul.acordeon li h4 {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 100%;
height: 100%;
padding: 10px;
font-size: 30px;
text-align: center;
}
/* Contenido inicialmente oculto */
ul.acordeon li .contenido {
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0%;
height: 100%;
overflow: hidden;
font-size: 14px;
background: #333;
}
/* Hover: Desplegamos elemento */
ul.acordeon li:hover {
width: 36%; /* aprox 3 x ancho ul.acordeon li */
}
/* Hover: Hacemos que el título no ocupe todo el ancho */
ul.acordeon li:hover h4 {
width: 40%; /* Parte sobre el total que ocupara icono desplegado */
background: #333;
}
ul.acordeon li:hover h4 span {
color: #eee;
}
/* Hover: La diferencia hasta el 100% lo ocupará el contenido */
ul.acordeon li:hover .contenido {
width: 60%; /* 100 - ancho ul.acordeon li:hover h4 */
}
/* Ajuste vertical botones 'especiales' */
ul.acordeon li .contenido iframe[src*=&quot;twitter&quot;],
ul.acordeon li .contenido iframe[src*=&quot;facebook&quot;],
ul.acordeon li .contenido a[data-pin-href*=&quot;pinterest&quot;] {
display: inline-block !important;
margin: 10px auto !important;
vertical-align: top !important;
}
/* Ajuste para pantallas pequeñas */
@media (max-width:600px) {
ul.acordeon {width: 98%;}
ul.acordeon li:hover {width: 50%;}
ul.acordeon li h4 {font-size: 18px;}
ul.acordeon li:hover h4 {width: 25%;}
ul.acordeon li:hover .contenido {width: 75%;}
}</style>

¿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

141 comentarios :

  1. muchas gracias!!! a ver si hago alguna prueba y trasteo. Que tengo puesta la caja emergente al hacer scroll que publicaste. Pero me gusta mucho este gadchet :)

    ResponderEliminar
  2. Gracias Oloman.
    Me parece un gadget muy curioso y aseado... lástima el chichorro de código y es que no soy de cargar mucha línea que bastante torpe anda el blog últimamente :(
    Un saludo, Tapestry.

    ResponderEliminar
    Respuestas
    1. Tapestry, si le quitas lo que hay dentro de cada caja "contenido", se queda en nada y precisamente lo que hay dentro es lo mismo que seguramente tienes puesto para tus actuales botones sociales. Es decir, no es apenas más de lo que ya tendrás, sólo que con más "estilo" ;)

      Eliminar
  3. Está genial, voy a intentarlo¡ Otra cosa es que lo consiga ;)

    Gracias y saludos

    ResponderEliminar
  4. Aqui estoy otra vez. En el de prueba consegui instalarlo. No me puse a modificar colores ni nada porque tengo un problema. Ya me ha pasado otras veces. Yo tengo la " Caja emergente al hacer scroll " que publicaste. Pensaba sustituirlo por este otro. Pero cuando voy a buscar el código dentro de la plantilla (el de la caja emergente al hacer scroll" ) de blogger... no aparece por ningún lado. Doy al control+f dentro del cuado donde están los códigos y no encuentra ninguna de las palabras clave que deberían estar. Se que está en el blog porque sale la caja y si miro en el código fuente de la página encuentro sin problemas lo que en su día copié y pegé en la plantilla de blogger. Mi duda es porqué no puedo localizarlo en la plantilla de blogger. ¿Dónde está? Ya me ha pasado alguna vez, he intentado buscar información y al final lo di por imposible. ¿Sólo me pasa a mi estas cosas tan raras? :S

    ResponderEliminar
    Respuestas
    1. Quizás lo tengas añadido como gadget. Edita los que tengas como HTML/Javascript desde Diseño.

      Eliminar
    2. siii. Mil gracias!!. Lo cierto es que pense que lo había puesto en la plantilla, estaba totalmente convencida de ello.Ahora experimentaré con los nuevos botones :D

      Eliminar
  5. Bastante llamativo y lo mejor es que se puede usar como menú o cualquier otra cosa. Como plus, está hecho sólo con CSS, ¿qué más se puede pedir?

    ResponderEliminar
  6. Es realmente estupendo Oloman. Algo así estaba buscando. Iré probando. Si quisiéramos marcar un fijo en cuanto al ancho del gadget en sí, así como de las "cajas" y "las cajas abiertas con el botón a la vista", qué habría que hacer. Vamos, eliminar el responsive y dejar fijas las cajas y los botones y que solo corra la "tapa".

    ResponderEliminar
    Respuestas
    1. Emilio, si tu plantilla es de ancho fijo, este gadget se comportará igual, de ancho fijo. No obstante eso se regula en esta parte del CSS:
      /* Contenedor general */
      ul.acordeon {
      width: 90%; /* Personalizar sncho total desplegado */

      En lugar de 90% pon un ancho en px y listo.

      Eliminar
  7. Espectacular! Muy muy bueno, gracias por compartirlo!

    ResponderEliminar
  8. Muchas gracias Oloman. Una última pregunta. ¿Se le puede aplicar un color a cada cajita de red social? ¿O tienen que ser todas del mismo color? Un abrazo

    ResponderEliminar
    Respuestas
    1. ul.acordeon li:nth-of-type(1) {
      background: blue;
      }

      ...por ejemplo ;)

      Eliminar
  9. No Joralgom. El código de los botones va incorporado en lo que puse. El problema será que quizás lo pones dónde no es.

    ResponderEliminar
  10. Hay dos cajas de esas, una para plantilla escritorio y otra para móviles. Quizás lo pusiste en la que no era.
    Prueba a ponerlo en tu caso justo detrás de:
    <div class='postmeta-primary'>

    Y la próxima vez, para poner código en un comentario pásalo antes por aquí.

    ResponderEliminar
  11. Lo tengo hace unos dias y funciona muy bien es el mejor hoy por hoy muchas gracias Oloman

    ResponderEliminar
  12. Oloman, creo que ha habido algún cambio en el script del botón de Pinterest y se sube arriba y no hay como bajarlo. A ti te ocurre también. ¿Se puede solucionar? Un abrazo.

    ResponderEliminar
    Respuestas
    1. Sí. Han cambiado el href por un data-pin-href. Hay que cambiar eso en el CSS. Ya lo he actualizado en el post

      Eliminar
  13. hola amigo como estas , muy buen post , lastima que nose porque motivo no funciona en mi blog, intente colocarlo abajo y arriba pero nada, es muy raro , este es mi blog
    http://thdjsclub.blogspot.com un abrazo grande

    ResponderEliminar
    Respuestas
    1. Si me explicaras que pasa o incluso si lo viera montado en tu blog, podría intentar ver qué ocurre, pero tal cual me lo explicas me resulta imposible adivinarlo Dj's Club

      Eliminar
  14. Demasiado bonito!!
    Gracias Oloman :)

    ResponderEliminar
  15. Hola Oloman !!!
    Me encanta este gadget, lo estoy intentando poner en mi blog para que quede debajo de las entradas y no me sale.
    Lo tengo puesto detrás del (div class post header) . No se cual es el problema ? Gracias por tu ayuda !!!

    ResponderEliminar
    Respuestas
    1. Mi blog http://misdulcesjoyas.blogspot.com.es/

      Eliminar
    2. Perdona por ser pesada, ahora lo he puesto detrás del (div class='post-footer') y me sale igualmente solo en la plantilla para el móvil, pero debajo de las entradas. Lo dejare para que lo veas. Espero tu respuesta. Saludos !!!

      Eliminar
    3. Biljana, es que hay dos class='post-footer' en la plantilla de Blogger. Uno es para la versión web y otro para la versión móvil. De hecho casi todo está duplicado con ese fin, así que posiblemente estás añadiendo este código sólo en la segunda zona, la de los móviles.

      Eliminar
  16. Llevo todo el día con el tema este jejeje... al final he conseguido instalar el gadget en mi blog, aunque no donde a mi me gustaba (debajo de las entradas), pero me gusta como queda. Otra pregunta que te voy a hacer, el botón de facebook es el de me gusta, como lo puedo cambiar por el de compartir en facebook. Gracias y disculpa las molestias.Saludos !!!

    ResponderEliminar
    Respuestas
    1. Son códigos distintos el de uno y el de otro. Aquí tienes un enlace en que podrás obtener el código para el botón de Compartir: https://developers.facebook.com/docs/plugins/share-button

      Eliminar
  17. Hola Oloman !!!
    ¿Me echabas de menos, jejeje ?
    Sigo con mis preguntas, ya que soy muy torpe con todo esto de la informática. Vengo a preguntarte como le puedo añadir algún texto a este gadget, como compartelo etc... Gracias por la paciencia. Saludos !!!

    ResponderEliminar
    Respuestas
    1. ¿cómo lo pusiste? yo también lo quería cambiar por el de compartir pero no puedo. :(

      Eliminar
  18. Hola !
    No se si has visto mi último mensaje, por eso vuelvo a escribirte. Mira, te agradecería mucho si me dices como puedo añadir algun texto a este gadget. Gracias.

    ResponderEliminar
    Respuestas
    1. Lo vi. No se me escapa uno, pero anduve muy liado esta semana pasada. Esta también, pero hoy he sacado un rato para contestar unos cuantos de los muchos comentarios atrasados que tengo.

      Lo que quieres es muy fácil. Simplemente añade al principio de todo el código el texto que quieres y saldrá. Ya si lo quieres centrar o alinear de otra manera, o darle otro estilo, tendrás que meterlo entre etiquetas DIV incluyendo un STYLE y el CSS que necesites.

      Eliminar
  19. Gracias por la respuesta. Un saludo!!!

    ResponderEliminar
  20. Hola, muchas gracias, está genial, el problema es que en mi blog pego el código y no se ve nada, ya lo intenté con varios códigos para compartir y es como si no le pusiera nada, no se muestra después de la entrada.

    Por favor podrías ayudarme?

    Gracias.

    ResponderEliminar
    Respuestas
    1. ¿Dónde lo estás pegando Raquel? El mejor sitio como dije es dentro de post-header o post-footer, pero en la mayoría de plantillas hay dos de cada, uno para la plantilla móvil y otra para la "normal". Quizás lo estés poniendo dónde no es y por eso no te sale.

      Eliminar
  21. ¿Que puedo hacer para que en vez de que en FACEBOOK salg Me gusta mejor sea compartir..? :D

    Ayuda..

    ResponderEliminar
  22. Pues puedes ver el comentario 16.1 ;)

    ResponderEliminar
    Respuestas
    1. Diras que menso soy pero ese enlace lo vi, el problema es que no se que URL to share poner, ya que quiero que se comparta la ENTRADA y no el blog entero , si no esa entrada que estan viendo.. :(

      Eliminar
    2. Tienes que poner en lugar del iframe que consta en la entrada, este código:

      <div class='fb-share-button' expr:data-href='data:post.url' data-type='button_count'></div>

      Pero igualmente tienes que incluir también en tu plantilla la primera parte que viene en el enlace de desarrolladores de Facebook

      Eliminar
  23. Cordial saludo !
    no entiendo nada de programacion en web , pero lo unico que quiero es pegar esos botones en mi blog weebly
    en donde pongo el codigo por favor

    ResponderEliminar
  24. No te sabría decir exactamente Julio, pues no conozco esa plataforma. Si tienes alguna referencia sobre dónde insertar código HTML, ahí es dónde debería ser.

    ResponderEliminar
  25. Anónimo3/7/14, 0:35

    hola muy buen post! mi pregunta es la siguiente: se puede aumentar mas botones? por ejemplo quisiera aumentar el boton de INSTAGRAM ya que es muy importante para los fashion bloggers hoy en dia!. Gracias

    ResponderEliminar
    Respuestas
    1. No conozco apenas como funciona Instagram FrankLG. Un enlace a perfil sería fácil, pero entiendo que lo que quieres es un botón para compartir como los que muestra este gadger. Si me remites a algún sitio dónde pueda ver cómo es el código de compartir de Instagram, probablemente lo podré añadir.

      Eliminar
  26. Amigo muy bueno, porque me aparece en la caja de twitter "compartido 713 veces" en todos los posts?

    ResponderEliminar
  27. Amigo muy buen post pero me aparece en Twitter "compartido 713 veces" y en Google+ "28" en todos los posts, porque???? http://adniphone.com

    ResponderEliminar
  28. haa, perdon no es en los posts, si no en la apgina, en los posts va conatndo otros numeros

    ResponderEliminar
    Respuestas
    1. Ya tienes tu respuesta. En la página principal te cuenta los +1 y los Likes de esa página, la principal y en las entradas los del post visualizado.

      Eliminar
  29. hola disculpa como lograría conseguir el pop up del botón de like para los demás botones mira a esto me refiero http://prntscr.com/48g3ni

    ResponderEliminar
    Respuestas
    1. No entiendo ¿quieres que los demás botones saquen un pop-up como ese o quieres incluir un pop-up para los Like's?

      Eliminar
  30. No es visible este tampoco en chrome :/

    ResponderEliminar
    Respuestas
    1. Desde Chrome estoy viendo ahora mismo este gadget y nadie más dijo que no funcionara, Miguel.

      Eliminar
  31. Hola, no encuentro la parte de "(div class='post-header')", otra cosa, eso de ")* Ajuste para pantallas pequeñas *(", ¿lo tengo que editar o qué? Porque al ponerlo así, no me sale nada. Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Ely. He revisado tu blog y encontré sin problemas ese post-header. Justo después viene un post-header-line-1. Cuando edites la plantilla y antes utilizar el buscador (CTRL+F), antes pincha en el cuerpo de la página dónde está todo el código. De esa manera te aparecerá el buscador interno de Blogger (diferente del buscador del navegador). Así seguro que lo encuentras.

      Con respecto al ajuste para pantallas pequeñas, lo tienes que poner con barras /* , no con paréntesis (*. Eso son comentarios y entre barras con asteriscos, los navegadores se saltan esa parte del código. Copia el código tal cual está en esta entrada.

      Eliminar
  32. Era justo lo que necesitaba, pero no funciona, no hay caso. ¿Sera que hay que tener jQuery?

    ResponderEliminar
    Respuestas
    1. No. Es todo CSS por lo que no necesitas ninguna librería JavaScript. Este gadget es sólo cuestión de copiar y pegar Ernestina, así que inténtalo de nuevo releyendo el post.

      Eliminar
  33. Gracias hombre es el primero que me funciona , de los que he probado.Si te apetece te puedes pasar a verlo en mi blog porno http://elmundodepravado.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Pues lo que me extraña es que alguien publique cosas que no funcionan, pero en fin...

      Eliminar
  34. Hola Oloman, tengo un problema, intenté colocar el código para que los iconos me salieran al final de las entradas, pero al guardar la plantilla actualizo mi blog y no me sale. ¡AYUDA! soy nueva en esto. :(

    ResponderEliminar
  35. Ya lo coloqué, me costó al principio pero ya aprendí. ¡Gracias! :D

    ResponderEliminar
  36. Ya lo coloque en mi blog, esta genial, solo que cuando das clic en LIKE de facebook no me da opción de compartirlo, solo da LIKE... me pudieras ayudar con eso...
    Te dejo mi blog: http://edificando-v.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Es que el LIKE y el COMPARTIR de Facebook son dos gadgets distintos y cada uno tiene su propio código: https://developers.facebook.com/docs/plugins/like-button/

      Para añadir el COMPARTIR o bien lo sustituyes por el LIKE o bien añades un elemento más a esta botonera con su código.

      Eliminar
  37. Olle no me sale, creo que es porque hay que crear también un gadget HTML en el diseño del blog no? Me podeis ayudar. GRACIAS

    ResponderEliminar
    Respuestas
    1. No. No tienes que crear ningún gadget. Símplemente copia y pega en tu plantilla en el lugar indicado en esta entrada.

      Eliminar
    2. ¿En dónde Oloman? ¿En la plantilla? Oloman leí todas las participaciones para detectar exactamente en dónde encontrar los datos, que mencionas, pero no los encuentro. Gracias

      Eliminar
    3. Así es María Julia, en la plantilla. En el post se indica:
      "¿Dónde? Pues o bien justo a continuación de la línea <div class='post-header'> o bien..."

      Eliminar
  38. Muy buenas Oloman; he descubierto recientemente tu blog y me resulta interesantísimo para darle un toque especial a mi blog.

    No consigo que aparezca el gadget ni en el header ni en el footer. De hecho, no es la primera vez que trato de meter un código allí, y no hay manera. Identifico perfectamente dónde está la parte del código donde debería meterlo, pero no me hace ni caso. ¿Alguna idea de por qué puede estar ocurriendo?

    Muchas gracias de antemano y enhorabuena por tu buen trabajo.

    ResponderEliminar
    Respuestas
    1. Pues no, no tenía bien identificado el sitio; había dos líneas distintas con el post-footer. Ahora a pelearme con el código para ver si consigo que no me incluya el gadget cuando la vista del post no es completa (típico "leer más"). Nada, muchas gracias y a seguir con el buen trabajo :-).

      Eliminar
    2. Hola Joan
      Esas dos líneas que dices es porque parte de la plantilla está repetida (con algunas variaciones) de manera que hay una para la versión de escritorio y otra para móviles. Si lo cambias en la de móviles los cambios no los verás, evidentemente. Eso es lo que te ocurría casi seguro.

      Eliminar
  39. Hola Oloman. Queria preguntarte como se cambian los colores de cada red social. No se manejar mucho los codigos. mira como me quedan, http://variedaddecreatividad.blogspot.com.ar/ (estan al final)

    ResponderEliminar
  40. Yo otra vez. ya lo borre, pero igual quiero ponerlo. me ayudas con lo que te pedi en el mensaje anterior? graciass

    ResponderEliminar
    Respuestas
    1. Hola. En la parte del código que puse, a partir de la etiqueta <style>, encontrarás todo lo que es el CSS o estilo del gadget. Retocando los COLOR y BACKGROUND con los valores que prefieras, conseguirás cambiar su aspecto sin problemas.

      De todas formas lo más fácil sería acceder al Codepen que enlacé en la entrada y desde ahí modificar. Una vez a tu gusto ya sólo tendrías que cambiar esa parte CSS por la que tú modificaste.

      Eliminar
  41. hola Oloman
    increíble todas tus aportaciones, me están sirviendo todas!! un trabajo increible!!
    he instalado los botones de redes sociales, me a costado inicialmente pero al final me he salido con ello.
    el tema es que cuando se desplega la opción para compartir en facebook, no me sale el boton de facebook, podrías ayudarme? he hecho un copiar pegar de lo que has especificado más arriba
    muchas gracias !!

    ResponderEliminar
    Respuestas
    1. Podría... si lo viera. Pero es que no tienes ninguna entrada con botones (ni sin ellos) en tu blog.

      Eliminar
  42. gracias hermano me han servido excelente estos botones :D ahora me podrias decir que opciones debo editar para colocarle los colores acorde a los de mi blog? tengo el color de mi blog verde que es 77c2a7 me gustaria saber que debo editar para cambiar los colores para adaptarlos a los colores de mi blog, si me ayudas muy agradecido estare, aunque ya lo estoy por poseer los botones :D GRACIAS!!!

    ResponderEliminar
  43. Sólo tienes que buscar en el código, dentro de la parte que está entre etiquetas STYLE, todos los BACKGROUND y COLOR que aparecen. Cambiando sus valores cambiarás esos colores que quieres.

    ResponderEliminar
  44. Hola oloman, ya le he puesto el gadget a mi blog y me quedo genial, mi pregunta es como ocultar este gadget en paginas estaticas, me sale por ejemplo en la pagina de aviso legal o de contacto. Gracias de antemano

    ResponderEliminar
  45. Hola Oloman:

    Ya he modificado el código para nuestra web. Solo me queda una duda:
    ¿Cómo puedo poner los contadores de los "Compartir" a 0? es que me salen con de inicio con números marcados. Un saludo

    PD : http://pymesunidas.totalservicios.es

    ResponderEliminar
    Respuestas
    1. ¿A cero? Pues no puedes, porque esos códigos son los de los botones oficiales de cada servicio y lo que reflejan son las veces que se han compartido tus artículos hasta la fecha en cada uno de ellos. Por otra parte no veo la necesidad de "resetearlos".

      Eliminar
  46. hola lo coloco detras de div class='post-footer y no me aparece nada u_U

    ResponderEliminar
  47. Hay un par de post-footer en la plantilla Blogger. Uno es para la "plantilla móvil" y otro para la versión de escritorio. Prueba en el otro... ;)

    ResponderEliminar
  48. esta todo bien el problema es que yo queria un boton para compartir en facebook no para colocar me gusta

    ResponderEliminar
    Respuestas
    1. Hola. En los comentarios está explicado. En el 16.1 la primera vez ;)

      Eliminar
  49. Buenas tardes, tengo un problema. He insertado correctamente los botones y salen en plantilla móvil sin problema. Pero al cambiar el "me gusta" de Facebook por el de compartir, no me la cifra exacta de compartidos de la entrada. Ya me he leído todos tus comentarios y no he encontrado esta duda. He intentado dejarte el código que he creado, pero no me deja enviártelo, a ver si puedes ayudarme. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Eso no tiene nada que ver con el gadget que presenté en el post, Nino. Si no te da la cifra buena es porque el código del botón no será el correcto. De todas formas supongo que sabes que no es lo mismo los "Me gusta" que las veces que un post en Facebook ha sido compartido.

      Eliminar
  50. Buenas tardes,

    ¡Primero de todo decirte que me han encantado! Una duda que tengo bastante importante para mi, es que quería mantener los botones estáticos en los post a la izquierda y uno debajo del otro, para que aunque se haga scroll sigan visibles. He toqueteado mucho el código pero no consigo dar con ello. (Queda visto que no soy ninguna experta). Si me pudieras ayudar te lo agradecería! Un saludo

    ResponderEliminar
    Respuestas
    1. No tengo ningún tutorial sobre eso Bea, pero en este enlace por ejemplo, tienes una manera de hacerlo. Luego sólo se trata de que pongas los botones en columna en lugar de fila si es así como los quieres.

      Eliminar
  51. Hola, despues de mucho esfuerzo he conseguido ponerlos pero la pena es que se me solapa con el texto de arriba y el de abajo. ¿Como podria arreglarlo? Un saludo

    ResponderEliminar
    Respuestas
    1. Tendría que ver con detalle dónde los pusiste, pero en un principio a mí me pasó en un blog concreto, simplemente porque lo puse tras el DIV post-footer-line-1. Lo cambié a justo antes y problema solucionado.

      Eliminar
  52. Excelente lío, agregue tu aportación con todos los cambios con mucho trabajo en mi blog "http://labrujaitzel.blogspot.mx/" muchisimas gracias. Me quedo cute.

    Saludos

    ResponderEliminar
  53. Situación, al darle en Facebook "Me Gusta" me despliega una ventana para completar el Like, pero se queda encerrada, me puedes ayudar al respecto, muchas gracias. ya sea que se despliegue o que no salga de plano.

    ResponderEliminar
    Respuestas
    1. Hola. Creo que es porque incorporaste un código distinto al botón. Como cosa rápida prueba a poner en la parte CSS de tu plantilla esto:
      .fb-like.fb_iframe_widget {
      height: 30px;
      overflow: hidden;
      }

      Si funciona pues ya está y si no, prueba con el mismo código que puse yo para el botón de Facebook, el que lleva un width=100 y un height=20

      Eliminar
  54. Muchisimas gracias amigo le quedo al detalle a mi blog....
    http://tecnodescargasgratis.blogspot.com

    ResponderEliminar
  55. Amigo se puede cambiar el boton me gusta de facebook por el de compartir? me conviene poner el de compartir y no el de me gusta...

    ResponderEliminar
    Respuestas
    1. 16.1 y 38.1 en ambos comentarios se dice lo mismo, que lo que hay que hacer es cambiar el código que yo puse por el que corresponde al botón Compartir. Allí tienes también el enlace de dónde está ese código.

      Eliminar
  56. Amigo disculpa pero me podrias decir exactamente como se cambia la url de like por la de compartir ya lo intente y no me salio ya que en la pagina de https://developers.facebook.com/docs/plugins/share-button dan varios link y no se cual ni como ponerlos...

    ResponderEliminar
    Respuestas
    1. Rubén, cambia esto:

      <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/>

      ...por esto:

      <div class='fb-share-button' data-expr:href='data:post.url' data-layout='button_count'></div>

      Eliminar
  57. Hola, ¿es posible que en las vistas dinámicas no funcione?. De todas formas meto el código tal cual que me daCodepen y blogger me pide cambiar un par de cosas que da error.
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. El de Codepen no sirve tal cual en Blogger. El de la entrada es el bueno para eso.

      Y sí, en las vistas dinámicas es posible que no funcione porque tiene sus propios botones y sobre todo porque esas plantillas no son prácticamente modificables.

      Eliminar
  58. ¡Hola! Gracias por este tutorial, es genial el efecto desplegable de los botones.

    Tengo una pequeña consulta, ¿se podrá reemplazar el botón de Linkedin por el de Mail, por ejemplo? Porque me gustaría cambiarlo.

    Gracias :)

    ResponderEliminar
    Respuestas
    1. Puedes cambiar "lo de dentro" como quieras. Dentro de cada DIV con clase "contenido" va el código de cada botón. Con que sustituyas el que quieres por el código nuevo, ya lo tienes.

      Eliminar
  59. Hola oloman, como te va,
    He copiado en el HTML, pero no me aparece :c :'c , no se porque !!!
    este es mi blog http://oh-festinalente.blogspot.com , copie el url que me diste pero no me aparece nada, no se que podría estar mal, abro una entrada y sin embargo no me aparece ,
    Gracias

    ResponderEliminar
    Respuestas
    1. En tu plantilla debes tener al menos dos post-footer. Uno es para la plantilla normal y otro para la plantilla móvil. Es posible que lo insertaras en la parte que no es. Prueba en la otra.

      Eliminar
  60. Hola gracias por esta herramienta, me gustaria agregar ademas del boton de like el de compartir, agregue el codigo que le pasaste a las personas de comentarios anteriores pero no me aparece nada, cambie el codigo del "like" por ese y tampoco. por que podria ser? muchas gracias

    ResponderEliminar
  61. Podría ser porque no tienes el script principal de Facebook que hace que sus botones funcionen.

    Cuando accedes a la página del gadget y pinchas en Get Code, verás que hay un mensaje como punto 1 que te dice que incluyas un JavaScript SDK después del <body>

    https://developers.facebook.com/docs/plugins/share-button

    ResponderEliminar
    Respuestas
    1. ya lo pude solucionar, la verdad que muy util y muy bueno todo esto. te felicito

      Eliminar
    2. Ferpecto ;)
      Gracias

      Eliminar
  62. Hola,
    Me encanta, muchas gracias.
    Tengo dos problemas:
    1- Quiero que el conjunto sea un poco más pequeño y si cambio altura se cortan los símbolos.
    2- No se expande en el móvil (No uso versión móvil porque me da errores).
    El blog es www.adipsi.com.
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Para cambiar el alto tendrías que modificar tanto el height de ul.acordeon li como el padding de ul.acordeon li h4.

      Sobre lo del móvil, al ser unos botones que se expanden con :hover, creo que no tiene solución porque los dispositivos táctiles no detectan esa opción. Quizás se podría cambiar por :target para que reaccionaran con clidk (o pulsación táctil).

      Eliminar
  63. Gracias, me ha gustado mucho
    Hay alguna manera de poder hacer lo mismo pero no hacia la página general sino hacia la entrada en concreto?

    ResponderEliminar
    Respuestas
    1. Hola Elena. Estos botones comparten la dirección en la que se encuentran. Es decir, si estás viendo la página principal, esa es a la que apuntan. Si estás en un entrada, pues a la entrada.

      Eliminar
  64. Hola Oloman, gracias por todos los aportes que nos hacen el, a veces complicado mundo de Blogger mucho más fácil para los que no tenemos conocimientos ni experiencia en esto. He instalado la barra, cambie los colores y todo esta andando perfecto. Pero mi pregunta es (después de intentarlo mucho sin lograrlo) si me podrías proporcionar el código para cambiar la caja de linkedin por el de whatsapp para "compartir".

    Espero tu respuesta y gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Ángel. El código para WhatsApp sólo funciona desde móviles, así que no veo claro que sea apropiado meterlo dentro de esta botonera.

      No obstante, si necesitas el código, está explicado en esta entrada.

      Eliminar
    2. Gracias por tu respuesta Oloman, para la temática de nuestro blog y también por una cuestión de estética en cuanto a la distribución de espacios, la opción para "Linkear" no nos sirve de mucho y es preferible Whatsapp a pesar que solo sirva desde el móvil.

      Creeme que intente usar el codigo de Whatsapp que me recomendaste (enlace) en el Codepen pero no hay caso. Supongo que mis conocimientos son limitados y con el calor que hace por acá se ponen peor ja.

      Por favor, te pediría si me podes proporcionar el codigo para hacer el debido cambio y así poder utilizar ese espacio en lugar de linkedin.

      Desde ya las gracias y a la espera de tu respuesta.

      Eliminar
    3. Pues se no yerro, se trata sólo de cambiar:
      <li><h4><span class='fa fa-linkedin'/></h4>
      <div class='contenido'>
      <script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: es_ES1</script><script type='IN/Share'/>
      </div>
      </li>

      ...por
      <li><h4><span class='fa fa-whatsapp'/></h4>
      <div class='contenido'>
      <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'></a>
      </div>
      </li>

      Eliminar
    4. Hola, sabes que es de la forma en que lo había reemplazado antes pero no funciona. Queda el espacio (caja) en blanco y no sale ninguna opción para Whatsapp. No se si será un problema con los iconos Awesome porque probe con varios pero no hubo caso.

      Te pido que me ayudes con esto porque ya no se me ocurre que hacer.

      Saludos y gracias.

      Eliminar
    5. Quizás ese icono se añadió a posteriores versiones de FontAwesome. Para ver si es eso usa otro cualquiera, como por ejemplo el de Facebook. Si se ve y el botón funciona, ya sólo será cuestión de cambiar...
      netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
      ...por la versión más moderna que proporcionen ahora mismo.

      Luego ya pones el fa-whatsapp.

      Eliminar
    6. Oloman tenías razón, cambie a la última versión del FontAwesome y se puede ver el icono de Whatsapp finalmente, pero lamentablemente sigue sin aparecer el botón para compartir, cambie la (") al código que me diste para reemplazar... y no da. Me ayudas con otro código que pueda reemplazar?

      Gracias como siempre.

      Eliminar
    7. Ese es el que funciona Ángel. No hay otro código alternativo.
      Para ver más necesitaría poder observar cómo lo pones y para eso, además de que tú lo modifiques, tendrías que quitar ese aviso anti-adblock que no me permite ver la web... ;)

      Eliminar
    8. Hola Oloman, al final probando logré hacerlo con este código : a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.url + "&description="' title='Compartir en WhatsApp' alt='data:post.title'>Compartir en Whatsapp</a porque con el otro a pesar de probar con el css no me salía ningun botón para compartir. Lo único malo es que no me sale la imagen del post y no se como hacerlo.

      Eliminar
    9. La imagen del post no es transferible a WhatsApp; sólo el enlace y un texto si quieres.

      Eliminar
  65. Hola, está muy bien, enhorabuena. Si se me permite una sugerencia, sería interesante añadir a las etiquetas li onclick=”” (li onclick=””) para que funcione en móviles y pantallas táctiles al no poder activar el estado :hover

    ResponderEliminar
    Respuestas
    1. Pues sí, Juan. Es buena idea. Cuando publiqué este post no estaban tan extendidos los dispositivos táctiles como ahora. Gracias.

      Eliminar
  66. Hola Oloman, donde quieras que estes, que sea en paz. Al tópico, coloque la caja en www.masalladeldesierto.blogspot.com (es una plantilla no blogger que mas allá de tener el includable «share-button» no pude lograr que se viera) que enseñaste en este truco y funciona, solo que en la caja de facebook no aparece el link para compartir.. Espero tu sugerencia. Saludos.

    ResponderEliminar
    Respuestas
    1. Claudio, para cambiar/ajustar cada botón, sólo tienes que meter el código nativo de cada red social entre los DIV con clase CONTENIDO. Por si acaso ¿viste el comentario 65?

      Eliminar
  67. Hola, he tratado de colocar el codigo como lo explicas arriba, y aun asi no logro poner la botonera en las entradas del blog. Que puedo estar haciendo mal? digamos que no hay muchos pasos como para q haya algun margen de error .. Este es el blog: http://www.narufananime.net/

    ResponderEliminar
    Respuestas
    1. Hola Narufan.

      Como en tu blog no veo ese código, tengo que inferir o bien que no lo pusiste o bien que no lo hiciste en el sitio correcto. Las plantillas Blogger tienen dos partes casi iguales, una para móviles y otra para ordenadores de escritorio.

      Es posible que hayas insertado el código en la parte de los móviles y por eso no se ve. Como di de referencia la class='post-footer', busca la segunda que encuentras y a partir de ahí es dónde debes añadir todo esto.

      Eliminar
  68. Holoman, inserté el código y todo bien excepto facebook. No me aparece la caja azul con los "me gusta".
    Saludos,

    ResponderEliminar
    Respuestas
    1. Ya lo resolví. Saqué el código desde Facebook Developers. Queda así:

      "iframe" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"> "/iframe"

      Fuente: https://developers.facebook.com/docs/plugins/like-button#configurator

      Saludos,

      Eliminar
    2. OK. Gracias por el link Jorge

      Eliminar
  69. se lo puede usar encerrado el codigo con iframe... </frame

    ResponderEliminar
    Respuestas
    1. Hola. No entiendo si preguntas o afirmas. En el primer caso la respuesta es que sí, que sí se puede usar dentro de cada elemento de lista (LI) cualquier código... incluido un iframe.

      Eliminar
  70. hola hermano, nuevamente yo por aca, una pregunta para que los botones sirven debo cambiar algo ? me refiero a las redes sociales? o solo copiar pegar, modificar para los colores y aspecto y listo? porque lo pegue en mi blog y no se ve el "me gusta" de fb y tampoco el "twittear" de fb... que podrá ser? gracias de antemano

    ResponderEliminar