Ale Hernandez
Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
En este pequeño tutorial les enseñaré a customizar y mejorar la presentación de un Like Box usando CSS.
Olvídate del iframe, aquí usarás FBML.
Reemplaza 194655490581028 por el ID de tu Fanpage (usa Enlace eliminado) y reemplaza también 12 por el número de caras que quieres que aparezcan.
De este modo obtendrás un Like Box en FBML sin diseño.
Con un buen Inspector de elementos como Firebug (Enlace eliminado | Enlace eliminado), irás modificando el CSS hasta obtener el resultado que deseas.
Una vez que hayas modificado las clases, tendrás que guardarlas en un archivo llamado style.css. Yo lo he dejado así:
Sube el style.css a tu hosting. Si no tienes, puedes usar Dropbox.
Una vez arriba, al FBML deberás agregarle el atributo css="Ruta al style.css"
Espero haberme explicado bien. Cualquier duda será atendida :encouragement:
Olvídate del iframe, aquí usarás FBML.
HTML:
<script type="text/javascript" src="http://connect.facebook.net/es_MX/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="194655490581028" stream="0" connections="12" width="400px" height="500px" header="0" logobar="0"></fb:fan>Reemplaza 194655490581028 por el ID de tu Fanpage (usa Enlace eliminado) y reemplaza también 12 por el número de caras que quieres que aparezcan.
De este modo obtendrás un Like Box en FBML sin diseño.
Enlace eliminado
Con un buen Inspector de elementos como Firebug (Enlace eliminado | Enlace eliminado), irás modificando el CSS hasta obtener el resultado que deseas.
Una vez que hayas modificado las clases, tendrás que guardarlas en un archivo llamado style.css. Yo lo he dejado así:
Insertar CODE, HTML o PHP:
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}
.fan_box .full_widget {
background: none; border: none;
}
.fan_box .connections_grid .grid_item {
padding: 0 8px 10px 8px;
padding-top:16px;
}
.grid_item {
opacity: 0.8;
}
.grid_item:hover {
opacity: 1;
}
.fan_box .full_widget .connect_top {
background: url(https://dl.dropbox.com/s/iyhjev0ojo6lipg/background.png);
border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
}
.fan_box .connections {
border-top: none;
padding:15px 0 0;
color: [B]Enlace eliminado[/B]
font: 21px Calibri;
text-align: center;
text-shadow: 0px 1px 4px [B]Enlace eliminado[/B]
}
.fan_box .connections span.total {
color: [B]Enlace eliminado[/B]
}
.fan_box .connections_grid .grid_item .name {
color: [B]Enlace eliminado[/B]
font-size: 11px;
}
.fan_box .profileimage {
margin: 0;
}Sube el style.css a tu hosting. Si no tienes, puedes usar Dropbox.
Una vez arriba, al FBML deberás agregarle el atributo css="Ruta al style.css"
HTML:
<fb:fan profile_id="194655490581028" stream="0" connections="12" width="400px" height="500px" header="0" logobar="0" css="https://dl.dropbox.com/s/fj6fv47a8gu8nbs/style.css"></fb:fan>Enlace eliminado
Espero haberme explicado bien. Cualquier duda será atendida :encouragement: