Como Insertar El Fanbox De Facebook Con Efecto Deslizante En Una Web

04.01.2014 15:13

Hola comunidad, en este articulo voy a explicar como insertar el ya conocido Fanbox de Facebook, pero esta vez situado en un lugar muy llamativo y con un efecto deslizante en sus páginas web (pueden ver el ejemplo que esta a la derecha de esta página). Este tutorial me lo han solicitado muchas personas, así que espero que les sirva mucho. Recuerden compartirlo :)

NOTA: El Fanbox solo funciona con Páginas creadas en Facebook, no con perfiles personales :v.

 

 

1. No importa la plataforma con la que estés creando tu sitio web, este widget se añade mediante un simple código por lo que se puede insertar en gestores de contenido como Blogger, Webnode, Wix, Emiweb, Jimdo, etc.

2. Si aun eres muy nuevo y no sabes como se pone un código como estos, puedes checar el tutorial donde explico como hacerlo en las plataformas mas usadas. Haz clic aquí

Este el código que debes insertar en tu web, tendremos que modificar una linea para poder lograr que en el fanbox se muestre nuestra página de Facebook.

<style> #flotante1 { position:fixed; top:100px; right:-250px; float:right; width:288px; display:block; padding:0; z-index:1002; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } #flotante1:hover, #flotante2:hover, #flotante3:hover { right:0px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.likeboxwrap { margin-top:-5px; margin-left:-45px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; } </style>  <div id='flotante1'> <img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/> <div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpáginadefacebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe> </div></span></div></div>


3. Ahora lo unico que tenemos que hacer es remplazar lo que esta de verde por lo que aparece al final en la dirección de nuestra Página de Facebook, es decir SOLO LO QUE ESTA DESPUES DE LA DIAGONAL: www.facebook.com/

Ej:
http://www.facebook.com/todopatuweb

Entonces quedaría la linea así:

http%3A%2F%2Fwww.facebook.com%2Ftodopatuweb&

OJO: si tu página de facebook NO tiene dirección propia (osea se ve mas larga y contiene números o letras adicionales...)

Ejemplo: http://www.facebook.com/pages/todopatuweb/230549305505

Lo que harias seria insertar esto:
<style> #flotante1 { position:fixed; top:100px; right:-250px; float:right; width:288px; display:block; padding:0; z-index:1002; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } #flotante1:hover, #flotante2:hover, #flotante3:hover { right:0px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.likeboxwrap { margin-top:-5px; margin-left:-45px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; } </style>  <div id='flotante1'> <img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/> <div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftodopatuweb%2FLos números que aparecen al final de tu direcciónaquí&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe> </div></span></div></div>

 

4. Recuerda que puedes borrar el texto que aparece cuando pegas el código en tu web al final de código (Leer más: http://www.todopatuweb.net/news/fanbox-de-facebook-deslizante-para-tu-web-en-webnode/)


Bueno una vez que hayas hecho todo esto,  guarda los cambios, publica y listo.... veras como aparece en tú pagina web este increíble widget :D
Espero que te haya servido, cualquier duda, deja tus comentarios abajo.

Por favor, comparte el articulo, me ayudaría muchísimo :)
 

 

HTML Comment Box is loading comments...

Ta bonito el widget... ¿No?

Suscribete a lo bueno

    

Hey Webmaster :) no te pierdas los contenidos

Pon tu e-mail y recibe gratis los últimos artículos: