Like Box de Facebook, flotante y con efecto deslizante

El Like Box de Facebook, flotante y con efecto deslizante

Aunque Facebook Slide LikeBox es una extensión de Joomla también podemos usarlo en Blogger. Se trata de un gadget que muestra pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el LikeBox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra al lado derecho de la ventana.

El gadget funciona con jQuery ya que proporciona el efecto deslizante, así que usaremos ese script, un poco de CSS y el Like Box de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:

<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>

Y ahora antes de ]]></b:skin> o en Personalizar | Añadir CSS agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDWtlLtk6h_8dDr4semnhyvNefZjif9d40SWShCok3_7ASRRuXCgdfVZpEgv0KTRMhP3TmuFg1nEG6jQlXHHxxOBpk601-_JSA-B6zY-BhpDrPJB9YWw4p3hyphenhyphens18GQLuNnAuNfj7Bz4eg/) 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
}

Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega el siguiente código:

<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%2Fnombre-de-tu-pagina-de-facebook&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 Like Box de Facebook, así que cambia solo cambia donde se indica el nombre de tu pagina, y listo. No requiere muchos pasos ni mayor trabajo, a menos que quieras realizar modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendras que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás editar la imagen, cambiar las medidas tanto en los estilos como en el Like Box.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitaras nada mas que los tres primeros pasos y podrás tener este Like Box de Facebook, flotante y con efecto deslizante en tu blog.