Pestaña flotante para Facebook.

Vamos a mostrar como poner con un simple widget, una pestaña flotante para Facebook.
Para esto simplemente tenemos que irnos a:



Diseño / añadir un gadget / HTml- Javascript y añadimos el siguiente código.

ver código 

- Copia este código.

<!-- Menu widget Facebook -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#facebook_div {
width: 300px;
height: 340px;
overflow: hidden;
}
/* right side style */
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 300px;
height: 353px; position: fixed;
right: -305px;
}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;
}
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden; position: static;
height: 300px;
left: -2px; top: -3px;
}
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 300px;
height: 250px;
position: fixed;
left: -305px;
}
#facebook_left img {
position: absolute;
top: -2px;
right: -35px;
}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()
{ jQuery("#facebook_right").hover(function ()
{  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("#facebook_right")
.stop(true, false).animate({   right: -305  }, 500); }); jQuery("").hover(function () {  jQuery(this)
.stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("")
.stop(true, false).animate({   right: -250  }, 500); }); jQuery("")
.hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate(
{   right: -294  }, 500); });});</script><br />

<div id="on"> <div id="facebook_right" style="top: 12%;">
<div id="facebook_div">  
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cgcJYe91pj480OmvrheBBCcuw4xliLnAiP5U78WphFGYD3-f4KSBHUpyInVZbkmf8Gjkwd7UYiruKrXfmmhe4EF4pZFMwrgQ71dp4fcm0puz88YtwjWuywyJkKMf6Df_R5Fg_BvIHVxK/s1600/NBTfacebook_right.png" />  
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=AQUI LA URL DE TU PÁGINA DE FACEBOOK?ref=hl;
width=300&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"  
style="border: none; height: 346px; overflow: hidden; width: 300px;"></iframe>
</div>
</div>
</div>

Ahora vamos a realizar algunos cambios:
lo que tenemos marcado en morado lo tenemos que cambiar por la URl de nuestra página de Facebook
Lo que tenemos marcado en azul es la URl de la Imagen que queremos poner.
En este caso es la imagen que he puesto es la primera, y vosotros podéis poner la que queráis.
Aquí dejo algunas imágenes más por si os gustan más estas.