En un artículo anterior relacionado al plugin "Like Box" de Facebook comentaba de lo útil que es éste plugin a la hora de ganar mayor cantidad de Fans para nuestra página en Facebook.
En esta oportunidad vamos a ubicar el FanBox a la derecha y que éste se mantenga flotante en la página, pero que al pasar el cursor sobre la imagen de referencia se despliegue y se muestre el FanBox.
- Pega el siguiente código en el "Head" de tu página web:
<style type="text/css">
#likebox_div{
width:196px;
height:353px;
overflow:hidden;
}
#likebox_right{
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:196px;
height:353px;
position:fixed;
right:-200px;
}
#likebox_right img{
position:absolute;
top:120px;
left:-35px;
}
#likebox_right iframe{
border:0px solid #3c95d9;
overflow:hidden;
position:static;
height:360px;
left:-2px;
top:-3px;
}
</style>
- Ahora pegamos el siguiente código en la sidebar (si quieres que se muestre en todas las páginas) o también en cada página en el cual deseas que se muestre el FanBox.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script><script type="text/javascript">
jQuery(document).ready(function(){ jQuery("#likebox_right").hover(function(){ jQuery(this).stop
(true,false).animate({right: 0}, 500); },function(){ jQuery("#likebox_right").stop(true,false).animate({right: -200}, 500); });
jQuery("likebox").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("likebox").stop
(true,false).animate({right: -303}, 500); }); });
</script>
- Justo a continuación pegamos lo siguiente:
<div id="activo">
<div id="likebox_right" style="top: 17%;">
<div id="likebox_div">
<img src="http://u.jimdo.com/www38/o/sa1c23512e426e90b/img/i36114fd42df15eb0/1340077369/std/image.png" alt="" /> <iframe src=
"http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/WebmasterCV&show_faces=true&header=false&stream=false&width=200&height=348&colorscheme=light"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;background-color:transparent;"></iframe>
</div>
</div>
</div>
* Debes cambiar "WebmasterCV" por el nombre de tu página.
ESCRITO POR: Hans H. Aguirre Gómez
Diseñador y Programador Web en el equipo de Webmastercv. Tutoriales para Jimdo en WebmasterCV DESIGN.
Últimos Temas
WEBMASTERCV forma parte del programa Jimdo Experts de Jimdo desde 2012.
Escribir comentario
Oscar (lunes, 31 octubre 2016 14:22)
Hola Hans, el diseño de tu página es espectacular. Yo estoy empezando sin conocimientos en una de dulces, tortas, etc para mi mujer que la voy a enlazar con su fan page del face. Ya puse un like box, en el inicio, pero me interesó este ya que no ocupa espacio. El problema es que copiando los códigos como indicas y cambiando WebmasterCV por "areadulce" sale la pestaña flotante, pero al abrir, dice "Error: No es una URL válida de Facebook.". ¿qué será?. Gracias
Saludos.
Josue Camargo (domingo, 15 octubre 2017 09:32)
Al momento de poner los codigos me cambia las letras con acentos á é í ó ú o la ñ
me aparecen caracteres raros
ya le agregué la linea
AddDefaultCharset utf-8
ayudó, pero sigo aun con el problema, ¿que hay que hacer?
https://www.facebook.com/avenitta.quaker (sábado, 04 agosto 2018 13:00)
<style type="text/css">
#likebox_div{
width:196px;
height:353px;
overflow:hidden;
}
#likebox_right{
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:196px;
height:353px;
position:fixed;
right:-200px;
}
#likebox_right img{
position:absolute;
top:120px;
left:-35px;
}
#likebox_right iframe{
border:0px solid #3c95d9;
overflow:hidden;
position:static;
height:360px;
left:-2px;
top:-3px;
}
</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script><script type="text/javascript">
jQuery(document).ready(function(){ jQuery("#likebox_right").hover(function(){ jQuery(this).stop
(true,false).animate({right: 0}, 500); },function(){ jQuery("#likebox_right").stop(true,false).animate({right: -200}, 500); });
jQuery("likebox").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("likebox").stop
(true,false).animate({right: -303}, 500); }); });
</script><div id="activo">
<div id="likebox_right" style="top: 17%;">
<div id="likebox_div">
<img src="http://u.jimdo.com/www38/o/sa1c23512e426e90b/img/i36114fd42df15eb0/1340077369/std/image.png" alt="" /> <iframe src=
"http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/WebmasterCV&show_faces=true&header=false&stream=false&width=200&height=348&colorscheme=light"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;background-color:transparent;"></iframe>
</div>
</div>
</div>