Cómo agregar un botón flotante de recomendación de Facebook en Wordpress

José Jiménez · 10 Ene 2011

Que tal amigos, me ha surgido una duda sobre como colocar el botón de facebook (Recomendar) en wordpress, pero este botón sería flotante,al estilo de internetizado o algunos otros blogs que lo implementan, si alguien me pudiera orientar en el codigo se los agradeceria, un cordial saludo! 🙂

j.garcia2. · 10 Ene 2011

a mi tambien me gustaría saber como ponerlo, a ver si alguien dice algo 😛 , saludos!

Mautematico · 10 Ene 2011

El botón de "Me gusta" es el que dicen?
Tengo entendido que hay que ir a Facebook, crear una página para el blog en Facebook y ahí encontrar las opciones para el botón "Me gusta"
Si es otra cosa lo que dicen, avisenme y veré si se algo al respecto 🙂

Jordi94 · 10 Ene 2011

Aquí están todas las opciones que ofrece Facebook para insertar. Enlace eliminado
Ahí lo tienes.
Saludos.

José Jiménez · 10 Ene 2011

Creo que no se ha entendido bien, no busco como poner el botón pues ya lo se, lo que busco es como poner flotante en la parte derecha de abajo del blog, salu2.

Mautematico · 11 Ene 2011

Creo que entiendo, quieres que el botón flote en la esquina inferior derecha de tu blog?

Podrias intentar colocando el botón dentro de un div como este:

Insertar CODE, HTML o PHP:

<div id="YoFloto" style="position:fixed; bottom:0; right:0;">
Acá el código del botón
</div>

Pero seguramente no funcionará en IE7 e inferiores...
Podrias intentar algo que proponen en CL

Insertar CODE, HTML o PHP:

http://foros.cristalab.com/div-flotante-que-siga-scroll-t57831/

o de una vez echarle un vistazo a esto de acá:

Insertar CODE, HTML o PHP:

http://www.howtocreate.co.uk/fixedPosition.html

Es eso a lo que te refieres? 😀

José Jiménez · 12 Ene 2011

Mautematico dijo:
Creo que entiendo, quieres que el botón flote en la esquina inferior derecha de tu blog?

Podrias intentar colocando el botón dentro de un div como este:

Insertar CODE, HTML o PHP:

<div id="YoFloto" style="position:fixed; bottom:0; right:0;"> Acá el código del botón </div>

Pero seguramente no funcionará en IE7 e inferiores...
Podrias intentar algo que proponen en CL

Insertar CODE, HTML o PHP:

http://foros.cristalab.com/div-flotante-que-siga-scroll-t57831/

o de una vez echarle un vistazo a esto de acá:

Insertar CODE, HTML o PHP:

http://www.howtocreate.co.uk/fixedPosition.html

Es eso a lo que te refieres? 😀

Muchisimas gracias 🙂

Mautematico · 22 Ene 2011

Siempre que se pueda, no hay problema 🙂
¡Saludos!

Science · 9 Feb 2011

Me es imposible ponerlo. No entiendo qué ocurre porqué siempre me queda en medio del theme. Lo he intentado poniéndolo en header.php, home.php, index.php y no hay manera...

A lo mejor el problema viene de la CSS, pero como no tengo ni idea me temo que me voy a quedar sin botón. ¿Sugerencias?

Mautematico · 9 Feb 2011

Science dijo:
Me es imposible ponerlo. No entiendo qué ocurre porqué siempre me queda en medio del theme. Lo he intentado poniéndolo en header.php, home.php, index.php y no hay manera...

A lo mejor el problema viene de la CSS, pero como no tengo ni idea me temo que me voy a quedar sin botón. ¿Sugerencias?

Hola! Science =D Qué es lo que no logras poner, el botón, o alinearlo con CSS?
También estaría bueno si indicas la URL donde estás intentando, aunque supongo que será la de tu firma.

Oye, creo qeu aún te debo artículos sobre matemáticas jaja... =D

Science · 10 Feb 2011

Mautematico dijo:
Hola! Science =D Qué es lo que no logras poner, el botón, o alinearlo con CSS?
También estaría bueno si indicas la URL donde estás intentando, aunque supongo que será la de tu firma.

Oye, creo qeu aún te debo artículos sobre matemáticas jaja... =D

Hola Mautemático. Sí, en realidad es el index de mi firma. El botón aparecía pero no quedaba alineado, aparecía siempre en medio, y como el código que posteaste ya tenía el valor "0" para "right" supuse que era cosa de mi CSS. ¿Qué crees que se puede hacer? ¿Se me nota que me gustan las matemáticas? jajaja!

Saludos y gracias por la ayuda! 😉

Edito: Además uso tablas en el footer porqué el diseño original no llevaba las tres columnas, y ahora me encuentro por internet que es preferible trabajar sin tablas para un mejor indexamiento de los buscadores. A ver si las tablas tendrán algo que ver en eso.

Mautematico · 10 Feb 2011

¿Intentaste colocar el código justo antes de </body>?

Se supone que hago una actividad en la escuela jeje... así que no tuve mucho tiempo de probar cosas, pero se me ocurrió algo sencillo:

"Guardé" el índice de tu web como html, y en notepad, busco </body> y agrego antes la etiqueta div que ya pasé antes, pero para que se note en la captura, incluí una imagen a la mano =D.

Así quedó:
http://i54.tinypic.com/126cuas.png

P.D: Que navegador usas? =D
Tengo entendido que fixed no funciona en IE7 e inferiores, supongo que tampoco en versiones viejitas de Opera

Science · 10 Feb 2011

Mautematico dijo:
¿Intentaste colocar el código justo antes de </body>?

Se supone que hago una actividad en la escuela jeje... así que no tuve mucho tiempo de probar cosas, pero se me ocurrió algo sencillo:

"Guardé" el índice de tu web como html, y en notepad, busco </body> y agrego antes la etiqueta div que ya pasé antes, pero para que se note en la captura, incluí una imagen a la mano =D.

Así quedó:
http://i54.tinypic.com/126cuas.png

P.D: Que navegador usas? =D
Tengo entendido que fixed no funciona en IE7 e inferiores, supongo que tampoco en versiones viejitas de Opera

Hola amigo, muchas gracias por tu voluntad y ayuda, incluso estando en la escuela. Lo he vuelto a intentar, esta vez poniéndolo en el lugar que me indicas (tengo 4 páginas que terminan con la etiqueta </body>: la home, la archive, etc...) y me sigue apareciendo el botón en medio.

Navegadores: FireFox y Google Chrome.

He subido una imagen para que veas como queda: http://www.imagengratis.org/images/capturaix1mi.jpg

Y el código usado es:

Insertar CODE, HTML o PHP:

<div id="YoFloto" style="position:fixed; bottom:0; right:0;">

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

</div>

Muchas gracias por tu ayuda. 🙂

Por fin lo he solucionado. Es de risa el problema que tuve. En la etiqueta width del Like Button apareció por defecto 450px, y yo sin percatarme que esto era inapropiado... Pues quedaba en medio porqué dejaba un margen de 450 píxeles! Lo he dejado en 52. Gracias igualmente!! Saludos y dedo verde! 😉

Mautematico · 10 Feb 2011

Uhu!! usas Ubuntu =D... en un momento verás que también yo, aunque estoy teniendo problemas (lo instalo en una nueva PC, y tengo problemas con wl wifi) y en la escuela hay que usar Windows o Windows.. jaja

Ya vi la captura y el código que adjuntas, no te apures, un despiste bien natural jeje.
Por cierto, creo que deberias modificar también el URL del iframe

Insertar CODE, HTML o PHP:

http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FScience.Technology.Politics&amp;layout=box_count&amp;show_faces=false&amp;width=[B]450[/B]&amp;action=like&amp;colorscheme=light&amp;height=65

Pues lo llamas igual con width 450.
Según como lo dejaste, así es como yo lo veo:

http://www.imagengratis.org/images/pantallazhf8oh.png

P.D: Uhu! mi primer dedito verde =D... alguien me dice como hago para darle (deditos verdes) a otros usuarios?? =D

Science · 11 Feb 2011

Ah claro, queda cortado porqué el texto "Me gusta" es más largo que el "I like", por el que lo había optimizado. ¿No se puede alinear a la derecha para que crezca hacia la izquierda? Al final lo tendré que poner a la izquierda, viendo que crece hacía la derecha; pero da la sensación que vayan a clicar más si está a la derecha...

Lo del dedito verde a mi me apareció al cabo de un tiempo. A lo mejor es a partir de x número de mensajes. Al principio no me salía y ahora ya me sale: http://www.imagengratis.org/images/capturahu3rh.png (ver mano verde en la parte superior derecha).

Bueno y sobre el Ubuntu... en este PC tengo un Ubuntu con Windows integrado gracias a VirtualBox Seamless y luego el Windows en otra partición, para trabajar con toda la memoria RAM con los programas que sólo están en Windows... y Halo xD

Mautematico · 11 Feb 2011

De nuevo en clase jeje.
Estoy intentando, pero no consigo la gran cosa. Esto hace algo feo, pero evitará que se recorte el "Me gusta":

HTML:

<div id="YoFloto" style="position:fixed; bottom:0; right:0; float:none;">

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FScience.Technology.Politics&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden;  min-width:51px;  max-width:79px; height:65px;" allowTransparency="true"></iframe>
</div>

Edito:
Algo que se me ocurre en este momento es:
Leer el iframe con javascript, buscando "Like"
Si se encuentra, colocar el ancho del iframe en 51, sino en 79 (u otra cosa)...
Voy a leer un poco, pero creo que necesitaremos a alguien que sepa más de javascript que yo...

Science · 11 Feb 2011

Mmmm está difícil esto. Creo que lo que haré es esperar unos días, porqué la mayoría de lectores tendrán Facebook en inglés y aparecerá "I like" (el que cabe). Si veo que la página se llena mejor lo dejaré, y de lo contrario lo pondré a la izquierda, así no me preocuparé por la alineación, jaja.

Gracias igualmente Mautemático, sobretodo por el tiempo que te tomas. Pero los estudios son lo primero eh! 😉

Mautematico · 13 Feb 2011

Science dijo:
Mmmm está difícil esto. Creo que lo que haré es esperar unos días, porqué la mayoría de lectores tendrán Facebook en inglés y aparecerá "I like" (el que cabe). Si veo que la página se llena mejor lo dejaré, y de lo contrario lo pondré a la izquierda, así no me preocuparé por la alineación, jaja.

Gracias igualmente Mautemático, sobretodo por el tiempo que te tomas. Pero los estudios son lo primero eh! 😉

También yo supongo que la mayoría de tus visitantes tendrán Facebook en Inglés (incluso yo lo tengo =p), pero que mal por los que no...

No he encontrado cosas muy útiles sobre hacerlo con Javascript, pues al ser lenguaje de lado cliente, hay bastantes restricciones en cuanto a seguridad (por ejemplo no permite cargar documentos externos).

Al parecer, podría hacerse algo con php, mira:

Insertar CODE, HTML o PHP:

<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>

Al almacenar en la variable $homepage el contenido del iframe "Like" de Facebook, imagino que podriamos buscar dentro de esa variable el texto "Like" y hacer lo que ya te comenté, pero también con PHP =D
El problema son dos:
Eso depende de los permisos de tu host
Ahora no estoy en clase, pero sí tengo tarea y me pondré a hacerla =p... yo me animo a intentarlo por diversión uno de estos días =D

Jaja... No te preocupes, esto me divierte, me gusta! =D... Ya se que los estudios son primero, por eso es que ya había terminado mi práctica (MS Word T_T) las otras veces jaja...

Saludos, y suerte con eso. Ojalá puedas probar si funciona ese código PHP, para saber si hay los permisos suficientes, y luego alguien se anime a intentarlo =D.

P.D: el amigo borest parece que ya solucionó su duda hace varios posts... quizás convenga cambiarlo a solucionado y abrir un nuevo tread para la duda específica "hacer que el iframe de Facebook crezca hacia la izuiqerda"...

Cómo agregar un botón flotante de recomendación de Facebook en Wordpress

José Jiménez

j.garcia2.

Mautematico

Jordi94

José Jiménez

Mautematico

José Jiménez

Mautematico

Science

Mautematico

Science

Mautematico

Science

Mautematico

Science

Mautematico

Science

Mautematico

Temas similares