Like Box De Facebook Flotante y Desplegable a La Derecha

Autor:

Comparte

Dale +1

1 Estrellas2 Estrellas3 Estrellas4 Estrellas5 Estrellas (1 votos.)
Loading ... Loading ...
Califica

PREGUNTAR
Pregunta

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.

Hacemos los siguiente:

  • Pegamos el siguiente código en el “Head” de nuestra página

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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.

1
2
3
4
5
6
7
<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:
1
2
3
4
5
6
7
8
9
<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&amp;show_faces=true&amp;header=false&amp;stream=false&amp;width=200&amp;height=348&amp;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.
 

Resultado: Puedes ver funcionando el recurso AQUI.

 
Éxitos!

Leer más sobre: >

Recursos relacionados

Comentarios Usando Facebook


Like Box De Facebook Flotante y Desplegable a La Derecha

1 Comentario + Comentar

  • seo madrid 11 agosto, 2012 a las 7:28 AM

    I have learn a few just right stuff here. Certainly value bookmarking for revisiting. I wonder how much attempt you place to make this kind of wonderful informative site.

SÍguenos en facebook

RSS Últimas Preguntas en el Foro

Donar

WEBMASTERCV

Suscribete

Ingresa tu e-mail: