Fanbox de facebook flotante y deslizante para cualquier web o blog

Llego la hora de crear un fabuloso fanbox flotante y con efecto deslizante el cual estará colocado la parte lateral derecha, es un muy buen recurso ya que aparte de que el efecto lo hace ver elegante siempre tendrás informados a tus visitantes de que tu web o blog están en facebook



En concreto lo que vamos a hacer es una pestaña lateral desplazadora la cual al pasar el cursor sobre ella mostrara el fanbox de nuestra pagina de Facebook, para que el desplazamiento se vea elegante vamos a utilizar jQuery, para ser mas precisos la librería 1.5.2

Así que vamos a empezar:
1.- Lo primero que vamos a hacer es instalar/poner la librería jQuery y el script del mismo, ya que esto nos dará el efecto de desplazamiento y deslizamiento. Recuerden que esto es un archivo .js y un script, lo vamos a pegar justo antes de la etiqueta "</head>"

<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(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

2.- Ya instalada la librería y el script vamos a pasar con el segundo paso que es darle el diseño css, aquí usaremos la posición fixed y lo alinearemos en la parte lateral derecha justo como se muestra a continuación. Recuerden que esto es un estilo CSS, en el caso de Blogger lo vamos a pegar antes de "]]>"

.s_likebox {
float:right; /* Indicamos que flotara en la parte derecha*/
width:288px; /* Ancho */
height:345px; /* Alto */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BsnVddsX3NJ8AUinbT57BKlDNyoJNrSX2GXz0WkaoaWm1ltRiYnh2XZ3JMjIGLJk1yPWEBKSk0c7kefvqCcpLPXdmLSOpHOZBtDEyC5ECnMWHwAKDrygrTZHonBd_81cL16Cv127lBg/) no-repeat !important; /* El fondo de la pestaña, en este caso utilizamos una imagen */
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}

3.- Ya pegado el estilo y diseño css de nuestro slide pasaremos al ultimo paso... que es mostrar el slide mediante HTML, cabe mencionar que si pegan este HTML en una pagina en especifico solo se vera en esa pagina, para que es slide se vea en todas las paginas yo recomiendo pegar el HTML justo antes de "</body></html>"

<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'> Aquí pon el código de tu likebox de facebook</div></span></div></div>

Dato importante: En la parte: "Aquí pon el código de tu fanbox de facebook" deberemos pegar el código que nos otorga facebook a la hora de crear nuestro fanbox.

Con esto concluye este articulo, el cual es un excelente recurso por si queremos innovar un poco nuestra web, cabe mencionar la gran ayuda que nos proporciono jquery para hacer posible ese efecto de desplazamiento, alguna duda favor de comentarla.