En el día de hoy voy a compartí un espectacular estilo para el Fanbox de Facebook, con algo de CSS se logra un cambio radical en el fanbox tradicional que nos proporciona facebook, teniendo como resultado final lo siguiente:
Para obtener este espectacular resultado, tienes que ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar allí lo siguiente:
<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 280px; margin: 5px; padding: 10px 0 10px 10px; width: 280px;"><div style="height: 280px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMil-Trucos-Blogger%2F174666062584624&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
<br />
Lo que está resaltado en color azul, debes reemplazarlo por la URL de tu página de Facebook, y con ello ya tendrás este genial fanbox funcionando en tu web.
Y hemos terminado el tutorial del día de hoy, esperamos que a todos les haya gustado a todos.
15 comentarios
Anonymous · julio 7, 2014 a las 5:08 pm
creo que el nombre debería ser «Espectacular estilo dado al fanbox de Facebook para Blogger», ¿No te parece Juvinao? b-(
Tecno Cultura · julio 7, 2014 a las 5:55 pm
lo coloco en mi pagina y me sale en blanco, ayudame porfa
Agus Hache · julio 7, 2014 a las 9:24 pm
Pasa el link de tu pagina.
Lau Martinez Pardo · julio 7, 2014 a las 8:31 pm
Hola, me gustó mucho pero me sale en blanco en mi blog
Marlon Santos · julio 7, 2014 a las 8:46 pm
igual a mi me quedo blanco
monika r · julio 8, 2014 a las 2:30 pm
a mí también se me queda en blanco
Agus Hache · julio 8, 2014 a las 9:32 pm
Esperen que le pregunto a Hayder
Telesecundarias Veracruzanas · julio 13, 2014 a las 2:17 am
Qué puedo hacer para reducir el tamaño del fanbox
Marlon Santos · julio 15, 2014 a las 4:43 pm
amigo como le isiste para que ya no te quedara blanco
Hayder Juvinao · julio 20, 2014 a las 5:22 pm
El problema debe ser por la URL de sus páginas de Facebook que no terminan en número como la mía, para ello hay un pequeño truco, pronto corregiré la entrada.
Saludos
Adrii Benaovi · julio 20, 2014 a las 7:49 pm
SI NOS LES APARECE, ES PORQUE SUS PÁGINAS TERMINAN LETRAS Y LO DEJAN PEGADO EL «&»
SOLO DENLE UN ESPACIO ENTRE EL LINK Y & ASI COMO EL MÍO:
«http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Entrelibrospage &
A mí no me salía porque lo había dejado pegado, pero por curiosidad le di un espacio y ya me funciona 🙂
Hayder Juvinao · julio 20, 2014 a las 10:29 pm
Adrii muy ingeniosa tu solución |o|
Gracias por comentar
lushy_dix · septiembre 5, 2014 a las 4:02 pm
a mi me sigue saliendo en blanco! ayuda por favor!
Antony eliezer · octubre 3, 2014 a las 11:28 am
Muchas gracias 🙂
Jorge · noviembre 3, 2014 a las 12:28 pm
Cuidado, el script contiene publicidad a http://24work.blogspot.com (aunque no se vea en la página, le estás dando un enlace a esa web que Google utilizará).
Sin publicidad quedaría así:
<div style=»background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 280px; margin: 5px; padding: 10px 0 10px 10px; width: 280px;»><iframe src=»http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMil-Trucos-Blogger%2F174666062584624&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false» scrolling=»no» frameborder=»0″ style=»border:none; overflow:hidden; width:250px; height:258px;» allowtransparency=»true»></iframe>
</div>