JMiur [E]

k_nelita pregunta cómo poner los distintos botones que ofrecen Facebook, Twiiter y otros servicios, debajo de las entradas, que se vean en una línea y que no se descompagine todo. Muchas veces me preguntan lo mismo y lo cierto es que no hay una solución universal porque todo depende de qué tipo de cosas se agregan, de cuales son sus tamaños y propiedades, etc, etc.

Algunos, sólo son enlaces, otros, iframes, otros scripts, otros, códigos especiales como los de Facebook o Google. Hay tantas posibilidades como sitios y servicios existen y por lo tanto, cada caso es diferente pero la base es siempre la misma, debemos saber qué ponemos y qué hace eso que ponemos ¿es un bloque y por lo tanto se generará un salto de línea?, ¿flota?, ¿tiene bordes? Demasiadas preguntas.

Normalmente, basta con usar propiedades como float y margin para acomodarlos pero, eso no siempre resulta y entonces, debemos volver a las fuentes y usar una simple tabla para evitar dolores de cabeza (Ver Malditas Tablas: 1, 2, 3, 4, 5).

Una tabla es como una hoja cuadriculada donde hay filas y columnas. En este caso, sólo requerimos una fila y una cantidad indeterminada de columnas; básicamente, esto es una tabla con tres columnas:
<table>
  <tr>
    <td> la celda de la izquierda </td>
    <td> la celda del centro </td>
    <td> la celda de la derecha </td>
  </tr>
</table>
¿Qué hace que usar estas etiquetas facilite las cosas? Que están pensadas para "acomodar" contenidos diversos y adaptarse a ellos.

En este ejemplo, voy a poner cinco contenidos diferentes:

el botón de Twitter que es un enlace y un script
<a class="twitter-share-button" data-count="horizontal" data-lang="es" data-via="Vagabundia" data-url="http://vagabundia.blogspot.com/" data-text="Vagabundia en Blogger" href="http://twitter.com/share" target="_blank">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
el botón Me Gusta de Facebook con un iframe al que dimensionaré para que no sea tan ancho y tan alto:
<iframe src='http://www.facebook.com/plugins/like.php?href=http://vagabundia.blogspot.com/&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=likefont=tahoma&amp;colorscheme=light' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:25px'></iframe>
un enlace común a las etiquetas del blog y un par de imágenes cualesquiera.

Ahora, armaré la tabla:
<table class="tablapostfooter" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      ....... el código de Twitter .......
    </td>
    <td style="padding-top: 17px;">
      ....... el código de Facebook .......
    </td>
    <td>
      ....... una imagen .......
    </td>
    <td>
      ....... enlaces a etiquetas .......
    </td>
    <td>
      ....... otra imagen .......
    </td>
  </tr>
</table>
Y le agregaré propiedades elementales:
<style>
  .tablapostfooter {margin: 0 auto; border:none; width: 100%;}
  .tablapostfooter td {text-align: center; vertical-align: top;}
</style>

Lo que dará por resultado esto:

,

Por defecto, la tabla tendrá la altura de la celda más alta y los contenidos quedarán alineado verticalmente en su parte superior (vertical-align:top); luego, corregimos esos detalles usando padding-top si quermos "moverlos" individualmente una cantidad de pixeles que dependerán del contenido o bien usamos vertical-align:middle para centrarlos.

Obviamente, no es la única solución porque jamás hay una sola solución pero es simple y no requiere andar peleando con propiedades CSS que tal vez, no comprendemos.

Las tablas son odiadas por algunos pero, son como las lentejas: si quieres las usas y si no, las dejas.

51 comentarios:

Mariela Marianetti  

La verdad que yo me había dado por vencida con lo de alinear los botones y opté por la solución más fácil que para mí ( que no tengo muchos conocimientos técnicos), me la ofreció Add this. Pero extraño mis botones de antes, sobre todo porque marcaban las veces que se había recomendado y ahora todo volvió a cero; voy a intentar regresarlos con tus instrucciones a ver si me quedan prolijos.
Gracias por tus lecciones.

Carlos E. Rojas  

Genial tio, muy bueno el consejo de meter el codigo en una tabla, tan simple pero bueno, pude utilizarlo en www.golesdelbarsa.com

Responder
Pozo+10™  

Muy bueno JMiur! Esto lo anduve buscando hace meses, lo hacia con table pero no sabía bien como armar las propiedades elementales y por eso me quedaban desalineados. Tengo un inconveniente, agregue a mi blog el botón de facebook de compartir y lo saque porque se compartía la página principal y no el post, mira este código ponía:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Compartir</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Que parámetros me faltan para que funcione bien y comparta el post?

Responder
JMiur  

Mariela:
No probé con AddThis porque no lo uso pero, en principio, debería funcionar con cualquier cosa.

Pozo+10™:
No recuerdo ese botón pero, parece que es algo que ya Facebook no ofrece aunque debe seguir funcionando, eso no lo sé. Te conviene colocar cualquiera de los plugins sociales que ofrece ahora, ya sea el Me Gusta o el más nuevo que se llama Enviar y tiene funciones similares pero ampliadas. Para eso, fijate en esta entrada

Responder
Gem@  

Esta tarde había de esos problemas que vienen siendo habituales y la página nos da error, decía en mi comentario que por lo que he leído entendidos en la materia aseguran que las tablas son cosa de la prehistoria y digo yo, usar o no usar tablas ¿es cosa de moda? ¿qué les hace pesar así? es que no lo entiendo :S

Responder
Pozo+10™  

Ya tengo el Me Gusta, y quiero poner el de Compartir ya que los usuarios pueden editar el texto y cambiar imágenes a su gusto.

Responder
JMiur  

Yo tampoco y, a decir verdad, pienso exactamente lo contrario. La "modernidad" no es desechar herramientas sino sumarlas y l oque está fuera de moda es el academicismo, no desde ahora, desde hace dos siglos :-)

No existen etiquetas malas ni etiquetas buenas, sólo existen personas que las usan bien o las usan mal y, hasta eso es bastante subjetivo.

Responder
JMiur  

Pozo+10™:
Pués, como dije, desconozco cuál es ese codigo ya ue no lo veo en ninguno de los que provee Facebook en la actualidad asi qeu no sé cuales son los parámetros.

Responder
k_nelita  

Gracias JM por mencionarme! Me puse a hacer esto y algo estoy haciendo mal porque me da error la plantilla, no me deja guardar ni ver la vista previa, el sitio para poner la tabla es el mismo donde tengo el botón de Twitter no?

Te mando por correo lo que puse a ver si lográs ver el error, de cualquier forma en este momento está puesto así de mal que no lo puedo ver, si querés darle una mirada...

Mil gracias :)

Responder
Pancho Tama  

Por favor ¿donde meto la tabla? ¿en que parte de la plantilla? =(

Responder
Pancho Tama  

Ya descubrí donde ubicar la tabla, por favor una última consulta ¿Cómo hago para que el botón de twitter me twitee el post y no la página… ¿Cómo debo configurar el gadget?

Responder
Pancho Tama  

Creo que estoy resultando muy molesto, mil disculpas si es así, pero me encuentro con un problema, cuando añado las propiedades elementales me sale en la parte superior de mi blog una flechita! En serio! Le adjunto una imagen para que vea donde sale la flechita (http://dl.dropbox.com/u/4861167/problema.jpg), y cuando quito el código desaparece… ¿Qué puedo hacer?

Responder
JMiur  

Si añadaes la propeidades dentro de <b:skin> </b:skin>, no debes incluir las etiquteas <style> y </style>

Responder
Pancho Tama  

Gracias! Se solucionó el problema =)

Responder
Wilson Aguiar  

Muchas gracias, anduve buscando por casi un mes la respuesta y me daban unos tecnisismos que me hacian hasta doler la cabeza. Siempre la solución mas simple es la mejor.

Responder
JMiur  

Me alegra que sirviera para algo, Wilson. Los tecnicismos, a veces son inevitables :D

Responder
Domingo Hurtado  

¡Muchas gracias! Me ha sido muy útil!

Responder
Domingo Hurtado  

Amigo, una consulta: He colocado en mi blog los botones de Facebook, Twitter y el PlusOne de Google bajo las entradas. En Chrome y Mozilla, se ven correctamente los tres, pero cuando uso explorer no se ve el +1... porque sucederá esto. He probado en dos maquinas diferentes...

Muchas gracias!
Saludos.

Responder
JMiur  

No veo los botones en los blogs de tu Perfil ¿están en otro?

Responder
Fero  

Disculpa, lo que sucede es que tuve que quitar los botón de facebook y twitter, porque no estaban funcionando, me han dado mucho dolor de cabeza...

Ya me he dado cuenta que el problema por el cual no se ve el botón +1 es la versión que tengo de Explorer, pues dice que no es compatible.

Pero tengo una duda más amigo, es que he colocado el botón en cada entrada del blog, (debajo de data:post.body) pero cuando se le hace click, hace +1 a todo el blog en general y no a la entrada en particular; ¿donde tendría que colocarlo para que se vea en la pagina principal, pero haga +1 a la entrada en particular?

el blog es:
feromenoi.blogspot.com

Muchas gracias de antemano.

Responder
JMiur  

Sí; eso es lo que ocurrirá; los botones, salvo que se indique lo contrario, tomarán al URL de la página; para hacer algo distinto, esa URL debe ser indicada explícitamente:

<g:plusone expr:src='data:post.url' size='medium'></g:plusone>

Responder
k_nelita  

Hola JM, estaba poniendo los botones en otro blog, al que ayer le cambié la plantilla por una Mínima de Blogger (volviendo a las raíces) :) y el de G+ no me lo toma, o sea no se ve, lo copié todo del otro blog http://www.sonando-porbailar.com.ar tal cual está ahí en tablas, y en ese blog se ve perfecto pero en el que te digo no :( es http://fotosbailando.blogspot.com/
Que será?

Responder
Fero  

Muchas gracias por tu respuesta;
pero aún tengo el mismo inconveniente... me toma la página principal...
He puesto el código tal como lo has escrito debajo de data:post.body

luego lo coloqué debajo del post-footer-line-1, para ver, pero nada... lo dejé allí.

Disculpa la molestia amigo, ojalá me puedas indicar que estoy haciendo mal allí.

Muchas gracias.

Responder
JMiur  

Fero:
Discupa. No se agrega src sino href; prueba de este modo:

<g:plusone expr:href='data:post.url' size='medium'></g:plusone>

k_nelita:
Me parece que te has olvidado de colocar el script. Por lo menos, no lo veo en el código fuente.

Responder
k_nelita  

Que sería de mi sin vos JM!! Claro que me había olvidado de poner el script :S
Ahora se ve bien, y también corregí lo que le decías a Fero para que se comparta la entrada y no todo el blog, no se muy bien como funciona eso, donde sale que se ha compartido esa entrada?

Mil gracias :)

Responder
k_nelita  

Otra cosita JM, no tiene que ver con la entrada pero si con el blog de las fotos que te puse antes, no puedo configurarle el title y descripción, a pesar de haberlo copiado tal cual del otro blog, cambiando solo el contenido.
No sale ni título ni descripción a menos que estés en una entrada individual, en la home no sale nada... que otro lío habré hecho?

Responder
JMiur  

La etiqueta TITLE se ve en el código fuente del home pero n ose ven etiquetas META. Debe ser que están condicionadas de alguna manera. No es algo que pueda observarse online.

Responder
k_nelita  

Te lo mando por mail porque soy completamente inutil para poner un código aquí...

Responder
JMiur  

Respondido.

Responder
Fero  

Muchas gracias Jmiur!!
Ha funcionado muy bien!!

Saludos!

Responder
JMiur  

Prfecto, Fero :D

Responder
AnimeXtremo  

hola jmiur, me parece genial este codigo y vi que funciona con un codigo que pelea mucho y es el de add this pero al poner los dos codigos uno sale más arriba que el otro por el tamaño del mas grande y sale ep borde en gris, como quitaría esas dos cosas?

http://www.animextremo.com/2011/11/hellsing-1_18.html

Responder
JMiur  

La pagina que indicas, no parece existir.

Responder
AnimeXtremo  

esque tuve que reacer la entrada. esta si que funciona bien
http://www.animextremo.com/2011/11/hellsing-1_4764.html

Responder
JMiur  

No ve que allí estés usando una tabla para organizar esa parte.

Responder
AnimeXtremo  

ya lo puse perfecto ;) gracias buen código, es el único que encontré que sirve para poner addthis alineado

Responder
Chris  

Como me gusta tu blog ya que siempre que me atoro en algo en tu blog encuentro la solución.

Responder
JMiur  

Gracias, Chris :D

Responder
JorG AZUL  

Mil Gracias! Aquí en Vagabundia siempre encuentro cosas sumamente útiles para mi blog, pero en esta ocasión me has dado una gran solución a un problema que hace mucho no podía solucionar, y era alinear esos benditos botones sociales, y aun mas, este código me sirvió para alinear un anuncio con un cuadro de búsqueda, justo debajo del header... De nuevo muchísimas gracias!

JMiur  

Perfecto. Me alegra que sirviera :D

Responder
Mozzís Rivadeneyra  

Hola. Me suena muy interesante tus consejos porque he pataleado para poder poner los botones sociales que me interesan alineados y bonitos. Al final her logrado ponerlos, sin pegas, pero lo único malo es que en IE se ve bien pero en Firefox y Chrome el botón de Pinterest se desalinea del resto. Mi web es Perros Entrenamiento. Voy a probar lo e tus tablas para ver si se arregla el temita. Gracias!

Responder
Mila Flores  

Hola! Muchas gracias por este post. Como bien dices, no siempre funcionan las propiedades float y margin. No podía alinear los botones sociales en horizontal (siempre salían en vertical) y por fin lo he conseguido siguiendo tus instrucciones. Muy útil y claro. Gracias !! :)

Responder
Don Nadie  

Tablas... pareciese que hoy en día es un tema taboo, casi prohibitivo decir que una tabla puede solucionarte algo, lo que sea... que chistoso es cuando después de darle 1000 vueltas a una pequeñez y nada puede solucionar el inconveniente llega una simple tabla y sin hacer nada mas te soluciona el problema...

Responder
Ginna Acosta  

^_^ muy buen aporte! Me sirvió de mucho :)

Responder
KAT  

hola Jmiur, la otra vez me ayudaste, me estoy rompiendo la cabeza con los botones sociales de la parte superior de los posts en mi blog (no de la portada sino de cada post), si gustas y tienes tiempo te agradecería me des una mano, gracias de antemano.

JMiur  

¿y cuál es el problema?

Responder
KAT  

Pues me salen separados y a lo largo, no los puedo juntar a la izquierda uno tras otro, lo he intentado, arreglé los de abajo pero los de arriba no he podido, gracias x atenderme :)

JMiur  

Si vas a usar las mismas clases para los botones superiores e inferiores, deberías comenzar por eliminar todas las propiedades ya que hay varias reglas que dicen cosas distintas. Por un lado, .tablapostfooter dice margin: 0 auto; width: 70%; y por otro margin: 0; width: 40%;

La forma lógica es empezar sin definir ninguna.

.tablapostfooter td {}



.tablapostfooter td {padding-right: 10px;}

KAT  

ok Jmiur gracias, no entiendo mucho de códigos, hice lo q me dijiste pero quedó igual, sorry si no sé q más ponerle, es un tanto complicado para mí. Aprovecho para hacerte otra consulta: al poner la tabla de los botones me salían los bordes, por más q ponía en el código de la tabla border none, así q descubrí q poniéndole borde none a un código más arriba (de tablas) q encontré se solucionaba el problema. Hasta ahí todo bien, pero me acabo de dar cuenta q en otros posts donde si pongo tablas con borde 1 han desaparecido =/ (ej. http://goo.gl/6sdFsp ). Si tienes tiempo pa darme otra ayuda te agradeceré infinitivamente.

JMiur  

Las reglas de estilo sobrescriben los atributos de las etiquetas. Si la etiqueta dice border="1" pero, como en ese caso, hay una regla que dice que no tienen borde:

.post-body table, th, td {
border: 0 solid #CCCCCC;
}

la que vale es esa última.

El uso de atributos en lugar de reglas de estilo es algo no recomendable.

Responder
KAT  

Gracias Jmiur, ya lo arreglé, gracias :).

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR