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&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>
Por ultimo cambia el nombre de tu pagina donde se indica y listo.
63 comentarios
Caicaver · agosto 20, 2011 a las 3:51 am
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.
Patricio Elias · septiembre 2, 2013 a las 5:14 pm
gracias me ayudaste mucho cn tu comentario
Diagel · agosto 20, 2011 a las 5:32 am
gracias me sirvio mucho Graxxxxxxx
Juvinao · agosto 20, 2011 a las 2:16 pm
@Caicaver gracias por comentar y que bien que te haya servido,si la cuestion solo era modificar una pequeña parte suerte 🙂
Juvinao · agosto 20, 2011 a las 3:49 pm
@Diagel que bien que te haya servido,suerte..
Jorge Luis · agosto 20, 2011 a las 4:42 pm
Ola Juvinao mi barner es https://sites.google.com/site/hostingdanielpon/archivador/radio.png
saludos amici
Juvinao · agosto 20, 2011 a las 8:49 pm
@Jorge Luis listo amigo ya puse tu banner,saludos..
Facushca!! · agosto 20, 2011 a las 10:52 pm
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
Juvinao · agosto 21, 2011 a las 3:26 pm
@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
Bolsas para leches vegetales y germinados Brota! · agosto 21, 2011 a las 8:17 pm
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
Juvinao · agosto 22, 2011 a las 5:25 pm
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
SrDiario · septiembre 1, 2011 a las 5:40 pm
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
Juvinao · septiembre 2, 2011 a las 6:32 pm
SrDiario si te entiendo bien quieres poner ambos fanbox flotantes a la vez pues esto no se puede..
Solmakh · septiembre 9, 2011 a las 6:06 am
Te invito a pasar por mi blog. Por favor ayudame porque no me sale el fanbox flotante…te agradezco por anticipado.
Juvinao · septiembre 9, 2011 a las 2:35 pm
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
Rockstar! · septiembre 19, 2011 a las 9:32 pm
Heey muy bueno gracias me sirvio, ahora quisiera saber como ponerlo con el twitter y si se puede en youtube! muchas gracias
Juvinao · septiembre 20, 2011 a las 2:29 pm
Rockstar! para poner el de Twitter rememplaza el ultimo codigo por el del fanbox de Twitter..
Asociacion Divina Misericordia · octubre 18, 2011 a las 8:02 am
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.
Gladys · octubre 18, 2011 a las 8:17 am
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
Juvinao · octubre 18, 2011 a las 3:27 pm
Asociacion Divina Misericordia
Gladys
El tutorial funciona lo que pasa es que hay modificarle una pequeña parte mira el comentario 14
Saludos 😀
enrique · noviembre 1, 2011 a las 12:41 am
de verdad que grax por todo
Juvinao · noviembre 1, 2011 a las 2:41 pm
enrique de nada amigo.
Administrador@ · noviembre 29, 2011 a las 3:51 pm
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!…
Juvinao · noviembre 29, 2011 a las 7:53 pm
Administrador@ gracias por comentar,Saludos
Administrador@ · diciembre 13, 2011 a las 8:04 pm
Este comentario ha sido eliminado por el autor.
Administrador@ · diciembre 13, 2011 a las 8:06 pm
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.
Juvinao · diciembre 14, 2011 a las 3:26 pm
Administrador@ claro que se puede hacer dame unos dias y hare unas pruebas para crear el tutorial,te parece.
Saludos
Administrador@ · diciembre 14, 2011 a las 3:30 pm
Excelente Juvinao! Gracias por la ayuda que me das Eres un genio! Espero el post 😉 Saludos! 😀
Juvinao · diciembre 14, 2011 a las 10:17 pm
Administrador@ jeje gracias amigo
Midas · diciembre 15, 2011 a las 1:08 pm
Hola Juviano!! Sos un capo, gracias por este post, tengo una consulta, no encuentro exactamente en donde pegar el code que va «arriba de ]]>»
Midas · diciembre 15, 2011 a las 1:18 pm
De vuelta Juvinao! ya lo encontre y lo ajuste y funciona perfecto! Muchas gracias!!!
Juvinao · diciembre 16, 2011 a las 12:27 am
Midas de nada para ayudar estamos,Saludos 😛
coke · febrero 3, 2012 a las 1:36 pm
No entiendo qe pasa solo abre cuando la pagina esta actualizando despues trato y nada :S
Juvinao · febrero 3, 2012 a las 2:52 pm
Dejame la URL de tu blog y asi podre mirar cual es el posible error.
coke · febrero 3, 2012 a las 3:23 pm
Este comentario ha sido eliminado por el autor.
coke · febrero 3, 2012 a las 3:40 pm
http://museocruzado.blogspot.com/
Juvinao · febrero 3, 2012 a las 6:36 pm
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?.
coke · febrero 3, 2012 a las 7:16 pm
ahora me funciona bien no se que abría tenido gracias =
Juvinao · febrero 3, 2012 a las 7:36 pm
coke pues me alegra de verdad mucho que el problema se haya solucionado.
FROGELIO S. A. · febrero 20, 2012 a las 2:54 am
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
Juvinao · febrero 20, 2012 a las 6:41 pm
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
animeshentai · junio 19, 2012 a las 3:35 am
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
Juvinao · junio 19, 2012 a las 7:13 pm
Gracias por colaborar con la comunidad amigo 😀
Bienestar Total · abril 26, 2012 a las 3:28 pm
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…
Juvinao · abril 28, 2012 a las 4:46 pm
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:
Angel Garo · julio 26, 2012 a las 11:47 pm
Busco uno pero de youtube
Juvinao · julio 27, 2012 a las 12:48 am
Angel cambia el ultimo codigo (el contenido que esta entre las etiquetas iframe) y pones alli el codigo de YouTube.
Angel Garo · julio 27, 2012 a las 6:33 pm
Olle asme el favor de pegarme tu el code esque no te entiendo
Juvinao · julio 29, 2012 a las 12:53 am
Pero si existe el fanbox de YouTube :LOL:
Nostromo · noviembre 27, 2012 a las 12:23 pm
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.
Nostromo · noviembre 27, 2012 a las 5:24 pm
Este comentario ha sido eliminado por el autor.
Nostromo · noviembre 28, 2012 a las 9:33 am
Bueno, vamos avanzando ahora lo que me pasa es que ya sale pero sin la pestaña deslizante y sin deslizar claro. gracias.
Hayder Juvinao · noviembre 28, 2012 a las 4:54 pm
Nostromo dime en que blog estas haciendo las pruebas de este truco 😕
Nostromo · diciembre 5, 2012 a las 4:17 pm
http://80ladecadadeoro.blogspot.com.es/ con mi pagina: http://www.facebook.com/80ladecadadeoro
Nostromo · noviembre 28, 2012 a las 5:44 pm
Este comentario ha sido eliminado por el autor.
Shuy Gt · febrero 4, 2013 a las 3:35 am
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
Alberto Franco · febrero 4, 2013 a las 2:29 pm
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 🙂
Shuy Gt · febrero 4, 2013 a las 3:36 am
hola mi pregunta es como puedo cambiarle el color a gris o negro el banner de faceboock? mi emeil es shuygt89@gmail.com
Hayder Juvinao · febrero 5, 2013 a las 11:53 pm
Ya mi amigo te ha ayudado )
jorge guti · marzo 3, 2013 a las 3:47 pm
excelente brother!!!! hice mil intentos hasta que funcionó!!! gracias
Hayder Juvinao · marzo 7, 2013 a las 8:33 pm
Jorge que bueno que te haya funcionado.
Saludos
Daniel P Z · marzo 21, 2014 a las 2:27 am
gracias man me salio de la PTM, muchas gracias!
Hayder Juvinao · marzo 30, 2014 a las 4:44 pm
Daniel gracias por comentar.
Saludos