Modificar likebox de facebook

**josegallardo** · 19/05/2011, 12:08

Necesitaba ayuda, sobre como podria modificar el boton de me gusta de esta likebox

Facebook

querria o hacer el boton de me gusta mas grande, o cambiarlo por una magen prediseñada, pero facebook me lo da en formato iframe para insertar en mi web y no se que hacer

**mijailr** · 19/05/2011, 16:07

No uses el Iframe, usa el XFBML
Luego puedes cambiar los estilos con CSS y la propiedad !important
Y finalmente añadir la URL de tu CSS a XFBML añadiendo al final ?1 por ejemplo:

Nota: Me parece que solo funciona con el fanbox.

Código:

css="http://www.mijailr.com/facebook_box.css?1"

Quedando el XFBML de esta manera

por ejemplo):

Código HTML:

<<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="219899864691083" css="http://www.mijailr.com/facebook_box.css?1" stream="false" show_faces="false" header="false" connections="20" width="220"></fb:fan>

Y con este CSS queda modificado como lo tengo en mi blog:

Código:

.fan_box .full_widget {
	background: none; border: none;
}
.fan_box .connections_grid .grid_item {
	padding: 0 8px 10px 8px;
}
.connect_top{
background-color:#5C799B !important;
color:#000;
}
.name_block{
color:#FFF !important;
}
.connect_widget_text_summary{
color:#FFF !important;
}
.name_block a{
color:#FFF !important;
}
.fan_box .connections .connections_grid {
	padding-top:16px;
}
.fan_box .connections {
	border-top: none;
	padding:15px 0 0;
	color: #676767;
	font: italic 12px Georgia;
	text-align: center;
}
	.fan_box .connections span.total {
		color: #676767;
	}

.fan_box .connections_grid .grid_item .name {
	color: #676767;
	font-size: 11px;
}
.fan_box .profileimage {
	margin: 0;
}

**josegallardo** · 19/05/2011, 18:17

Sabrias el codigo de CSS, para agrandar el boton de me gusta o remplazarlo por una imagen?

**mijailr** · 19/05/2011, 19:04

Bueno, depende de lo que quieras hacer, pero por darte un ejemplo:

Código:

.connect_widget_like_button .liketext{
border:none;
width:100px;
height:30px;
background-color:·C4A66B;
background-image:none;
}

Solo por darte un ejemplo...

**josegallardo** · 19/05/2011, 21:13

Funciono todo perfectamente, ademas me he dado cuenta de lo util que es el CSS

**mijailr** · 20/05/2011, 03:09

De nada... cualquier otra duda no dudes en preguntar.

**josegallardo** · 22/05/2011, 16:20

Esto que me pasa es raro, pongo este codigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>

</script>
<fb:like-box href="http://www.facebook.com/pages/Top-Webs/222361691108103" css="http://www.mijailr.com/facebook_box.css?1" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</body>
</html>

Pero el css, no surge efecto

http://www.xalemupu.dns-privadas.es/likebox.php

Por lo visto el comando fb:like, no acepta esta forma de enlazar el css, pero claro si pongo el fb:fan no va la redirección y es un dilema jeje

**mijailr** · 22/05/2011, 21:02

jajajaja...
Si, eso es un problema, el <fb:fan> es el único que permite cambiar el CSS, pero no tiene disponible la obtención de datos por medio de FB.Event.subscribe.

No te queda otra opción que dejar el diseño predeterminado.

**Edgard Gomez Sennovskaya** · 17/10/2011, 05:02

lo unico que se puede hacer es un hack para poner los DIVs encima con los graficos que quieres y usar pointer-events pero hay que recordar que es contra las politicas de facebook