Mil Trucos Blogger

El Fanbox de Facebook, flotante y con efecto deslizante

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Pasando por el blog de el genio de Blogger El Potro me he encontrado con este gran truco y es un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante.


El gadget funciona con  jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:

<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>

Ahora pega arriba de ]]></b:skin> 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 guardas y vas a Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:

<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&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Por ultimo cambia el nombre de tu pagina donde se indica y listo.

 

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

63 Comentarios

  1. agosto 20, 2011    

    Muchas gracias por este excelente aporte, pero tuve que modificar el ultimo código en donde iba el nombre de la página debido a que tengo un dominio personalizado de esta forma:
    http%3A%2F%2Fwww.facebook.com%2Fpages%2FNombre-de-la-pagina-de-facebook%2FXXXXXXXXXX

    Ahí modifica el nombre de tu página y las XXXXXXX son el número que viene hasta el final de la URL de tu página, ese puedes conocerlo entrando a tu página de Facebook y ver los números que aparecen al final de la URL en la barra de direcciones.

  2. agosto 20, 2011    

    gracias me sirvio mucho Graxxxxxxx

  3. agosto 20, 2011    

    @Caicaver gracias por comentar y que bien que te haya servido,si la cuestion solo era modificar una pequeña parte suerte 🙂

  4. agosto 20, 2011    

    @Diagel que bien que te haya servido,suerte..

  5. agosto 20, 2011    
  6. agosto 20, 2011    

    @Jorge Luis listo amigo ya puse tu banner,saludos..

  7. agosto 20, 2011    

    No me funciona, creo que es por el nombre, el nombre de mi página tiene este formato:

    http://www.facebook.com/pages/nombre/143980559015058

  8. agosto 21, 2011    

    @Facushca!! lo que pasa es que en la ultima parte donde dice “nombre-de-tu-pagina-de-facebook” solo debes cambiarla por el nombre de tu pagina no la URL,ejemplo en mi caso seria Mil-Trucos-Blogger

  9. Hola!! ayuda!! no entiendo mucho de esto, estoy haciendo mi 1er blog!! y pude poner bien el deslizado ese de facebook, pero no hay caso con que aparezca mi pagina de FB ahi!! probe con las formas que dicen aca, pero nada!! que hago mal?? mil graciasssss

  10. agosto 22, 2011    

    Bolsas para leches vegetales y germinados Brota! primero debes crear un pagina en facebook,si ya la tienes entonces donde dice “nombre-de-tu-pagina-de-facebook” solo debes cambiarla por el nombre de tu pagina no la URL,ejemplo en mi caso seria Mil-Trucos-Blogger

  11. septiembre 1, 2011    

    Como hago para poner dos fan box, porque quiero poner uno de twitter y uno de facebook, pero no logro ponerlos los dos en el mismo lado

  12. septiembre 2, 2011    

    SrDiario si te entiendo bien quieres poner ambos fanbox flotantes a la vez pues esto no se puede..

  13. septiembre 9, 2011    

    Te invito a pasar por mi blog. Por favor ayudame porque no me sale el fanbox flotante…te agradezco por anticipado.

  14. septiembre 9, 2011    

    Me imagino que el inconveniente es con la URL de tu pagina en facebook que esta en otro formato,ante esto entonces aqui esta la solucion:

    En el caso de esas páginas entonces cambia esta parte del código:
    http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook

    Por esto:
    http%3A%2F%2Fwww.facebook.com%2Fpages%2FNombre-de-la-pagina-de-facebook%2FXXXXXXXXXX

    Ahí modifica el nombre de tu página y las XXXXXXX son el número que viene hasta el final de la URL de tu página, ese puedes conocerlo entrando a tu página de Facebook y ver los números que aparecen al final de la URL en la barra de direcciones.

    En un caso de ejemplo quedaría así:
    http%3A%2F%2Fwww.facebook.com%2Fpages%2FMinisterios-Hermon%2F105635339509780

  15. septiembre 19, 2011    

    Heey muy bueno gracias me sirvio, ahora quisiera saber como ponerlo con el twitter y si se puede en youtube! muchas gracias

  16. septiembre 20, 2011    

    Rockstar! para poner el de Twitter rememplaza el ultimo codigo por el del fanbox de Twitter..

  17. octubre 18, 2011    

    ya probe de todo y nada!, no se en donde esta el error, por favor fijense en la pagina que es http://www.rdmisericordia.com. GRACIAS DE ANTEMANO.

  18. octubre 18, 2011    

    chicos, yo tb la he probado y no se donde esta el error, segui las indicaciones de juvinao inclusive, pero me sigue saliendo el error. Cualquier consejo, sera bienvenido

  19. octubre 18, 2011    

    Asociacion Divina Misericordia

    Gladys

    El tutorial funciona lo que pasa es que hay modificarle una pequeña parte mira el comentario 14

    Saludos 😀

  20. noviembre 1, 2011    

    de verdad que grax por todo

  21. noviembre 1, 2011    

    enrique de nada amigo.

  22. noviembre 29, 2011    

    Muchas gracias por todos,a los que hicieron las preguntas Y al que las respondio con tanta claridad! me voy a pasar seguido por aca! Gracias!…

  23. noviembre 29, 2011    

    Administrador@ gracias por comentar,Saludos

  24. diciembre 13, 2011    

    Este comentario ha sido eliminado por el autor.

  25. diciembre 13, 2011    

    Hola juvinao! Una pregunta… ¿Esto se puede hacer con twitter? Me gustaria aplicarlo encontre en otras paginas, pero no se explica bien, o no funcionan… si me dirias estaria muy agradecida! Saludos.

  26. diciembre 14, 2011    

    Administrador@ claro que se puede hacer dame unos dias y hare unas pruebas para crear el tutorial,te parece.

    Saludos

  27. diciembre 14, 2011    

    Excelente Juvinao! Gracias por la ayuda que me das Eres un genio! Espero el post 😉 Saludos! 😀

  28. diciembre 14, 2011    

    Administrador@ jeje gracias amigo

  29. diciembre 15, 2011    

    Hola Juviano!! Sos un capo, gracias por este post, tengo una consulta, no encuentro exactamente en donde pegar el code que va “arriba de ]]>”

  30. diciembre 15, 2011    

    De vuelta Juvinao! ya lo encontre y lo ajuste y funciona perfecto! Muchas gracias!!!

  31. diciembre 16, 2011    

    Midas de nada para ayudar estamos,Saludos 😛

  32. febrero 3, 2012    

    No entiendo qe pasa solo abre cuando la pagina esta actualizando despues trato y nada :S

    • febrero 3, 2012    

      Dejame la URL de tu blog y asi podre mirar cual es el posible error.

  33. febrero 3, 2012    

    Este comentario ha sido eliminado por el autor.

  34. febrero 3, 2012    
    • febrero 3, 2012    

      coke revise tu blog y el fanbox se ve muy bien,ahora lo que creo es que puede ser un error de tu navegador,te queria preguntar que navegador usas?.

  35. febrero 3, 2012    

    ahora me funciona bien no se que abría tenido gracias =

    • febrero 3, 2012    

      coke pues me alegra de verdad mucho que el problema se haya solucionado.

  36. febrero 20, 2012    

    Hola Juvinao…
    He seguido todos los pasos que me has dicho, y he reemplazado enÑ
    http%3A%2F%2Fwww.facebook.com%2Fpages%2FNombre-de-la-pagina-de-facebook%2FXXXXXXXXXX
    las XXXXXXXX, por mi ID que lo puedo visualizar al hacer click en albunes (es el unico modo de ver la ID)…LO GRABO, pero la ver el efecto sale este mensaje;
    Could not retrieve id for the specified page. Please verify correct href was passed in.

    NO SE QUE ESTARE HACIENDO MAL…

    He llevado 4 horas, y no puedologra dicho efecto..

    Me podrias indicar en que estoy mal..
    GRACIAS.

    frogelio2000@yahoo.es

    Esta exclente tu bolgger.
    ya estas adherido

    • febrero 20, 2012    

      FROGELIO S. A. mira te dejo la URL del post del creador,el tal vez te de una solucion porque no se me ocurre cual sea el problema.

      http://ciudadblogger.com/2011/08/el-fanbox-de-facebook-flotante-y-con.html

    • junio 19, 2012    

      Talves les sirva este consejo aun que sea tal vez algo tarde pero les cuento que ami tamvien me dio ese problema pero ay una forma que ami si me funciono y es esta primero tu entras a tu pagina de facebook,y luego copias el link o enlace de la barra de navegacion y reemplasan este por el vuestro que copiaron anterior mente,

      este es el q trae el codigo del tutorial

      http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook

      todo eso lo cambias por el link o enlace de tu pagina que copiaste desde la barra de direcciones les digo por que yo asi ice y me funciono
      les dejara el enlace de mi pagina pero noce si se podra para que vieran que si funciona,bueno suerte,y sorry por el tremendo sermon,chaoo

    • junio 19, 2012    

      Gracias por colaborar con la comunidad amigo 😀

  37. abril 26, 2012    

    Hola esta muy bueno el aporte, me gustaria saber si es pósible colocar el fanbox de facebook y twitter en la misma pagina?, por que al intentar colocar el de twitter me borro el de facebook… Agradezco tu ayuda…

    • abril 28, 2012    

      Si se puede pero te recomiendo que solo pongas uno de los dos ya que los dos a la vez harian que tu blog se demore en cargar mucho tiempo :8S:

  38. julio 26, 2012    

    Busco uno pero de youtube

    • julio 27, 2012    

      Angel cambia el ultimo codigo (el contenido que esta entre las etiquetas iframe) y pones alli el codigo de YouTube.

    • julio 27, 2012    

      Olle asme el favor de pegarme tu el code esque no te entiendo

    • julio 29, 2012    

      Pero si existe el fanbox de YouTube :LOL:

  39. noviembre 27, 2012    

    Hola, estoy liado, me sale un aviso en el blog:Could not retrieve the specified page. Please verify correct href was passed in.
    Muchas gracias y saludos.

  40. noviembre 28, 2012    

    Este comentario ha sido eliminado por el autor.

  41. febrero 4, 2013    

    hola mi pregunta es como puedo cambiarle el color al banner ya vez que esta en color azul lo quiero gris o negro! mi correo es

    suhy gt89@gmail.com

    • febrero 4, 2013    

      Bueno no soi Hayder Juvinao pero le ayudo con comentarios y te voy a ayudar 🙂

      Tu problema es cambiar eso el caso es que para cambiarlo tendrias que hacer con photoshop lo que te paso en esta imagen:

      [img]https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png[/img]

      Es decir tu haces algo igual que esa imagen que te he pasado en color gris y la remplazas por la que viene en el código pero vamos que para cambiar el color tienes que hacer algo igual que eso pero en otro color.

      Espero averte ayudado cualquier cosa ya sabes.

      Un saludo 🙂

  42. febrero 4, 2013    

    hola mi pregunta es como puedo cambiarle el color a gris o negro el banner de faceboock? mi emeil es shuygt89@gmail.com

  43. marzo 3, 2013    

    excelente brother!!!! hice mil intentos hasta que funcionó!!! gracias

  44. marzo 21, 2014    

    gracias man me salio de la PTM, muchas gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo