Una manera de alinear y centrar los botones sociales | Oloblogger ..o lo que es lo mismo, que estén en perfecto orden de revista. ¿No os traen de cabeza los puñeter...

17 de marzo de 2013

Una manera de alinear y centrar los botones sociales

..o lo que es lo mismo, que estén en perfecto orden de revista.

¿No os traen de cabeza los puñeteros botones sociales? ¿No os aparecen descuadrados cuando los incluimos en nuestra plantilla? Unas veces se van unos píxeles para arriba, otras para abajo, se separan mucho entre ellos o demasiado poco, no hay manera de centrarlos todos a la vez...

Bueno pues si no es así no hace falta que sigáis leyendo, pero a mí me han dado mucha guerra en el pasado y por eso he utilizado el término revista en su acepción más bélica.

Y cómo parece que ya encontré una manera sencilla de que salgan centrados y bastante bien alineados entre ellos, pues lo comparto con vosotros fieles y abnegados suscriptores y lectores de este vuestro blog.

Sí, hoy además de algo académico estoy un poco pelota (ver 12).




La solución más recurrente para esto de los botones es ponerlos con float y santas pascuas y alegrías. Los alineamos a un lado u otro, les añadimos algún que otro padding o margin rectificatorio y listo. También podemos usar tablas, pero eso nos complica un poco la parte HTML, ya de por sí larga por el propio código que genera los botones.

Así que lo solución que encontré se limita a encerrar cada botón en un div personalizado, todo el conjunto en otra caja y luego ya dar estilo desde el CSS, siendo la clave el uso de inline-block para poder alinear correctamente y una anchura adaptada a cada botón con un overflow: hidden para que no salgan algunos letreros que no queremos, como es el del botón +1 de Google Plus y también para que no haya diferentes márgenes entre unos y otros.

Este sería el código completo incluido el que genera los susodichos botones, listo para incorporar en la propia plantilla. Bajo el div con clase post-footer suele ser un buen sitio para ponerlo.

<style>
.redes {
 margin:10px auto 20px;
 text-align:center;
}
.redes .botfac, .redes .bottwi, .redes .botgoo {
 width: 100px;
 overflow:hidden;
 zoom: 1;
 *display: inline;
 display: inline-block;
 vertical-align: top;
}
.redes .botgoo {
 width:60px;
}
</style>

<div class='redes'>
 <!--Facebook-->
 <div class='botfac'>
  <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>
 <!--Twitter -->
 <div class='bottwi'>
  <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>
 <!-- Google +1 -->
 <div class='botgoo'>
  <g:plusone size='medium'/>
 </div>
</div>

Sólo están los tres de las redes más populares, Facebook, Twitter y Google Plus, pero pienso que con el mismo sistema se puede alinear cualquier otro.

Por ejemplo para el de Pinterest, sólo habría que añadir un nuevo selector en la lista del CSS (pongamos .botpint), ajustarlo en anchura (.redes .botpint {width:50px;}) como con el de G+ y luego poner su código de la misma manera:

<!-- Pinterest -->
<div class='botpint'>
 <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)})());'><img height='21' src='http://1.bp.blogspot.com/-AikmtHZ_hG8/T10W-xJWozI/AAAAAAAACFw/2Y3UyLvGIPM/s1600/pin%2Bit.gif'/></a>
</div>

Funciona perfectamente hasta IE8 y centrados pero en líneas individuales en IE7, pero es que en este último ni siquiera se interpreta bien el código que genera el botón +1, así que ¿a quién le importa?

¿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

44 comentarios :

  1. Use un codigo que pasaste hace ya ratos. Primero no podía alinearlos pero al final no sé como lo logré. xD

    ResponderEliminar
  2. Menudo regalazo!! Tengo el botón de Google+ estrábico perdido, así que probaré suerte a ver si lo emparejo ;)
    Muchas gracias Oloman, cuando ande con algo de gana le meteré mano...
    Un saludo, Tapestry.

    ResponderEliminar
  3. eso del IE es un problema, siempre jodiendonos la vida, lo bueno es que para todo hay solucion :D

    ResponderEliminar
  4. Excelente Karla, yo también utilicé este método, pero ahora probé con tablas ya que simplemente le ocultas los bordes y estableces paddings, como dato :)

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Ya dice el título que es sólo una opción. Lo que ocurre es que se me olvidó decirlo en el post, pero esta opción es "responsive". Si haces más pequeña la ventana, los botones siguen centrados aunque tengan que ocupar más de una línea.

      Eliminar
  5. Por cierto, no sé por qué dije Karla jaja, me anduve perdiendo entre comentarios de Compartidísimo y Oloblogger, abrazos Oloman.

    ResponderEliminar
    Respuestas
    1. Será por mi gran parecido y común atractivo con ella ;)

      Eliminar
  6. Muchas gracias oloman,ya lo implementé en mi blog y con exito :) saludos.

    ResponderEliminar
  7. Hola, Oloman. ¿Serías tan amable de indicarme cómo ocultar los dos puntos que aparecen junto al número de comentarios en la página principal? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola. Con plantillas de artilugios expandidas busca en tu plantilla class='comment-link' Muy cerca tiene que venir una expresión como esta:
      <data:post.commentLabelFull/>:

      Esos dos puntos tras ella son los que te sobran.

      Eliminar
  8. Hola Oloman, desde hace un mes y algo, al publicar enlaces de mi blog en Facebook, primero pasó que no recogía imagen alguna; para más tarde no recoger la imagen del post pero sí alguna de las de la sidebar de la izquierda (a pesar de que las de la sidebar son más pequeñas que las de los posts).

    No sé porqué, cada cierto tiempo, la publicación de enlaces de mi blog en Facebook pasa de no dar problemas en este sentido, a hacer lo que he descrito.

    Siempre pienso que suele ser algún tema de reajustes de FB, tras actualizaciones suyas internas, o de los navegadores. Pero a veces hasta que se soluciona el tema solo, o incorporo yo algún ajuste para areglar esto por indicación de alguien, puede pasar dos y hasta tres meses, a veces.

    En esta ocasión, estoy ya hasta las narices. ¿Hay algo que pudiera hacer para arreglar el tema definitivamente (o sino, hasta la "próxima)?...

    Un saludo,

    ResponderEliminar
    Respuestas
    1. Hola. Sí, eso pasa a veces y precisamente estos últimos días estaba ocurriendo también con Google +

      De todas maneras prueba lo que se explica en esta entrada referente a Facebook (lo de las etiquetas con :og)

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Yo creo que está centrado ya, pero lo que pasa es que es de 970px de ancho y el espacio para el gadget es de sólo 800px, así que se desborda por la derecha.

      Eliminar
  10. Ah, entiendo. ¿Y no habrá manera de ampliar ese espacio de 800px? ¿En qué parte del código debería buscar esa caja contenedora?
    Saludos, y muchas gracias por la ayuda.

    ResponderEliminar
    Respuestas
    1. Pues hay que hacer diversas modificaciones, pero cuando aumentes el ancho total del blog como dijiste, no tendrás problemas e irá a su sitio.

      En un principio tienes en tu CSS varios bloques con ancho de 960px, así que en un apaño rápido cambia esos valores por 1000px por ejemplo. Luego tendrás otro de 800 que va asociado a .self y no sé si a otros ese pásalo también a 1000px o al menos a 970px. Luego tendrás que ir ajustando.

      Eliminar
    2. ¡Hola, Oloman!
      Logré hacerlo, y ese aspecto quedó bien; pero al agrandar las medidas, la plantilla muestra algunas imperfecciones en el diseño (como que se le ven las costuras, jeje). Creo que el nuevo tamaño de AdSense quedará para un próximo blog.
      Eliniaré el mensaje anterior para no dejarte spam.
      Saludos, y mil gracias por la ayuda.

      Eliminar
  11. hola. buenas tardes. añadi los botones en la pagina principal debajo de las entradas resumidas en mi blog y a la hora de compartir comparte la entrada principal y no la del post :( Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Sí, así es. Los gadgets oficiales toman la dirección de la entrada o página dónde se encuentran. Por tanto en portada comparten la dirección principal del sitio.

      En mi opinión no tiene interés poner los botones de compartir en portada si tienes las entradas resumidas. Seré muy inocente, pero no tiene lógica compartir una entrada que no se ha leído. Conclusión: yo no los pongo y recomiendo que sólo se muestren en las entradas.

      Eliminar
  12. y como lo hago si quiero cambiar los botones sociales por otros, de diferente color por ejemplo?

    ResponderEliminar
    Respuestas
    1. Si lo que quieres es NO usar los botones oficiales de cada servicio, puedes usar estos enlaces

      Eliminar
  13. Hola Oloman, por ahí consulté acerca de como cambiar los íconos tradicionales de mis redes sociales por personalizados, pero verás tengo un grave Problema, porque no consigo que aparezca centrado el ícono de twitter como yo desearía, si es que puedes indicarme de manera gráfica qué hacer ante este problema por el que no consigo que mi ícono de Twitter salga alineado, te lo agradeceré mucho. Checa por favor mi blog y mira como se ve el ícono de Twitter que deseo alinear con el anterior Código: http://mariopolanco92.blogspot.mx/

    ResponderEliminar
  14. Hola, primero de todo gracias por compartir tus conocimientos, porque si no fuese por gente como tu nos volveríamos locos... Usando tu código no se mostraba el botón google +, así que al final tuve que usar el que define el propio google (básicamente con el script y la function) y meterlo entre los divs que definiste tu.

    Ahora por fin se ve, pero desplazado hacia abajo en relación al de Facebook y al de Twitter!!!! y no hay forma de que se ponga en línea el jodio. Las clases que he utilizado son exactamente las que tu has definido. ¿podrías ayudarme a enderezar al dichoso botón? :-)

    Gracias y un saludo

    Javier

    ResponderEliminar
    Respuestas
    1. Podemos hacer un apaño con un position o un margin-top negativo para la caja de ese botón, pero antes prueba a sacar el script de esa caja y a dejar sólo el código que yo puse.

      Eliminar
  15. ¡Me salió! No puedo creer que tengo los 4 botones alineados y pude poner una imagen delante (que falta terminar de diseñas) para que indique "Compartir".
    Gracias, muchas gracias por todas las indicaciones ♥

    ResponderEliminar
  16. Que tal Oloman, tengo un problema que al colocar el codigo en blogger store, no me aparecen los botones en cada entrada y no se porque será. Desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Pues en un principio porque no pusiste este código en tu plantilla. Yo al menos no veo nada de esto en tu código fuente. Quizás lo insertaste dónde no era, pero el caso es que no sale.

      Eliminar
  17. el blog es www.mgainformatica.com, o sea puse el codigo despues de post-footer pero igualmente no sale en las entradas.

    ResponderEliminar
    Respuestas
    1. Habitualmente hay dos post-footer. Uno para la plantilla "normal" y otro para la plantilla móvil. Quizás lo pusiste tras el código de esta última. Prueba en el otro.

      Eliminar
    2. He visto un sitio adecuado, dónde mismo tienes el window.print con la posibilidad de imprimir el post.

      Eliminar
  18. Lo coloque donde me dijiste pero sabes que en la vista previa del articulo tambien aparecen los botones.

    ResponderEliminar
    Respuestas
    1. Marcos, tienes que condicionar ese código para que salga exactamente dónde quieres. O mejor dicho, para que NO salga dónde no quieres: Guía de condiciones Blogger

      Eliminar
  19. Te pasaste Oloman, quedo impecable. Muchas Gracias, saludos.

    ResponderEliminar
  20. Estimado Oloman,implementé en mi blog de pruebas el código tal como lo indicas, pero no funciona. No sé qué me falta por hacer o qué estoy haciendo mal. Te dejo una captura de pantalla para que me eches un cable y entender mejor este asunto: http://3.bp.blogspot.com/-A1lZRHlae_Q/UqtM9ux-kJI/AAAAAAAABGE/GjhqamWmOhA/s1600/blog-pruebas.jpg

    Gracias anticipadas. =D

    ResponderEliminar
    Respuestas
    1. Hola. No soy capaz de reconocer en qué parte de la plantilla estás, pero hay dos zonas, la normal y la que monta la plantilla para móviles. Busca otro post-footer que no sea ese y prueba allí. Casi seguro que es simplemente eso.

      Eliminar
  21. Hola de nuevo lo siento si resulto ser pesada... en mi html busque post footer
    .post-footer {
    margin: 20px -2px 0;
    padding: 5px 10px;

    color: $(post.footer.text.color);
    background-color: $(post.footer.background.color);
    border-bottom: 1px solid $(post.footer.border.color);

    Eso es lo que viene detras yo puse todo lo que indicas ay justo antes de {
    No se si es que no sera ay... pero le doy a vista previa y me sale el blog too loco sin entradas la colulma derecha a la izquierda.. nose creo que algo no estoy haciendo bien.

    Perdon por mi ignorancia.

    ResponderEliminar
    Respuestas
    1. No Rocío. No es ahí.
      Esa parte es la de CSS (estilo, formato) y el post-footer que yo digo es el de la parte HTML, esa que está llena de etiquetas con los símbolos < y >
      El que encuentres en esa segunda parte es el que te sirve para este caso.

      Eliminar
  22. Ya los tengo instalado, pero cómo le hago para reemlazar con los botones de SEGUIR, Follow y Suscriptores Facebook. Como los de Hipertextual.

    ResponderEliminar
    Respuestas
    1. Jesús, sólo has de tomar el código que cada una de esas redes ofrecen y ponerlo en lugar de los que aquí pudiste ver. No hay más... copiar y pegar.

      Eliminar
  23. Gracias amigo! Me haz salvado la vida OTRA VEZ! Ya sólo hice unos ajustes porque los contadores se cortaban, pero fue muy fácil configurarlos. Dios te bendiga hermano. Que este 2016 sea mucho mejor para todos tus proyectos.

    ResponderEliminar