Botón de Twitter flotante

14 de noviembre de 2009 69 comentarios ,
Una forma de poner el enlace de tu cuenta Twitter en tu blog es haciéndolo con un botón que se queda en un lado de la ventana y no se mueve al bajar la página con el scrollbar. Para los más entendidos en el tema es un badge flotante.

twitter bagde

Colocarlo es muy sencillo, sólo entra en Diseño > Edición de HTML y antes de </body> pega esto:
<a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img border='0' src='http://3.bp.blogspot.com/_qgZA1ny_dAs/Sv9ShGIZOoI/AAAAAAAADBU/zvfuqM5TP58/s320/twitter-badge-classic.PNG' style='display:scroll;position:fixed;bottom:225px;right:0px;'/></a>

Cambia lo que está en color rojo por tu nombre de usuario de Twitter. El badge (botón) tiene el azul clásico de Twitter, además de ese hice en otros colores para que escojas el que más se adapte a tu plantilla. Sólo remplaza la URL que está en color verde por la URL de la imagen que quieras.


twitter badge twitter badge twitter badge twitter badge twitter badge twitter badge


69 comentarios en:

" Botón de Twitter flotante "

  1. Hola Potro, tengo una preguntita, como haces para que tu gadget de http://whos.amung.us/ que tienes abajo del blog al posicionar el mouse aparezca nada mas ONLINE (title)? en el mio aparece click to see how many people are online, solo esa duda tengo, quisiera personalizarlo, disculpa q te pregunt este tipos de cosas, es q en ocasiones suelo ser algo perfeccionista, de antemano gracias El Potro!!!!

    ResponderEliminar
  2. Holaa!
    Bueno, yo tambien tengo una pregunta sobre las imagenes flotantes en general:
    Se le podria dar algun efecto a estas, quiero decir como si rebotaran, se movieran, o algo paracido, esque e puesto una imagen en uno de mis blogs y queda un poco 'sosa'. Pero si no se puede da igual...

    Para mi la cabecera si que era "nueva", esque en toda esta semana no he podido hacerte ninguna visita, con lo de los examenes y eso, y era la primera vez que la veia XD


    Gracias por contestar

    ResponderEliminar
  3. @rielCastellanos, anteriormente el sitio daba la opción de incrustar el contador por medio de un script o HTML, y ahora sólo es por script. Cuando era por HTML (como el mío) se podía modificar el title del contador.

    Dj Nestor, los scripts que antes habían para dar esos efectos de rebote ya no sirven para los navegadores actuales, quizá haya alguno por ahí que pueda servir, si encuentro algo te aviso. Suerte con los exámenes!

    ResponderEliminar
  4. Excelente. Muchas gracias. Ha ha servido bien. Saludos.

    ResponderEliminar
  5. Ahh ok, ya veo, intente registrarme pensando que asi tendria acceso a mas cosas pero no.

    Oye tengo otra duda, intente buscar en internet pero no encontre nada. aqui va:

    Me gustaria colocar un bloque de adsense el la parte superior derecha de mi blog, o cualquier gadget mientras quepa en ese espacio (200x200) pero no se como hacerlo, adjunto una imagen para que te des una idea.

    Imagen: http://www.fileden.com/files/2009/5/3/2428538/adsense%20unah.png

    Mi Blog: http://blogunah.blogspot.com/

    Veo que tu tienes un bloque de adsense y ademas un buscador justo donde yo quisiera (derecha superior) pero claro con mis dimensiones, me podrias ayudar?

    De antemano Gracias.

    ResponderEliminar
  6. Hey!! muy bueno!! Había visto algo parecido, pero era en plataforma WP y mostraba la cantidad de Twits realizados en el día.

    Un abrazo!!

    ResponderEliminar
  7. @rielCastellanos, necesitas dividir la cabecera en dos como te dijo Rosa, de ese modo tendrías el espacio de tu cabecera a la derecha y del otro lado el espacio para poner otro gadget. Saludos.

    cyberbloggero, supongo que ese ha de ser un script o como dices, un plugin para WP. Un abrazo!

    ResponderEliminar
  8. lavidalinux, excelente elección de color =)

    ResponderEliminar
  9. Muy bueno :)
    lastima q ya me ise unos banners

    ResponderEliminar
  10. Muy bueno Potro, ya nada más te falta el de Facebook
    pero este esta muy bien

    la verdad pense que lo publicarias algun dia pero ya se cumplio, ademas de que hay paginas que te dan la posibilidad de colocarlo, pero no más no salia, lo use como me lo pedia pero con lo que das pues esta mejor ya lo he probado y me funciono
    gracias

    GRACIAS

    ResponderEliminar
  11. Hola Alex,

    A veces tengo en mente algún post por publicar pero me doy cuenta que esa información ya se ha publicado en varios lados así que ya no lo publico, pero esta vez quise hacerlo para poner mi granito de arena haciendo estos botones.
    Los scripts que dices son buenos pero a veces alentan la carga de la página y tanto script en la plantilla no es muy recomendable.
    Me alegro que este te haya funcionado.

    Saludos y gracias a ti.

    ResponderEliminar
  12. Seria posible tabien hacerlo para facebook esto mismo ,dejanos saver como ,ya sea en otro post o por aqui ,gracias potro ..

    ResponderEliminar
  13. Hola www.bonaisima.com,

    ¿Te refieres a que el botón enlace a tu perfil de Facebook?

    ResponderEliminar
  14. potro quisiera el truco de hi5 abra?

    ResponderEliminar
  15. pero para entrar a un grupo

    ResponderEliminar
  16. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  17. di potro ,como hago un boton igual para agregarlo pero al lado derecho de la pagina para facebook

    ResponderEliminar
  18. Lo agregre pero no se ve :( alguien me puede orientar?

    ResponderEliminar
  19. Hola Mone,

    ¿En cuál de tus blogs pusiste el código?

    ResponderEliminar
  20. Muchas gracias Compañero(os) me sirvió de mucho... saludos desde Costa Rica

    ResponderEliminar
  21. Muchas gracias. He sacado muchas ideas de tu blog.
    Tengo dudas sobre el color que he elegido pero ya modificare la imagen.

    ¿Supongo que para hacer otro pero en el lado contrario sólo me basta con cambiar Right por Left no?

    ResponderEliminar
  22. Efectivamente, sólo hay que cambiar right por left.
    Saludos!

    ResponderEliminar
  23. Muy bueno pero... alguien me podría pasar el código para que cambie onmouseover? Gracias!

    ResponderEliminar
  24. ¿Qué efecto quieres que tenga onmouseover?

    ResponderEliminar
  25. hay mi potro lindo precioso, heeee, me resultó.. eres el más grande muy sabio, inteligente, y gracias a ti, podemos salir de errores y aprender de tu experiencia..
    te dejo muchos muakiz. de su amiga tiernita :D

    ResponderEliminar
  26. Muchas gracias por tus palabras, eres muy amable :)

    ResponderEliminar
  27. OYE POTRO...... Te doy infinitas gracias por estos importantes aportes, haz hecho que mi web sea aun mas interactiva, por lo que te invito a que la visites y me des tus comentarios www.elsabado.tk Te comento que soy novato en esto de la realizacion de las paginas web, y la misma crisis economica en la que vivo me obligo a descubrir habilidades que no sabia que tenia (me refiero a mi pagina web)..... DIOS TE BENDIGA, BROTHER....

    ResponderEliminar
  28. De algo malo siempre sale algo bueno =)
    Gracias por tus comentarios.
    ¡Saludos!

    ResponderEliminar
  29. Hola Potro,

    Ya había puesto el botón flotante de Facebook y me salió sin ningún problema, pero ahora para poner el de Twitter no me sale, no me da error, pero no se ve. He intentado ponerlo a la izquierda cambiando "right" por "left" como decías en un comentario por si acaso era porque ese espacio ya estaba ocupado por el de Facebook, pero tampoco se ve...

    Me puedes decir qué hago mal???

    Muchas gracias

    ResponderEliminar
  30. Olvídate... Lo estaba escribiendo en un lugar incorrecto...
    :S

    Muchas gracias por tus explicaciones tan sencillas, que consiguen que hasta torpes como yo seamos capaces de realizar cositas!

    ResponderEliminar
  31. Qué bueno que ya lo has solucionado ;)

    ResponderEliminar
  32. Esta Super ese Boto.. yo lo utilizo En www.SOFOKEMUSIC.net

    ResponderEliminar
  33. He puesto este botón y el de facebook pero en resoluciones altas no me aparece. Es decir cuando cambio la resolución de mi monitor y visualizo la página, los botones desaparecen volviendo cuando reduzco la resolucion. Como hacer para que se vean siempre?

    ResponderEliminar
  34. Pues se supone que así debe verse siempre, nunca he notado que suceda eso con alguno :\

    ResponderEliminar
  35. ey potro como esta te escribo para comentarte que puse el botón y se ve muy bien pero resulta que no me funciona y cuando le pongo el cursor en sima se pasa para el lado izquierdo de la pantalla

    ResponderEliminar
  36. Necesitaría verlo puesto en tu blog para ver cuál podría ser el problema.

    ResponderEliminar
  37. Hola potro, me gustaron los tutoriales de como poner la pestaña de Twitter y de facebook.
    Muchas gracias.

    Ademas, Quisiera saber como puedo poner un contador de visitas.
    Que las 3 me queden en el mismo lado
    El seguidor de twitter, el anexo a facebook y un contador de visitas, muchas gracias! :)

    ResponderEliminar
  38. Pues el único contador que conozco que puede colocarse de esa manera es el de Whos amung, sólo pega antes de </body> este código:

    <script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('tt8tw01uh97a', 'right-lower')</script>

    ResponderEliminar
  39. potro pero a cual de todos los contadores se le pone eso...porque el que tengo en niguno sale </body
    me podrias madnar el contador al cual se le peude agregar eso?? muchas gracias!

    ResponderEliminar
  40. No en tus contadores, sino en tu plantilla tienes que ponerlo donde te he indicado. Ese código que te di es para cualquier usuario, no necesitas registrarte ni nada, sólo ponerlo como te he dicho.

    ResponderEliminar
  41. sabes que no me funciona, sera porque tengo un TUMBLR...??

    ResponderEliminar
  42. Pues sólo lo he probado en Blogger, nunca he usado Tumblr así que no sabría decirte.

    ResponderEliminar
  43. Yo de nuevo xD!

    Una consulta. Cuando le das click al botón de Facebook, se abre el Facebook en otra pestaña. Pero, cuando le doy click al botón de Twitter, no se abre en otra pestaña. Como puedo hacer, para que el Twitter se abra en otra pestaña.

    Me podras ayudar? Gracias.

    ResponderEliminar
  44. Después de title='Sígueme en Twitter' deja un espacio en blanco y después pon target='_blank'

    Saludos.

    ResponderEliminar
  45. hola!! oye una pregunta nadamas se puede poner un boton flotante no puedo poner el del facebook y el del twiter!!!

    ResponderEliminar
  46. Claro, a este código cámbiale donde dice bottom:225px; por bottom:350px; y hará que esté más abajo, así el de Facebook quedará arriba.

    ResponderEliminar
  47. ME GUSTO MUCHO ESTE POST PERO QUISIERA SABER COMO PONGO LOS DOS BOTONES OSEA EL DE FACEBOOK QUE VI RECIENTEMENTE Y EL DE TWITTER DEBAJO O COMO SEA?? AYUDAME PLIS QUE ESTA BIEN BUENO

    ResponderEliminar
  48. Mira el comentario anterior al tuyo, ahí están las indicaciones para tener los dos al mismo tiempo ;)

    ResponderEliminar
  49. Otra pregunta con respecto al tutorial de la cabecera en flash me encanto y quisiera ponerlo en mi blog pero no me queda bien no se si sera por la plantilla... por favor ayudame a poner una cabecera justa asi, si quieres te mando la clave de mi cuenta por correo para que me lo hagas si puedes... este es mi blog- http://mbcsantiago.blogspot.com/ espero tu respuesta...

    ResponderEliminar
  50. Deja la pregunta en la entrada que corresponde para no desviarnos del tema principal de este post ;)

    ResponderEliminar
  51. como hago para que el boton de twiter al igual que el de facebook me queden debajo de cada entrada, que almomento de publicar cada entreda aparezca abajo de cada entreda

    ResponderEliminar
  52. Colocalos debajo de <div class='post-footer'>

    ResponderEliminar
  53. puden entrar en mi web es miguelatp.jimdo.com

    ResponderEliminar
  54. Hola de nuevo Potro..
    esta vez coloque el boton de twitter pero con una imagen diferente, el problema esq se ve pequeño, como hago para aumentarle de tamaño.
    http://dvdrip-charly03.blogspot.com/

    ResponderEliminar
  55. El código no tiene establecido algún tamaño, se ve así porque tomaste la URL de ima imagen pequeña. Cambia esa URL por esta:
    https://lh5.googleusercontent.com/-y7rFvw0IqG0/Tqt9KOOl7oI/AAAAAAAAAfM/9AmN97m2kDw/h400/dvdrip-charly03_twitter.png

    ResponderEliminar
  56. Muchas Gracias colega Potro...
    Espero no tenerte cansado de tantas preguntas...

    ResponderEliminar
  57. Me parece que encontré algo de lo que buscaba..jaja. Ahora me falta el tema de poner el botón de google "1+" también pero para compartir el blog...cómo sería? es decir, poner el de twitter y facebook flotantes con las cuentas del blog en cada uno de ellos y el de google para compartir el blog...jaja mucho lío, no? me ayudás??

    ResponderEliminar
  58. El botón de compartir de +1 lo encuentras aquí:
    http://ciudadblogger.com/2011/06/anadir-el-boton-1-de-google-en-blogger.html

    O puedes tomarlo del código de la entrada donde habías comentado antes, ese ya está flotante, sólo sería eliminar los botones que no quieres de ahí.
    Saludos.

    ResponderEliminar
  59. Hola potro! En mi web de asesoramientoconsorcios.blogspot.com tengo dos anuncios flotantes que miden 175x60 cada uno, y uno me aparece en su tamaño real y el otro chiquitito, abajo...qué está mal?? Saludos!

    ResponderEliminar
    Respuestas
    1. ¿Los de Twitter y Linkedin? Yo los veo los dos del mismo tamaño, no sé si ya pudiste resolverlo. Saludos!

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger