Más vale pájaro volando que ciento... | Oloblogger ElektroDanZ llamó mi atención sobre este gadget que había visto revoloteando por una página. Se tra...

18 de noviembre de 2010

Más vale pájaro volando que ciento...

ElektroDanZ llamó mi atención sobre este gadget que había visto revoloteando por una página. Se trata de un pájaro azul, en clara alusión al icono de Twitter, que aparece por la parte superior y sobrevuela tu página según te vas desplazando verticalmente por ella.

Twitter voladorEsto ya sería lo suficientemente entretenido como para publicarlo y que algunos os divirtais un poquito instalándolo en vuestra página. Pero lo mejor de todo es lo que hace. Resulta que este pajarraco, además de haceros compañía, es también un enlace a vuestra cuenta de twitter y al mismo tiempo, un boton de retweet. Esto le da un poco más de interés ¿no?

Supongo que a estas alturas de post, ya habreis visto el que he puesto de muestra. Posaros sobre él y vereis cómo se abren dos nuevos enlaces: twitéame y sígueme. Pues hala, ya estais pinchando para verlo funcionando. El propio pájaro, directamente es un enlace a vuestro perfil, pero bueno, queda mono lo de los enlaces que se despliegan.

Por último, si el bicho migratorio este os molesta para la lectura de alguna parte de la entrada, sólo teneis que sacudirle un poco con el puntero, para que cambie de sitio. Qué majo él.

El pack completo del creador (Floern), incluye también un par de utilidades para que al apuntar al pájaro, este reproduzca en un bocadillo tipo cómic, nuestro último twett. Pero eso se va a quedar para usuarios avanzados y con PHP a su alcance. Los de Blogger, hoy por hoy no tenemos fácil el acceso a ese lenguaje, así que nos conformamos con lo que veis.

INSTALACION

Simplemente buscais <data:post.body/> en vuestra plantilla (con artilugios expandidos) y antes de esa variable, insertais la llamada al script que he alojado en Google Code, así como las variables necesarias. Si teneis alguna modificación en vuestra plantilla quizás tengais que usar como referencia <div class='post-body entry-content'>. En este último caso, el código iría detrás.

<b:if cond='data:blog.pageType == "item"'><script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
var birdSprite=&quot;https://olobloggerblog.googlecode.com/files/twitter_bird_sprite.png&quot;;
var targetElems=new Array(&quot;img&quot;,&quot;hr&quot;,&quot;table&quot;,&quot;td&quot;,&quot;div&quot;,&quot;input&quot;,&quot;textarea&quot;,&quot;button&quot;,&quot;select&quot;,&quot;ul&quot;,&quot;ol&quot;,&quot;li&quot;,&quot;h1&quot;,&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;p&quot;,&quot;code&quot;,&quot;object&quot;,&quot;a&quot;,&quot;b&quot;,&quot;strong&quot;,&quot;span&quot;);
var twitterAccount = &quot;http://twitter.com/oloman&quot;;
var tweetThisText = &quot;Leyendo: <data:post.url/>&quot;;
tripleflapInit();
</script>
</b:if>


CONFIGURACION
Hay que cambiar el valor de la variable twitterAccount, para poner vuestra propia cuenta. El contenido de tweetThisText será lo que se escriba automáticamente en el status de Twitter al pinchar en twitéame. Ahi también podeis poner lo que querais, aunque sería conveniente conservar &lt,data:post.url/&gt; porque eso hará que también se inserte automáticamente la dirección del post en el que se está. La dirección principal de la web, también podría ser otra alternativa.

Si quitais el condicional y su cierre, el pájaro será visible en todo tipo de páginas y no sólo en las entradas individuales. Aunque en este caso, no respondo de la dirección que se enviará.


OPCIONES
El código puede ser instalado perfectamente en un gadget en lugar de en la plantilla. En este caso, lo de incluir la dirección del post sería inviable porque las variables Blogger no funcionan si no están en la plantilla HTML. Si esto no es problema, sería suficiente con cambiar las comillas simples por dobles y todos los &quot; por comillas simples. Por supuesto, el condicional sobraría.


MODIFICACIONES
Podeis utilizar este mismo artilugio para cualquier otro tipo de enlaces. Esto ya es algo más complicado, porque requiere cambiar los valores de twitterAccount, tweetThisText y para el botón que hace el retweet, la varible tweetthislink que se encuentra en el script:

var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);

Sprite TripleflapOtra "maldad" que se me ocurre, sería cambiar todas las imágenes del sprite que son las responsables del movimiento del pájaro, por cualquier otro personaje que sea de vuestro agrado. Aunque claro, para esto ya hay que tener algo de mano con el fotochop.


RECOMENDACIONES
Como siempre, para no quedaros colgados el día menos pensado y para evitar la saturación del lugar dónde está alojado el script y la imagen, conviene que useis vuestro propio alojamiento y sustituyais luego las direcciones de ambos por las vuestras. Para ello, en los siguientes enlaces podeis descargar el fichero tripleflap.js y la imagen birdsprite.png.

¿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

54 comentarios :

  1. Vaya susto al entrar en la página :)

    ¿Y ese pajarraco?

    Saludos;)

    ResponderEliminar
  2. Oloman, siento delirio de persecución jaja...!

    Que bonito...!

    ResponderEliminar
  3. Hola:

    Me podrias sugerir donde subir los scripts... para poder registrarme y con eso no sobrecargar el tuyo? eso si explicame como subirlo ;)

    Es posible subirlo en el mismo blogger? si es asi me podrias explicar como?

    ResponderEliminar
  4. Hola, ya lo tengo instalado una pasada.... gracias
    Me podrías explicar con mas detalle como hacer para que también me salga en la pagina de inicio, ya que no soy tan bueno y no entiendo lo de la condicional etcc...
    Gracias de nuevo

    ResponderEliminar
  5. Hola, yo quería preguntar si alguien sabe si el script funciona con las nuevas plantillas. Igual es cosa del hosting (he alojado el script y el sprite en otro sitio y los he enlazado), pero he puesto el código y no me funciona. La dirección es esta: http://adelantee.blogspot.com/

    Muchas gracias, y enhorabuena por el post y por el blog!

    ResponderEliminar
  6. Me en-can-tó!! ya mismo me lo instalo. Gracias, master!

    ResponderEliminar
  7. Rectifico: sí que funciona, pero sólo al darle click a las entradas y no en la página principal. Un saludo!

    ResponderEliminar
  8. Hola de nuevo:

    Me podrias explicar como subir los codigos a google codes?

    ResponderEliminar
  9. Oloman tengo una pregunta a ver si sabrias hacer esto.
    Estoy haciendo una web trabajo con dreamweaver.
    La pagina es muy ancha y alta. Ahora mi pregunta surge porque querria que cada vez que cargara la pagina se viera una parte diferente de ella para que no se vea siempre el mismo contenido.
    ¿Sabrías como hacer para que cada vez que cargues la pagina principal, aparezca una parte diferente de la misma sin tener que mover los scrolls horizontal y vertical? Sabes lo que te quiero decir?
    Espero tu respuesta, y espero que lo sepas ;) muchas gracias.

    ResponderEliminar
  10. Me encanta Oloman, queda precioso!

    Saludos :)

    ResponderEliminar
  11. jajajaja pues a mi me pone de los nervios pero me reí un buen rato no conocía esa afición tuya por las mascotas :)
    Lo que más me gustó fue el efecto hover ;)

    ResponderEliminar
  12. Mercier, Karla, imaginad cómo me siento yo, que entro más que vosotras en el blog y lo tengo que ver todo el rato. Estoy deseando publicar unos cuantos posts más para que pase a la segunda página :)


    El Chiko de Rojo, aquí tienes un enlace con distintas posibilidades para los scripts. Y para el caso concreto de Google Code...

    Sinequanum, para que también salga en la página principal (y en todas realmente), tendrías que eliminar la primera y última línea que se ven en el primer trozo de código de esta entrada.

    by Atx, me remito a lo que le he contestado a Sinequanum. Sólo te sale en las entradas porque es como lo he planteado con el condicional. Si no quieres que sea así, se lo quitas.

    Lils, ya lo ví volando por ahí :D

    Abreparentesis si no te he entendido mal, parece que tu web tiene diversos elementos (supongo que distintos FRAMES o DIVs) y lo que pretendes es que no se muestren siempre en el mismo orden. Si todo está con Dreamweaver no entiendo ni papa y no puedo aportar nada. Si con ese programa sólo hiciste uno o varios de los elementos, entonces quizás se podría hacer algo con JavaScript ¿cual es la situación exacta?

    Pues nada. Que lo disfrutes Gabriela.

    Gem@, casi mejor que el hover, es el hover "movidito" :D

    ResponderEliminar
  13. Excelente, vere que tanto lo aguantan mis lectores de wii4everybody.com jejejeeje

    Saludos gente!

    ResponderEliminar
  14. Bueno... ya tengo mi pajarito. Es interesante. El rollo es que se para a veces sobre el texto y es incomodo porque no permite leer y no hay manera de mandarlo a volar... ¿no habrá alguna manera de hacerlo desaparecer cuando se haga click sobre él?

    Gracias Oloman

    ResponderEliminar
  15. Ozl, no abusando se aguanta todo.

    Anónimo, he tenido que buscar en el diccionario que significaba esa palabra. Debes ser de Chile porque dice que es corriente allí. Gracias ;)

    Daniel, para que se mueva cuando estorbe, hay que pasar el puntero varias veces por encima de él, como si quisieras espantarlo.

    ResponderEliminar
  16. Buenas oloman. Pues no, no tengo diversos frames, si hay varias capas o divs, pero digamos que la pagina consta de una cabecera, el contenido principal debajo del cabecero y luego hay un footer. Pues la parte principal es muy ancha y alta y es la que se mueve. El cabecero y el footer son divs anclados a la página. Pues la parte central lleva un div class con un scroll horizontal y otro vertical y dentro de este div va el contenido (por lo que el div este va definido en px). La parte principal es mas ancha y alta que la pantalla de cualquier pc. La pregunta es si cada vez que cargue la página se podría mostrar un contenido diferente de esta div class. Cada vez que se le de a actualizar se moviesen los scroll vertical y horizontal (al azar por ejemplo) mostrándose un contenido diferente de la página. ¿ me entiendes? espero tu respuesta. gracias. Si tienes msn me vendría genial poder contanterlo mas rapido por ahi.

    ResponderEliminar
  17. Hola Oloman. Está bien. Gracias por la explicación. El asunto es que tengo que explicarle a mis pocos lectores que muevan el puntero para que el pajarito se vaya... eso me enreda la cosa... bueno, o dejaré que aprendan por su cuenta. Por otro lado, la palabra BACANO o VACANO, también se usa en Colombia. Sugiero leas la siguiente explicación de varias palabras que la RAE no acepta, pero que aquí son de uso común (por si te interesa, claro)... saludos y agradecimientos desde Colombia...

    el link con la explicación en: http://www.mineducacion.gov.co/cvn/1665/article-128314.html

    ResponderEliminar
  18. Muy hermoso pájaro que vuela. Ya se ha añadido a mi blog. Gracias por compartir tus conocimientos!
    Saludos desde Brazil!

    ResponderEliminar
  19. Hola Oloman, muito obrigada por este script adaptado do tripleflap, é fantástico :)

    ResponderEliminar
  20. Gracias por esto, la verdad es muy bonito y... ..como iba diciendo es muy bonito y util, lo... eh.. usha usha pajarito... por donde me quede? asi lo itentare aplicar en mi blog y cambiare los sprit jejeje gracias!

    ResponderEliminar
  21. muy buen efecto por favor como hago para que salga en la pagina principal y que solo enlace mi cuenta de twitter, por favor detallame bien ya que soy amatute en esto GRACIAS!!!

    ResponderEliminar
  22. Abreparéntesis, había imaginado otra cosa y pensaba que se trataba de mostrar en cierto elemento (DIV) una cosa distinta cada vez que se cargara la página. Lo que he entendido ahora, es que quieres que el navegador muestre de primeras una zona aleatoria de la página -que ocupa más que una pantalla- y eso no sabría cómo hacerlo. Supera mis conocimientos. Lo siento.

    Daniel, seguro que tus lectores se van a sonreir cuano descubran que pueden espantar al pájaro azul.
    He leído el post que me enlazabas y tengo que reconocer que sólo conocía la palabra "berraco". Y fue desde que otro lector me la aplicó también como adjetivo ;)

    Vera, Joana Morais, nEjO, no hay de qué. Me agrada servir de ayuda.

    Proyecto Periodístico, para que te salga también en la página principal, tendrías que quitar la primera y última línea del código, que son las que forman la condición para que precisamente no se muestre allí. Con respecto al enlace único a tu perfil, si dices que eres amatute, casi mejor lo dejamos, pues es algo complicado, ya que hay que reconstruir el script.

    ResponderEliminar
  23. Muy bueno!ya lo tengo en el blog!

    ResponderEliminar
  24. hola amigo necesito tu ayuda vi el post perono me sale creo q ha de estar mal ademas no entendi muy bien como ponerlo por fa ayudame tu para poner el pajaro en mi blog mi pagina la hice en blogspot te lo agradecere =) mi pag http://x-mugen.blogspot.com/
    y mi correo christian_tobalina@hotmail.com porfavor ayudame a ponerlo pasame como tienes tu html del ave o explicame como ponerlo correctamente en mi blogspot

    ResponderEliminar
  25. Buenos días, Oloman.
    He encontrado información en Vagabundia sobre este tema. En ese blog se remite a este sitio, por tanto, me gustaría preguntarte, cómo debo hacer para que el "pájaro" vuele en un sitio web tipo html. Mi sitio es reescriba.com y está hecho con Incomedia WebSite X5. Realmente soy nuevo en este cuento y me serviría de ayuda tu explicación.
    Nota: ¿Puedo cambiar el enlace hacia Facebook en lugar de Twitter?

    ResponderEliminar
  26. Genial, Oloman. Ya lo he instalado. Se ve hermoso mi pajarito de Twitter.

    ResponderEliminar
  27. Hola Oloblogger...
    Bueno luego de tanto tiempo estoy de nuevo por aca jeje.
    La verdad que exelente trabajo con el pajarito de twitter XD pero que solucion puede tener eso de que cuando queda quieto aparece un trozo de color blanco a su derecha.
    Saludos que andes bien.

    ResponderEliminar
  28. Cocofansclub, Annaiss entonces supongo que podréis dar fé de que es bastante fácil de instalar :D

    Anónimo, la mejor explicación que te puedo dar es la que puedes encontrar en esta entrada. No sabría explicarlo de otra manera: copiar y pegar dónde se indica y posteriormente cambiar mi cuenta Twitter por la tuya.

    Alberto para instalarlo en un sitio con dominio propio (no Blogger), que supongo que es lo que quieres decir, simplemente tienes que cambiar dos cosas:
    1. Eliminar la primera y última línea del primer trozo de código, que son propias de Blogger y que sólo forman una condición para que el pájaro sólo se vea en entradas
    2. Sustituir <data:post.url/> que también es una variable Blogger, por aquella que tu plataforma utilice para guardar el dato de la URL de la página visitada
    De todas formas, tu caso yo no lo puedo probar, por lo que lo mejor será que te documentes en el enlace de Floem que se cita en la entrada.

    MR Producciones, no había reparado en ello, proque la mayoría de mi fondo es claro. Seguramente sea cosa de la imagen original que tiene esos puntitos blancos dónde deberían ser transparentes. Pero si no te importa mucho, disculpa que no me ocupe, que últimamente tengo mucha faena pendiente.

    ResponderEliminar
  29. hola! x favor me puedes ayudar con el codigo del pajaro de twitter "tripleflap" lo inserto n mi web y no me muestra nada =(
    Sta s la web: http://whosgeost.jimdo.com/

    ResponderEliminar
  30. No me deja publicar el codigo, pero te lo subi a un .txt
    http://www.megaupload.com/?d=8UQO02LT

    ResponderEliminar
  31. Geost, supongo que los estás grabando en un gadget. Si es así, sólo tienes que añadir comillas simples a todos los tags de esta linea, tal y como te lo transcribo a continuación:

    var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');

    Comprobado ;)

    ResponderEliminar
  32. Hola amigo, me gusto el widget, pero hay alguna forma de instalarlo en la pagina principal?.. por favor nesecito ayuda :D.

    ResponderEliminar
  33. Hola Julio. Eso está en el último párrafo del comentario #23, así que me ahorro volverlo a escribir ;)

    ResponderEliminar
  34. entonces quito la sentencia if y lo agrego como widget html/javascript?

    ResponderEliminar
  35. Lo de quitar el IF es correcto, pero lo de meterlo en un gadget es sólo opcional. O lo metes en la plantilla o en un gadget. Es indiferente para lo que quieres Julio.

    ResponderEliminar
  36. jajaja que buen aporte, lo único malo es que despues de un rato dan ganas de asesinar al pajaro acosador

    ResponderEliminar
  37. Muchas gracias Oloman, lo uso y está perfecto :)

    ResponderEliminar
  38. Hola Oloman:
    Llevo mucho tiempo leyendo tus entradas,que me parecen geniales.Este pajarito no me funciono,yo quiero instalarlo y que se vea en todo el blog.¿Que debo hacer?Porbe de todo.Quitar todos los quot que habian en el codigo,copiar las lineas que pusiste pero sigue sin funcionar.Que hago?
    Gracias
    Att:Jaled

    ResponderEliminar
  39. Y tampoco en la plantilla!

    ResponderEliminar
  40. Jaled, siento comunicarte que no hay otra forma de instalar el pajarraco, distinta de la que se explica en el apartado correspondiente de esta entrada. Tendrás que explicarme qué haces exactamtene y que problema es el que te produce.

    ResponderEliminar
  41. Yo,esta vez,lo puse en la plantilla.Pero no veo por ningun lado un pajaro!Mi plantilla es de las nuevas

    ResponderEliminar
  42. Sigues sin explicarme qué es lo que haces Jaled y además, no tienes nada de esto puesto en tu plantilla, por lo que estoy absolutamente a ciegas.

    ResponderEliminar
  43. Bueno como no le se mucho a esto quisiera ponerlo en mi blog que es este pero nesesito que me expliquen bien como ponerlo de la manera mas facil
    lo quiero para este blog www.urbansvolks.blogspot.com

    ResponderEliminar
  44. Urbans Volks, comienza por seguir las instrucciones que se dan en esta entrada y en particular las del apartado "Instalación".

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. Consulta: No entiendo como instalar el pajarito. Que código debo poner antes de ? Otra consulta: Yo no tengo cuenta de twitter, igual sirve para que los que sí tienen me twiteen? Gracias!

    ResponderEliminar
  47. Romina, no te hace falta tener cuenta en Twitter. El gadget sirve para varias cosas y una de ellas es la que dices, que otros envíen a Twitter tus posts.

    Para ponerlo sólo tienes que seguir las instrucciones a partir de INSTALACION. Todo lo demás son aclaraciones diversas. Con seguir lo de ese apartado, es suficiente.

    ResponderEliminar
  48. Me encanto este pajarraco :), yo tengo mi blog en Wordpress y no sabia como instalarlo pero encontre el plugin >> http://bit.ly/tFDI2t que es de muy fácil instalación. Espero les sirva, genial post y nos seguimos leyendo.

    ResponderEliminar
  49. Poca gente de Wordpress pasa por aquí Eric Torres, pero algún que otro despistado sí hay :)
    En su nombre, gracias por la aportación.

    ResponderEliminar
  50. Men lo único que quiero que me expliques es como puñetas lo monto de dreamweaver por que es lo último que me falta para subir con filezilla men dame la respuesta por fa‼ que lo necesito enviamelo a jeysendb@gmail.com

    por fa ‼

    ResponderEliminar
    Respuestas
    1. No he usado nunca Dreamweaver, así que no te puedo ayudar.

      Eliminar
  51. O Link está quebrado =/

    http://oloblogger.googlecode.com/files/birdsprite.png

    ResponderEliminar
    Respuestas
    1. ¿Puedes probar con este y decirme si te funciona?
      https://olobloggerblog.googlecode.com/files/twitter_bird_sprite.png

      Eliminar