24/7 Soporte | ÁREA DE CLIENTES
contacto tienda

Nav movil

WebmasterCV

Like Box De Facebook Flotante y Desplegable a La Derecha

 

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:

Diseñador y Programador Web en el equipo de Webmastercv. Tutoriales para Jimdo en WebmasterCV DESIGN.

Escribir comentario

Comentarios: 1
  • #1

    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.