Mega FB Man, un gadget juguetón para compartir en Facebook | Oloblogger Supongo que muchos recordaréis ese pájaro que se paseaba erráticamente por una página y que permití...

28 de marzo de 2012

Mega FB Man, un gadget juguetón para compartir en Facebook

Mega FB Man
Supongo que muchos recordaréis ese pájaro que se paseaba erráticamente por una página y que permitía enviar un tweet con la dirección visitada al pinchar en él. Pues modificando un poco el código y -sobre todo- el sprite que lo acompañaba, he conseguido que ese bicho se convierta ahora en MegaMan y que sus funciones se puedan aplicar a Facebook. Es por eso que lo he bautizado como Mega FB Man.


Mega FB Man
Mega FB Man
El muñequito estará siempre visible en la página y cuando se haga scroll y desaparezca, bajará o subirá por ella hasta quedar otra vez dentro de la ventana visual.

Cuando se hace hover sobre él, un par de mensajes con las leyendas "Compartir" y "Seguir" aparecen para que el usuario pueda enviar el enlace a su cuenta de Facebook o para que pueda acceder a tu página y pinchar en el "Me gusta" si le place.

Cuando Mega FB Man se sitúa en algún lugar que molesta para la lectura o visión de alguna imagen, sólo hay que agitarlo un poco con el puntero y cambiará de posición.


La cosa no tiene mucha ciencia, ya que el efecto visual corre a cargo de la imagen que sirve de base para las distintas secuencias de la animación y todo lo demás lo hace el código JavaScript. De esta manera, lo único que hay que hacer para que funcione en tu página es copiar el siguiente código en un nuevo gadget y cambiar la dirección marcada en verde por la de tu página en Facebook:

<script src="https://googledrive.com/host/0B3b6MFUtZc42TTZXTldEdlV0VVk" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://1.bp.blogspot.com/-pMGbr2OQ3Zo/VBsa8fL0v-I/AAAAAAAARN4/CBmO5czECfo/s1600/megamanfb96.gif';
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');
var facebookAccount = 'http://www.facebook.com/oloblogger';
tripleflapInit();
</script>


De todas formas, si hay algún perezoso por ahí, también puede usar este formulario para que el gadget se instale automáticamente en su web. Sólo hay que teclear el nombre de la página o completar la dirección del perfil de facebook y pulsar en Añadir a Blogger. Esta nuestra plataforma hará el resto.




http://www.facebook.com/


Añadir a Blogger

Si tienes varios blogs, no olvides seleccionar aquel en el que quieras instalarlo cuando accedas a la utilidad Añadir elemento de página.

¿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

45 comentarios :

  1. Excelente aporte Oloman,sos grande hermano.

    ResponderEliminar
  2. Excelente blogg.

    Una preguntita: No exitiría un "bicho" así para el "me gusta" de Facebook o el Google+1 ???

    ResponderEliminar
    Respuestas
    1. Para el +1 no sabría pero creo que sería fácil modificar el script para convertir ese "seguir" en un "me gusta".

      Eliminar
  3. Wow!!!! Mega Oloman... jajaj esto tiene buena pinta jaja te felicito.

    ResponderEliminar
  4. Oloblogger Hola, esta idea es buena, pero no funciona del todo, porque cuando las persona hace clic en el nombre vuelve a dirigir su página y no la nuestra.
    Si hace clic en la carta abierta mi página de Facebook, pero si hace clic en su muñeca se abre.

    ResponderEliminar
    Respuestas
    1. Es una "licencia del autor" para que otros que lo vean puedan conseguir el gadget (Get this gadget). Lo que sirve para enviar un post o acceder a la página facebook son los textos que aparecen al poner el puntero sobre él.

      Eliminar
  5. Jaja, te has volado la barda amigo Oloman. Muy bueno eh =)

    ResponderEliminar
    Respuestas
    1. Si muy bueno pero si hace clic en la carta abierta mi página de Facebook, pero si hace clic en su muñeca se abre.

      Eliminar
  6. Te quedo de lujo, de veras :D

    Te felicito Oloman, muy bueno!

    ResponderEliminar
  7. Eres un monstruo! Esto abre un mundo de posibilidades.
    Nadie se atreve a hacer un Imp del Doom para Google+? hahaha

    ResponderEliminar
    Respuestas
    1. ¡Claro que sí! ¿Cuánto estás dispuesto a pagar? XD
      Es broma. Es que no puedo llegar a ese nivel de personalización. Seguro que cada uno quiere su propio muñequito ;)

      Eliminar
  8. Es muy bueno!!!
    Jajajaj te felicito por la creatividad.

    ResponderEliminar
    Respuestas
    1. Por cierto noto que este gadget y el del pajarito de twitter no son compatibles si estan colocados simultaneamente, es posible corregir esto?

      Eliminar
    2. Es posible, pero ¿cómo vas a poner tanto monigote? Quizás lo mejor sería uno solo para ambos servicios, aunque no se deberían poner tantas opciones. Es decir, no me parece conveniente un gadget para twittear post, seguir en Twitter, compartir post y seguir en Facebook. Además ¿terminamos ahí o seguimos con G+, Tuenti, etc.?

      Eliminar
    3. Si, es cierto. Quizas lo más conveniente sea poner los dos servicios en un solo gadget.
      Además, solo con esos dos me alcanza jajaja

      Eliminar
  9. conozco a mas de uno que le encantara esto, contandome a mi se va de una.

    ResponderEliminar
  10. Gracias por el aporte, mantienes una página genial.
    Me gustaría saber como cambiar la url de redireccionamiento a su página cuando clicas en el muñeco.
    Gracias de todos modos y un saludo.

    ResponderEliminar
    Respuestas
    1. Edita el script y cambia la URL de esta línea por la que quieras
      theBird.setAttribute("href","http://goo.gl/PQWc9");

      Pero siempre es de agradecer un enlace por el curro ;)

      Eliminar
  11. excelente el aporte, no sabes cuanto te agradezco pues mi blog practicamente lo he construido a costa tuya,
    poniendole un poco de atencion he podido cambiar el megaman por otra animacion que, y tambien agregarle el me gusta, es bastante util, y si, quite el enlace a tu blog, pero estaba de mas pues siempre has tenido un enlace en mi blog

    ResponderEliminar
    Respuestas
    1. Es sencillo hacer esas cosas. Si las hice yo, imagínate :)

      Y ya he visto que tienes algunas de mis cosicas instaladas en tu blog y también que formo parte de tu blogroll. Gracias.

      Eliminar
  12. Hola Oloman no se lo que hago mal, pero no me funciona ni en manual, ni automático

    ResponderEliminar
  13. Hola se que no tiene nada que ver con esta entrada. Pero soy una bloguera novata no, lo siguiente.
    He subido una entrada que me aparece con fondo blanco,como si estuviera con subrayado. Como lo quito ??? lo he pasado a word otra vez para quitarle el subrayado pero no tenía.
    Echame una mano!! Gracias por algunas de tus ideas, seguiré copiandote ideas... :-)
    Este es mi blog:
    http://delahuertaalplato.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola. Edita esa entrada y busca un span que tiene esto: style="background-color: white;" y lo eliminas (ese texto exactamente).

      Y para los próximos no utilices Word, que a menudo mete cosas raras cuando lo copias en Blogger. Mejor usar un simple NotePad.

      Eliminar
  14. muchiiisimas graciasss , eres un crack y yo muyy torpee jeje , tu blog estará entre mis favoritoos!!

    ResponderEliminar
  15. grasias pero tuve que asel unas modificasiones https://dl-web.dropbox.com/get/vmGm.html?w=c63027c4

    ResponderEliminar
    Respuestas
    1. No sé a qué te refieres. Ese enlace no es accesible.

      Eliminar
  16. osea hola me encanta el blog pero tengo un problema click en el megaman y me trae a tu bog no me lleva a mmi fbk.. y ya lo cambie como indicaste.. q podra ser???

    ResponderEliminar
    Respuestas
    1. No es un problema, es que "Compartir" y "Seguir" son los enlaces para tu página y el del muñequito trae a esta para el que lo quiera conseguir ("Get this"). Si quieres que no pase eso descarga el script, busca esta dirección en él "http://goo.gl/PQWc9" la cambias por la que quieras y luego lo alojas en tu DropBox y sustituyes la dirección por la tuya.

      Eliminar
  17. Hola, fue muy sencillo hacer funcionar a mega man :) pero, no es posible que el pajaro de twitter funcione en simultaneo con este? Gracias. :D

    ResponderEliminar
    Respuestas
    1. Pues no, porque realmente se trata del mismo código y sólo cambia la imagen, pero ¿cuántos cacharritos de estos vas a poner? Va a parecer un circo tu blog ;)

      Eliminar
  18. hola muy bueno tu blog gracias por todo. como puedo eliminar el Mega FB man? quiero cambiar la pagina del facebook y no sé como.

    ResponderEliminar
    Respuestas
    1. Sólo tienes que buscar el gadget dónde pusiste este código que se dice aquí y eliminarlo. Tendrás que buscar si no le pusiste título.

      Eliminar
  19. como le hago?????????????
    porfavor ayudenme haaaaaa

    ResponderEliminar
    Respuestas
    1. Está todo explicado en el post. Léelo despacio, sigue las instrucciones y no creo que tengas problemas.

      Eliminar
  20. perfecto esta muy vien FELICIDADES y gracias por el aporte si quieren verlo en mi web. www.gcmrevista.com.mx la acabo de terminar de editar y FB MEGAMAN va de maravilla.. saludos

    ResponderEliminar
  21. Veo que te gusta megaman xD... es una buena idea la que pusiste :3 , lastima que mi estilo del blog no cuadre con el muñequito xD, ;3 felicidades

    ResponderEliminar
    Respuestas
    1. Con algo de tiempo y un poco de habilidad con un editor de imagen, podrías crear tu propia mascosa. Sólo es cuestión de sustituir la imagen (sprite) que contiene las distintas secuencias.

      Eliminar
  22. Soy nueva y me gusta que tenga de todo , por ahora lo dejo que camine gatee y vuele en el blog,jjaja saludos.

    ResponderEliminar
  23. Una pregunta puedo yo editar la imagen y poner otra sustituyendo la imagen de man??

    http://dl.dropbox.com/u/57549161/scripts/facebook/megamanfb96.gif

    claro esta siguiendo los mismos patrones de esa misma, salu2 y de antemano muchas gracias por tomar tu tiempo en responder

    ResponderEliminar
  24. modificado para mi blog en wordpress buen aporte amigo gracias por compartir funciona a la perfeccion

    ResponderEliminar
  25. Siempre tienes buenas ideas, esta me ha hecho mucha gracia, yo soy un super fan de megaman :-)

    ResponderEliminar
    Respuestas
    1. Vale, te agradezco el piropo... ¡pero ni se te ocurra ponerlo en tu sitio! XD

      Eliminar