Para todos los que conocemos la fanbox de facebook esa cajita la cual muestra las personas agradecidas que le hacen click al me gusta por la buena información obtenida gratuitamente en el sitio.la que a muchas personas no le gusta de la forma que se muestra,bueno en el día de hoy les voy a mostrar una cencilla forma de personalizar esa famosa cajita dandole un toque completamente diferente.para lograr esto va a ser con la ayuda de CSS.
Con css le podemos añadir un fondo de alguna imagen o simplemente añadiendole color y mucho mas... también vamos a eliminar lo que a muchas personas no le gusta que es lo que dice ”Plug-in social de Facebook”.
Si el código de la fanbox el height,altura es 240 En la parte del css el height es -20 entonces seria 220 con esto eliminamos lo que esta en la parte de abajo que dice ”Plug-in social de Facebook”
Para el primer ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox {
background-color: #202931;background-image: -moz-linear-gradient(#000, #202931);background-image: -webkit-linear-gradient(#000, #202931);background-image: -o-linear-gradient(#000, #202931);background-image: linear-gradient(#000, #202931);
width:240px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
</style>
Los 000 es el color negro y los 202931 es como el color plateado lo pueden cambiar a sus gustos y así pueden obtener dos tonos si quieren un solo color solo tienen que eliminar uno de los dos y se quedan con un solo color.
Para el segundo ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox1 {
background-color: #0000FF;background-image: -moz-linear-gradient(#000, #0000FF);background-image: -webkit-linear-gradient(#000, #0000FF);background-image: -o-linear-gradient(#000, #0000FF);background-image: linear-gradient(#000, #0000FF);
width:240px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
</style>
Los 000 ceros es el color negro y los 0000FF es el color azul y todo es como les dije anteriormente.
Para el tercer ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox2 {
width:240px;
height:160px;
background: url(http://dl.dropbox.com/u/25944020/images.jpg);
overflow:hidden;
}
div.fanbox iframe {margin:-2px}
</style>
En este solo use una imagen de fondo la cual la marque de color rojo esa la pueden cambiar por la que ustedes quieran.
En los tres ejemplos use el siguiente codigo solo cambiando las class <div class="fanbox"> , <div class="fanbox1"> , <div class="fanbox2">
<div class='fanbox'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/tube-trucos/161206907309924&width=240&height=180&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:180px;" allowtransparency="true"></iframe>
</div>
Lo que esta en rojo lo van a sustituir por su url de facefook si se fijan como les explique lo que esta en amarillo es el ancho 240 y altura 180 y en el css use 20 menos en la altura de 180 a 160 para implementar el codigo en nuestros sitios solo pongan css justo antes de que cierre la etiqueta </head>
o pueden poner el css,los estilos junto con el codigo en un gadget .
Para añadir el codigo en un gadget solo vayan a diseño >> añadir un gadget >> HTML/Javascript >> pegamos los dos codigos y guardamos despues de eso ya van a tener su fanbox personalizada .
Con css le podemos añadir un fondo de alguna imagen o simplemente añadiendole color y mucho mas... también vamos a eliminar lo que a muchas personas no le gusta que es lo que dice ”Plug-in social de Facebook”.
Si el código de la fanbox el height,altura es 240 En la parte del css el height es -20 entonces seria 220 con esto eliminamos lo que esta en la parte de abajo que dice ”Plug-in social de Facebook”
Para el primer ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox {
background-color: #202931;background-image: -moz-linear-gradient(#000, #202931);background-image: -webkit-linear-gradient(#000, #202931);background-image: -o-linear-gradient(#000, #202931);background-image: linear-gradient(#000, #202931);
width:240px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
</style>
Los 000 es el color negro y los 202931 es como el color plateado lo pueden cambiar a sus gustos y así pueden obtener dos tonos si quieren un solo color solo tienen que eliminar uno de los dos y se quedan con un solo color.
Para el segundo ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox1 {
background-color: #0000FF;background-image: -moz-linear-gradient(#000, #0000FF);background-image: -webkit-linear-gradient(#000, #0000FF);background-image: -o-linear-gradient(#000, #0000FF);background-image: linear-gradient(#000, #0000FF);
width:240px;
height:160px;
overflow:hidden;
}
div.fanbox iframe {margin:-1px}
</style>
Los 000 ceros es el color negro y los 0000FF es el color azul y todo es como les dije anteriormente.
Para el tercer ejemplo use el siguiente estilo:
<style type="text/css">
div.fanbox2 {
width:240px;
height:160px;
background: url(http://dl.dropbox.com/u/25944020/images.jpg);
overflow:hidden;
}
div.fanbox iframe {margin:-2px}
</style>
En este solo use una imagen de fondo la cual la marque de color rojo esa la pueden cambiar por la que ustedes quieran.
En los tres ejemplos use el siguiente codigo solo cambiando las class <div class="fanbox"> , <div class="fanbox1"> , <div class="fanbox2">
<div class='fanbox'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/tube-trucos/161206907309924&width=240&height=180&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:180px;" allowtransparency="true"></iframe>
</div>
Lo que esta en rojo lo van a sustituir por su url de facefook si se fijan como les explique lo que esta en amarillo es el ancho 240 y altura 180 y en el css use 20 menos en la altura de 180 a 160 para implementar el codigo en nuestros sitios solo pongan css justo antes de que cierre la etiqueta </head>
o pueden poner el css,los estilos junto con el codigo en un gadget .
Para añadir el codigo en un gadget solo vayan a diseño >> añadir un gadget >> HTML/Javascript >> pegamos los dos codigos y guardamos despues de eso ya van a tener su fanbox personalizada .
