El Fanbox de Facebook, flotante y con efecto deslizante

Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en este mismo blog, se encuentra en el lado derecho de la ventana, y aprovecha para darle "Me gusta", si lo deseas.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

1. Entrar en Plantilla | Edición de HTML y antes de </head> pega el siguiente scrip

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


2. Ahora antes de ]]></b:skin> agrega los estilos CSS , si no lo encuentran usen el buscador (Ctrl + F), si aun persiste el problema, prueben dando click en el triángulo  "►" que se encuentra a la izquierda de <b:skin>...</b:skin>.

.slide_likebox { float:right; width:288px; height:345px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mVrxyYm4afP2V1rVcBizCVbxnpBrV80Mh1OAmCv_2fiEYCBGslhKvuGntrPnLxKlT-4Co8h24gIjZlamsXb2aZpyC133_lLSUrxlS_L32dE_MO8N2rtSHlEFYqCOa8XlRj1Yy5T5COk/) no-repeat !important; 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. Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"> <span><div class='likeboxwrap'> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStanThemackiar&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div> </span></div> </div>


Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

Observen el Codigo copiado anteriormente y cambien donde dice "StanThemackiar" (Solo el StanThemackiar) por el nombre de usuario de su pagina de Facebook

¿Como hago para saber el nombre de usuario de mi pagina de Facebook?

Es sencillo, solo devén copiar y pegar lo que este despues del http://www.facebook.com/... (Lo que se encuentra después del / , así como lo muestra la imagen:






















Si les salen otras cosas aparte de su nombre de usuario, no las copien, solo copien lo que salga antes despues del / y antes del ?, asi como se muestra en la imagen: