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&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;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

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

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 «&amp»

SOLO DENLE UN ESPACIO ENTRE EL LINK Y &amp ASI COMO EL MÍO:

«http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Entrelibrospage &amp

A mí no me salía porque lo había dejado pegado, pero por curiosidad le di un espacio y ya me funciona 🙂

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&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false» scrolling=»no» frameborder=»0″ style=»border:none; overflow:hidden; width:250px; height:258px;» allowtransparency=»true»></iframe>
</div>

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *