Cómo colocar un Fans Box de Facebook flotante y deslizante para tus blogs

Por @EVDANI

Hola lectores y lectoras. Hoy, a pedido de Cristina Langares, una de nuestras seguidoras, traemos este útil tutorial para que puedan colocar el fans box de facebook flotando de manera que al tocarlo se deslice, como el que tenemos en nuestro blog.

Como siempre, ya saben que tienen que ir a la configuración de plantilla de HTML de su blogger, ser muy cuidados@s y seguir los pasos que les comentare a continuación...


Lo primero es buscar con las teclas Ctrl+F el código </head> y antes de éste coloquen el siguiente código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function (){ jQuery(".slide_likebox").hover(function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script>


Luego buscan ]]></b:skin> y pegan antes de éste, lo siguiente.

.slide_likebox { float:right; width:288px; height:345px; background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}


Ahora la parte final consiste en ir a elementos de diseño, donde se agregan los gadget de blogger y agregamos uno que sea de HTML y colocamos ahí el siguiente código modificando lo que está en rojo,  por el nombre de sus páginas de facebook, esto quiere decir lo que sale luego del "/", por ejemplo el bebloggera de https://www.facebook.com/bebloggera en nombre-de-tu-pagina-de-facebook o también si tu página no tiene nombre y es algo como page/bebloggera/1232433443, pega eso donde está rojo.


<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ahora coloquen vista previa y si no sale ningún error guarden.

Entonces ya podrán disfrutar de su facebook box deslizante en sus blogs, si por casualidad tienen Wordpress pueden utilizar el widget de esta página facebooklikebox.net.

Agradecemos a Ciudadblogger por este maravilloso código.

Me cuentan como les va...





CONVERSATION

46 ya son Blogger@s:

  1. Reina!!! mil gracias, no sabes las ganas que tenía de ponerlo en mi blog! Me funciona a la perfeccion. Muua!

    ResponderEliminar
  2. Tengo un problema, todo me sale bien,per al abrirse la pestañita me dice esto: Could not retrieve id for the specified page. Please verify correct href was passed in.
    No se exactamente que es lo que tengo k poner donde estan las letras en rojo, esta es mi pagina en face
    http://www.facebook.com/pages/Tricias-MakeUp/142741149138741
    Me podrian decir desde donde y hasta donde tengo que poner?

    Muchas gracias

    ResponderEliminar
  3. no se que hago mal en la pestaña me sale Could not retrieve id for the specified page. Please verify correct href was passed in.
    Que puedo hacer cual es el error?

    ResponderEliminar
    Respuestas
    1. oye ami tambien me sale el mismo error y ya coloque correctamente el nombre de la pagina y lo he intentado de muchas formas pero no me funciona

      Eliminar
  4. Excelente!!!! Estaba esperando este tutorial. Ya lo hice y me quedo muy bien. Gracias. Una vez mas estupendo.

    ResponderEliminar
  5. Que raro Caro, prueba haciendo de nuevo el tutorial bien lento, pude ser cualquier cosa que se coloco mal, o puede ser que en la parte de colocar tu nombre de pagina de facebook hayas colocado otra cosa, recuerda que ahí debe ir todo lo que va después de www.facebook.com/

    ResponderEliminar
  6. Muchísimas gracias, con tus consejos mi blog se ve cada día mejor!! ^_^

    ResponderEliminar
  7. hola a mi me ha salido bien solo que dentro de la box me dice

    Could not retrieve id for the specified page. Please verify correct href was passed in.

    ResponderEliminar
  8. Fíjate bien, primera que es para paginas, segundo que en caso de no tener tu pagina con nombre te saldrá algo como page/bebloggera/1232433443, tienes que pegar eso y ya, porque ese error es porque no esta el id de tu pagina bien especificada, suerte!!!

    ResponderEliminar
  9. me sale en blanco , ya intente de todo :( ahhhhhhhhhhhhhh yo tmb queria :(

    ResponderEliminar
  10. Luisa Salazar Dávila21 de febrero de 2012, 1:25

    A MI TMB ME SALE BLANCOO!!!

    ResponderEliminar
  11. Chicas, el fan box funciona, si estan en blogger, puede ser que les falto algo en ese caso borren los cambios, busquen el codigo y borren lo que hicieron, con sumo cuidado, y hagan el tutorial de nuevo, con sumo cuidado, porque basta que falte un //// o >>>><<< o un letra y va a fallar, figen tambien en su dirección de fanpage,  que sea la correcta, colocar lo que dice despues de facebook.com/       .... LO OTRO QUE PUEDE SER SI LO VEN EN BLANCO ES PORQUE ESTAN EN FACEBOOK COMO PAGINA Y NO COMO USUARIO PERSONAL, BUES CUANDO UNO ESTA EN SESSION EN FACEBOOK COMO PAGINA SE VE BLANCO, PRUEBEN SALIR DE FACEBOOK Y ENTRAR PERO COMO USUARIO NORMAL

    ResponderEliminar
  12. Chicas, el fan box funciona, si estan en blogger, puede ser que les falto algo en ese caso borren los cambios, busquen el codigo y borren lo que hicieron, con sumo cuidado, y hagan el tutorial de nuevo, con sumo cuidado, porque basta que falte un //// o >>>><<< o un letra y va a fallar, figen tambien en su dirección de fanpage,  que sea la correcta, colocar lo que dice despues de facebook.com/       .... LO OTRO QUE PUEDE SER SI LO VEN EN BLANCO ES PORQUE ESTAN EN FACEBOOK COMO PAGINA Y NO COMO USUARIO PERSONAL, BUES CUANDO UNO ESTA EN SESSION EN FACEBOOK COMO PAGINA SE VE BLANCO, PRUEBEN SALIR DE FACEBOOK Y ENTRAR PERO COMO USUARIO NORMAL

    ResponderEliminar
  13. Se me desactivo la funcion de la Galeria de imagenes.. Tiene algo que ver? porque justo despues que puse esto..

    ResponderEliminar
  14. cual galería de imagenes?, pero es poco probable 

    ResponderEliminar
  15. hola, he intentado hacerlo pero por alguna razon, sale la pestaña de facebook pero no el contenido :(
    http://enredandomelosdedos.blogspot.com/

    ResponderEliminar
  16. ya me salio, lo siento, confundi el dato de que, "en nombre de la pagina" sde ponia todo el link de mi pagina de facebook, creo que es el error q cometemos los q apenas estamos aprendiendo,gracias!!!

    ResponderEliminar
  17. MUXAS GRACIAS ME FUNCIONO Y LLEVABA YA DIAS BUSCANDO LA FORMA DE PONER ESTA BOX FANS EN MI BLOG GRACIAS MIL POR EL ENLACE Y LA EXPLICACION MUXAS MUXAS GRACIAS BESITOS A TODAS

    ResponderEliminar
  18. Pues me sale todo, menos el enlace a mi pagina :((((((((((

    ResponderEliminar
  19. Lo conseguiiiiiiiiiiiiiiiiiiiiiiii, mil graciassssssssssssssssssssss

    ResponderEliminar
  20. Gracias! x el tutorial!!! saludos!

    ResponderEliminar
  21. gracias! me ha sido de mucha utilidad tu tuto :D

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

    ResponderEliminar
  23. Muchas Gracias por tu gran ayuda y felicidades por tu blog esta super...

    ResponderEliminar
  24. Me funciono a la perfección, muchas gracias, excelente tutorial.

    ResponderEliminar
  25. hola! no encuentro esta parte ]]>
    :(

    ResponderEliminar
    Respuestas
    1. Busca el código sin eso entonces :) la idea es que sea el código exasto o parecido a veces varia según la plantilla que tengas

      Eliminar
  26. no encuentro la parte de elementos de diseño :CC no puedo seguir

    ResponderEliminar
    Respuestas
    1. Tienes que ir a tu panel de blogger e ir a diseño :)

      Eliminar
  27. Hola quiero agregar un html flotante no necesariamente de facebook, ahh si dice flotante ¿Por qué no flota? gracias.

    ResponderEliminar
    Respuestas
    1. Flotante quiere decir que se queda estático en algun lugar .. para un boton flotante te invito a ver el tutorial de acá http://www.bebloggera.com/2011/08/leave-comment-botones-flotantes-para-tu.html

      Eliminar
  28. Holaa lo hago todo pero el problema creo que esta en el ultimo paso porque pongo loq ue me sale despues de Facebook en lo de nombre-de-... y se me guarda y una vez ya en el blog le pongo la flecha encima para que asome y me sale en blanco :$

    ResponderEliminar
    Respuestas
    1. la dirección de fanpage, que sea la correcta, colocar lo que dice después de facebook.com/ .... LO OTRO QUE PUEDE SER SI LO VEN EN BLANCO ES PORQUE ESTAN EN FACEBOOK COMO PAGINA Y NO COMO USUARIO PERSONAL, BUES CUANDO UNO ESTA EN SESSION EN FACEBOOK COMO PAGINA SE VE BLANCO, PRUEBEN SALIR DE FACEBOOK Y ENTRAR PERO COMO USUARIO NORMAL

      Eliminar
  29. Hola, segui los pasos correctamente, me aparece el fn box deslizante pero no hay nada dentro, osea esta en blanco, porque puede ser? gracias

    ResponderEliminar
  30. Hola de nuevo, he probado en el ultimo paso poner la direccion de mi pagina yu sale en blanco, tambien puse la de mi usuario personal y tambien sale en blanco, podrias informarme que es lo que estoy haciendo mal ? gracias

    ResponderEliminar
  31. Hola de nuevo si quieres comprobarlo esta es mi direccion del blog.
    http://manel-fernandez.blogspot.com.es/

    ResponderEliminar
  32. fuckkkkkk sale en blanco

    ResponderEliminar
  33. Hola no encuentro la parte ]]> y he revisado con cuidado el codigo del cabezal...sera que mi blog es diferente www.mujeresdeexcelenciausa.blogspot.com gracias por su ayuda...abrazos♥

    ResponderEliminar
  34. a mi no me funciona hago todo como decis pero el cosos ese sale y todo pero mi pagina no se ve :(

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top