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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCLxJdxX_McvchE6gXyEJg6mxp7Uo1NrMklGqtYr5DF1JYpJo-xWhdRj-Atqn1nGUYvGBDmQPiUXCJgumdOtZiEOLpcquh228vlF_hhjQIaLQgoxtPhORGJLTtTDQ2YbyhCEcpH_Pkmps/) 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...
Reina!!! mil gracias, no sabes las ganas que tenía de ponerlo en mi blog! Me funciona a la perfeccion. Muua!
ResponderEliminarA que rico que te funciono besos
ResponderEliminarTengo 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.
ResponderEliminarNo 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
Ya lo consegui,muchas gracias
ResponderEliminarA que bueno que pudieron xd
ResponderEliminarno 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.
ResponderEliminarQue puedo hacer cual es el error?
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
EliminarExcelente!!!! Estaba esperando este tutorial. Ya lo hice y me quedo muy bien. Gracias. Una vez mas estupendo.
ResponderEliminarQue 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/
ResponderEliminarMuchísimas gracias, con tus consejos mi blog se ve cada día mejor!! ^_^
ResponderEliminarque bien me alegro mucho
ResponderEliminarMil gracias!!! me costo, pero funciono ^^
ResponderEliminarhola a mi me ha salido bien solo que dentro de la box me dice
ResponderEliminarCould not retrieve id for the specified page. Please verify correct href was passed in.
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!!!
ResponderEliminarGracias!! Ha quedado de pelos! =)
ResponderEliminarme sale en blanco , ya intente de todo :( ahhhhhhhhhhhhhh yo tmb queria :(
ResponderEliminarA MI TMB ME SALE BLANCOO!!!
ResponderEliminarChicas, 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
ResponderEliminarSe me desactivo la funcion de la Galeria de imagenes.. Tiene algo que ver? porque justo despues que puse esto..
ResponderEliminarcual galería de imagenes?, pero es poco probable
ResponderEliminarhola, he intentado hacerlo pero por alguna razon, sale la pestaña de facebook pero no el contenido :(
ResponderEliminarhttp://enredandomelosdedos.blogspot.com/
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!!!
ResponderEliminarMUXAS 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
ResponderEliminarPues me sale todo, menos el enlace a mi pagina :((((((((((
ResponderEliminarLo conseguiiiiiiiiiiiiiiiiiiiiiiii, mil graciassssssssssssssssssssss
ResponderEliminarGracias! x el tutorial!!! saludos!
ResponderEliminarQue bueno Makamenlocafelina :)
ResponderEliminargracias! me ha sido de mucha utilidad tu tuto :D
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMuchas Gracias por tu gran ayuda y felicidades por tu blog esta super...
ResponderEliminarMe funciono a la perfección, muchas gracias, excelente tutorial.
ResponderEliminarhola! no encuentro esta parte ]]>
ResponderEliminar:(
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
Eliminarno encuentro la parte de elementos de diseño :CC no puedo seguir
ResponderEliminarTienes que ir a tu panel de blogger e ir a diseño :)
EliminarHola quiero agregar un html flotante no necesariamente de facebook, ahh si dice flotante ¿Por qué no flota? gracias.
ResponderEliminarFlotante 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
EliminarHolaa 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 :$
ResponderEliminarla 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
EliminarHola, segui los pasos correctamente, me aparece el fn box deslizante pero no hay nada dentro, osea esta en blanco, porque puede ser? gracias
ResponderEliminarHola 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
ResponderEliminarHola de nuevo si quieres comprobarlo esta es mi direccion del blog.
ResponderEliminarhttp://manel-fernandez.blogspot.com.es/
fuckkkkkk sale en blanco
ResponderEliminarHola 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♥
ResponderEliminara mi no me funciona hago todo como decis pero el cosos ese sale y todo pero mi pagina no se ve :(
ResponderEliminar