Cómo transformar un botón de Me gusta de tabla HTML a CSS

Cyber · 20 Mar 2011

Hola Betas!!

Hace unos días ya agregué el botón de "Me gusta" a mi blog, pero por falta de tiempo lo he dejado como originalmente estaba el código aquí

El problema es que utiliza tablas y según cuentan las tablas no son las preferidas de don Google, así que quiero ponerlo pero con CSS.

El código original es éste:

HTML:

<div style='position: fixed; top: 1%; left: 1%;'/>
<br />
<table border="0"><tr><td>

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fchicasfb&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowtransparency="true"></iframe>

</td>
</tr></table>
</div>

Lo que deseo hacer es sacar la tabla, intuyo que es sencillo, pero la verdad que no sé como hacerlo.

Creo que quedaría algo semejante:

HTML:

<div id="megusta"> aquí codigo del botón </div>

y luego en el CSS iría algo así:

HTML:

#megusta
bla bla
bla bla

Muchas gracias de antemano! Saludos!

Fabián Rodríguez · 20 Mar 2011

Exacto, es como dices, solo elimina las etiquetas de la tabla. Aunque curiosamente a Google no le gustan los frames (hablo del de Facebook) pero muchos lo usan 😛

Cyber · 20 Mar 2011

Fabián Rodríguez dijo:
Exacto, es como dices, solo elimina las etiquetas de la tabla. Aunque curiosamente a Google no le gustan los frames (hablo del de Facebook) pero muchos lo usan 😛

Muchas gracias Fabián . Pero ¿como quedaría el código CSS? no me ha quedado muy bien en claro eso.

Además, dices que a don Google tampoco le gustan los frame ... ¿hay alguna forma de poner el botón que no sea con un frame? perdona mi ignorancia ... reconozco ser un completo ignorante en programación. Muchas gracias!

Fabián Rodríguez · 20 Mar 2011

No te preocupes por el frame, eso es para cuando hay contenido que queremos que se indexe, pero en este caso solo es el botón me gusta. El código queda:

Insertar CODE, HTML o PHP:

<div id="megusta">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fchicasfb&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowtransparency="true"></iframe>
</div>

Cyber · 20 Mar 2011

Fabián Rodríguez dijo:
No te preocupes por el frame, eso es para cuando hay contenido que queremos que se indexe, pero en este caso solo es el botón me gusta. El código queda:

Insertar CODE, HTML o PHP:

<div id="megusta"> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fchicasfb&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowtransparency="true"></iframe> </div>

Ahhh entiendo... perfecto. Ya sé para la próxima. Gracias por la aclaración sobre que no le gusta a Google de los frames.

Te pido disculpas, quizás me faltó aclarar que era un botón flotante, es por ello que no sé como debería quedar el CSS para tal fin. ¿Me ayudas? Gracias!!

Mario · 20 Mar 2011

Insertar CODE, HTML o PHP:

#megusta {
  position:  fixed;
  right:0;
  bottom: 0
}

Así quedaría flotante en la parte inferior derecha de la página.

Cyber · 20 Mar 2011

Mario dijo:
Insertar CODE, HTML o PHP:

#megusta { position: fixed; right:0; bottom: 0 }

Así quedaría flotante en la parte inferior derecha de la página.

Perfecto! ha quedado genial!!

Hago una pequeñísima aclaración por si alguien lo utiliza también. Hay que borrar los espacios entre position: y fixed;.. Seguro para muchos es una tontería, pero me hizo batallar bastante hasta que me di cuenta. Con los espacio no era flotante, se anclaba en la sid (en mi caso)

Gracias!!

toledano · 20 Mar 2011

Que raro, pero no es cierto. La especificación de CSS permite los espacios (donde espacio puede ser: un espacio en blanco, tabulación, nueva línea, retorno de carro, avance de hoja).

Cito la especificación de CSS:

4.1.8 Declarations and properties

A declaration is either empty or consists of a property name, followed by a colon ( : ), followed by a property value. Around each of these there may be white space.

Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon ( ; ) separated groups.

Cyber dijo:
Perfecto! ha quedado genial!!

Hago una pequeñísima aclaración por si alguien lo utiliza también. Hay que borrar los espacios entre position: y fixed;.. Seguro para muchos es una tontería, pero me hizo batallar bastante hasta que me di cuenta. Con los espacio no era flotante, se anclaba en la sid (en mi caso)

Gracias!!

Cyber · 20 Mar 2011

Sanchez Toledano dijo:
Que raro, pero no es cierto. La especificación de CSS permite los espacios (donde espacio puede ser: un espacio en blanco, tabulación, nueva línea, retorno de carro, avance de hoja).

Cito la especificación de CSS:

Entonces retiro lo dicho. Muchas gracias por sus aclaraciones y conceptos.

Al margen de eso, no encuentro otro motivo más que ese. El botón salía anclado en la parte superior de la sidebar. Y por mas que variaba los valores de right y bottom no se movía. Miré los códigos durante largo rato, y todo estaba bien. Luego se me ocurrió borrar esos espacios y el botón comenzó a "flotar" y ahora sí podía modificar su posición. Vaya a saber el porque de ello.

Gracias!!

mzdgraphic · 13 May 2011

leer esto anima ver como todos listos para ayudar y enseñar 🙂

GabrielBS · 22 May 2011

Cyber dijo:
Entonces retiro lo dicho. Muchas gracias por sus aclaraciones y conceptos.

Al margen de eso, no encuentro otro motivo más que ese. El botón salía anclado en la parte superior de la sidebar. Y por mas que variaba los valores de right y bottom no se movía. Miré los códigos durante largo rato, y todo estaba bien. Luego se me ocurrió borrar esos espacios y el botón comenzó a "flotar" y ahora sí podía modificar su posición. Vaya a saber el porque de ello.

Gracias!!

Para poder cambiar los indicadores right y bottom tienes que especificar un valor, pero con una unidad de medida (Ya sea un porcentaje "%", píxeles "px" o "em") Con eso ya funcionaría con espacios.
Si no quieres referencialos en funcion de la derecha y la zona inferior puedes probar los 4 (right, left, bottom, y top)

Saludos.

Cómo transformar un botón de Me gusta de tabla HTML a CSS

Cyber

Fabián Rodríguez

Cyber

Fabián Rodríguez

Cyber

Mario

Cyber

toledano

Cyber

mzdgraphic

GabrielBS

Temas similares

Privacidad y transparencia

Privacidad y transparencia