Fanbox de facebook flotante y con efecto deslizante para jimdo

Facebook Slide Likebox ahora podemos usarlo en jimdo.

Se trata de un widget 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 post, se encuentra en el lado derecho de la ventana.

 

La caja flotante 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.

 

Lo primero esto en el EN EL HEAD DE TU PAGINA jimdo.

 

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
        <script type="text/javascript">
                    //<![CDATA[
                    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>
    <style type="text/css">
                /*<![CDATA[*/
                .slide_likebox {
                float:right;
                width:288px;
                height:345px;
                background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png)
                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}
                /*]]>*/
    </style>

  <div class="slide_likebox">
    <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
        <div class='likeboxwrap'>
            <span><iframe src=
            "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fdisemuchojimdocom%2F100227320027678&amp;show_faces=true&amp;header=false&amp;stream=false&amp;width=350&amp;height=350&amp;colorscheme=light&amp;border_color=%23AAAAAA#"
            scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:248px; height:300px;background-color:transparent;"></iframe></span>
        </div>
    </div>
</div>

1.- Dirigete aqui https://developers.facebook.com/docs/reference/plugins/like-box/

 

2.-Llena esos datos que te piden y da clic en get code

 

3. Elije la opcion iframe copia este codigo y remplaza por el que esta marcado en rojo en mi codigo.

 

 

 

Te recomendamos elejir este tamaño width:248 height:300, automáticamente te arroja el iframe y lo remplazas por lo que esta de rojo en el codigo.

 

 

Like Box es una versión especial del botón Me gusta diseñado sólo para las páginas de Facebook POR LO TANTO debes tener una pagina no un perfil personal.
Este flotante es para un link de pagina facebook.
aqui esta el head en jimdo
aqui esta el head en jimdo
99 comentarios