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
Comentarios: 99
  • #99

    Andrés (jueves, 17 septiembre 2015 19:09)

    Ya solucioné el problema. Para quienes les sirva aún, no hay que reemplazar todo el codigo de rojo..únicamente el nombre de la pagina "%2Fdisemuchojimdocom%2F100227320027678&amp;" por el de sus paginas y el ID de su pagina (que siempre serán números), quedaría así:

    %2Fnombredesupagina%2FacaelIDdesupagina&amp;

    Espero les sirva!!

  • #98

    Andrés (jueves, 17 septiembre 2015 18:38)

    El Like-Box ya no esta disponible en facebook, como se puede hacer con la "Page Plugin" que es la manera actual que ofrece facebook de compartir la pagina en las web?

  • #97

    David (domingo, 30 agosto 2015 02:24)

    hola tengo una consulta, como lo coloco si tengo mas de uno

  • #96

    Cruz (viernes, 08 mayo 2015 16:33)

    Buen día, pasando por su tutorial "http://www.disemucho.net/2012/07/30/fanbox-de-facebook-flotante-y-con-efecto-deslizante-para-jimdo/" Hago los pasos ni no puedo insertar el codigo ke me genera facebook, ya que dice que ya cambio y quitaron esa opcion y sale otra diferente y es pegar dos fragmentos de codigo lo cual no me sale el iframe. Ay alguna otra forma de hacerlo con este nuevo metodo de facebook?

    Saludos. Ojala pudieran ayudarme por favor.

  • #95

    Tandilfullchat (martes, 04 noviembre 2014 11:47)

    Gracias muy buenos los codigos que ofrecen para los sitios web. Saludos!

  • #94

    CARLOS PONCE (viernes, 17 octubre 2014 18:08)

    hola muchas gracias por la ayuda ya casi tengo listo mi sitio visiten http://www.estacionmix.jimdo.com

  • #93

    nesin alvarado bedoya (sábado, 12 julio 2014 18:39)

    bacan

  • #92

    drextutoriales (viernes, 25 abril 2014 19:05)

    Gracias Me Sirvio De Mucho Ahora Mi Pagina La Tengo Totalmente editada

  • #91

    reivasolutions (miércoles, 02 abril 2014 08:53)

    Está genial muchas gracias

  • #90

    servilogex (martes, 18 febrero 2014 10:08)

    y para hacer lo mismo con google + y tambien con twitter se puede? o no?

  • #89

    soundpartymx (viernes, 31 enero 2014 22:30)

    Algo debo estar haciendo mal, me sale la caja en blanco que debo corregir???

  • #88

    ROGELIO (jueves, 23 enero 2014 12:33)

    Se asume que el codigo del FAN PAGE, se pega en el body (que esta contenido dentro del HTML de la pagina web..Aunque sale en blanco...

  • #87

    tucyberclick (sábado, 18 enero 2014 17:25)

    Muchas gracias me sirviò mucho :)

  • #86

    jesús (jueves, 16 enero 2014 11:40)

    gracias Esthela, ya tengo creada mi pagina web en facebook, espero que me ayudes con el código.

  • #85

    Esthela Duche (jueves, 16 enero 2014 10:09)

    Crea tu pagina en faceboolk aqui https://www.facebook.com/pages/create/

  • #84

    yoreparotarma (miércoles, 15 enero 2014 14:55)

    amiga esthela gracias por responder pero tengo una duda y espero que me ayudes como creo una pagina de facebook porque quiero que en mi pagina de gimdo pueda mostrar esta esta herramienta del like Box.
    espero tu ayuda, gracias.

  • #83

    Esthela Duche (miércoles, 15 enero 2014 14:30)

    Hola el 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 a usted le sale en blanco porque esta agregando un link personal y este es para un link de pagina facebook. SALUDOS CORDIALES disemucho.net

  • #82

    yoreparotarma (miércoles, 15 enero 2014 14:11)

    amigos el fanbox me sale en blanco debe ser porque estoy mal en la direccion de mi facebook que es la siguiente https://www.facebook.com/jesus.coronel.526, como deberia poner el codigo, espero su ayuda.

  • #81

    dante (lunes, 06 enero 2014 15:09)

    https://www.facebook.com/Renoproductionsoficial pongo este link en el fanbox de facebook y me sale en blanco

  • #80

    john Jairo (viernes, 27 diciembre 2013 23:09)

    Gracias :D

  • #79

    jota1395 (jueves, 26 diciembre 2013 01:58)

    Como lo coloco en mi foroactivo?

  • #78

    juventudasdenaccion (lunes, 16 diciembre 2013 10:26)

    Yo cambio por el nombre de mi facebook pero salelacajitaen blanco ayuda :(

  • #77

    Carlos Peñafiel (lunes, 18 noviembre 2013 11:17)

    Tiene algunos errores cuando ingreso a una pestaña de mi pagina donde tengo puesto el boton flotante, automáticamente me manda a la parte inferior de mi pagina y no me deja ver la cabezera.

  • #76

    thesamanhd (viernes, 08 noviembre 2013 07:32)

    Existe un mismo codigo pero en vez de facebook, que sea para Twitter?

  • #75

    proteccioninfatil (miércoles, 30 octubre 2013 15:47)

    me sale el gatget pero vacio
    alguien me puede dar los paso para llegar a la ID faceboock perdon por mi ignorancia GRACIAS

  • #74

    Poemas y Poesias (domingo, 06 octubre 2013 09:06)

    Disculpen mi ignorancia pero no veo en los códigos el fragmento que indique (disemuchojimdocom%2F100227320027678) podría ser mas especifico por favor me seria de mucha ayuda gracias.

  • #73

    pantanyxd (domingo, 01 septiembre 2013 17:24)

    Excelente amigo me sirvio *-*

  • #72

    djpipetutoriales (domingo, 01 septiembre 2013 13:24)

    para introducir el head hay que borrar todo lo que tengo en el head

  • #71

    nicholasoftwares (lunes, 19 agosto 2013 23:40)

    No entendi como Hacer para q aparesca tu pagina de fb

  • #70

    radioventasaraujocom (domingo, 11 agosto 2013 21:03)

    hola me puedes ayudar no se como encontrar mi id de facebook

  • #69

    camilo (jueves, 01 agosto 2013 08:43)

    hola que tal hize todo tal cual esta escrito pero no me sale nada sale el recuadro como en tu pagina pero dentro sale todo blanco ,nada de nada lo tengo en mi pafina para que lo puedas ver scamdescargas.jimdo.com

  • #68

    Follaland (sábado, 27 julio 2013 16:06)

    me pueden ayudar no me sirver mi nombre es https://www.facebook.com/pabloandres.vareladias pero no me sale ni mi foto cuando lo pongo ayuda plis

  • #67

    lysafisica (martes, 16 julio 2013 06:11)

    Hola estela... intente agregar esta forma que compartes de tu fanbox y:
    1) se me desconfiguro la pag el modelo de la plantilla quedo extraño
    2) Si coloque la caja flotante; pero me apareció tu fanbox en facebook y me gustaría que apareciera la de mi pag en facebook.
    Puedes ayudarme con eso?

  • #66

    surcamarillo (lunes, 15 julio 2013 15:53)

    disculpa no m mueestra mi pagina web segun yo la direccion en lugar de lo q aparece arriba es suroeste.de.guanajuato y le pongo eso pero no puedo acceder
    solamente con tu direccion sale

  • #65

    rodericraft (viernes, 12 julio 2013 09:12)

    Madre mia que noobatos que sois tan facil és seguir los pasos

  • #64

    angeleshermosos (sábado, 29 junio 2013 22:18)

    perfecto amigo graxias funciona a la perfección

  • #63

    iglesiasembradoresdedios (jueves, 27 junio 2013 17:59)

    buenas tardes amigos me sale en blanco mi pestaña que puedo hacer?

  • #62

    Rosa Flores (miércoles, 26 junio 2013 21:08)

    Ve a este enlace y allí te pedira los datos de tu fan page y automáticamente te dara el IFRAME que necesitas para insertarlo en tu web.
    https://developers.facebook.com/docs/reference/plugins/like-box/

    <a href="http://www.marthasophia.com/">Florerias en el DF</a>

  • #61

    Mirella Nataly Lucero Venegas (jueves, 06 junio 2013 13:22)

    Me sale la ventana del facebook peroo la pantallita solo es blanca?? xq?? ...puede ser xq estoy en el trabajo y todo esta bloqueado,.. aunq en mic elular tampoco sale :(

  • #60

    Pruebas9 (jueves, 09 mayo 2013 15:26)

    Hola, he probado el código en mi web de pruebas y he notado que desde que incluí el Fanbox de Facebook con tu código baja el scroll nada más acceder a la web hasta la sección de contenido, ¿sabes cuál podría ser el problema?

    Nota: Incluí el Fanbox sólo en la página de inicio y con una página de Facebook aleatoria (y es donde único sucede este problema).

  • #59

    Coro Franciscano (lunes, 06 mayo 2013 12:42)

    por cierto este error que me sale en el widget/HTML Invalid widget: HTML1
    Error 400.....no me deja modificarlo ni eliminarlo

  • #58

    Coro Franciscano (domingo, 05 mayo 2013 20:45)

    por cierto este error que me sale en el widget/HTML Invalid widget: HTML1
    Error 400.....no me deja modificarlo ni eliminarlo

  • #57

    Coro Franciscano (domingo, 05 mayo 2013 20:42)

    Paz y bien.
    Me gusta esta aplicación, de hecho hay utilidad en ella, yo cree la page fans en facebook y luego la enlace con mi blog, asi que los que dan me gusta en el fanbox, automáticamente reciben cada actualización del blog, el problema es que haciendo pruebas y pruebas, el segundo código el que se pega en una widget/html me manda error y bloquea la aplicación....que podre hacer.....saludos y muchas bendiciones........este el blog.....http://vidaconsagradacentroamerica.blogspot.com

  • #56

    Jeremy Bryan Caycho Vera (martes, 30 abril 2013 23:27)

    como hago para poner el boton del facebook a la derecha , asi como la que tienes en esta pagina ▬>

  • #55

    movies3gp (sábado, 27 abril 2013 16:36)

    Hola bueno , esta bueno pero a mi no me funciona me podrias enviar un video explicandomelo

  • #54

    Centrifugal Juicer (domingo, 21 abril 2013 06:05)

    This informative article was in fact just what I was in search of!

  • #53

    Armando Armendariz Soto (sábado, 20 abril 2013 22:13)

    la mayoria no le entendimos , remplazamos lo que dices por nuestro nombre de pagina y no cambia se pone en blanco :S ya trate poniendo el nombre solo, el nombre con los numeros que el tuyo tiene
    , el link completo y nada :S

  • #52

    Isaías Hernández Carrasco (domingo, 14 abril 2013 17:01)

    No me aparece mi facebook solo el icono pero vacío que pasaaaaa, gracias alguna persona que me ayude por favor gracias.

  • #51

    thupadre (viernes, 05 abril 2013 21:33)

    oye estela el disemuchojimdocom%2F100227320027678 lo teenemos que borrar y remplazarlo con el url de nuestra pagina de facebook o el nombre de nuetra pagina

  • #50

    jsala (martes, 02 abril 2013 12:50)

    por mas que sigo las instrucciones y sustituyo la linea disemuchojimdocom%2F100227320027678 por el nombre de mi facebook. NO me sale, solo el cuadro en blanco me sale en el cuadro de facebook en un costado. alguna ayuda