Imagen de bienvenida

[ChaloFerrada]

Hola,

Hace unos días me pidieron que administrara un fanpage que estaba medio de lado en mi trabajo. El tema es que subí una imagen de bienvenida en la cual le pido a los usuarios hacer click en el botón like, a esto quisiera agregar una segunda imagen que aparezca después de que la gente haga esta acción. Es posible hacer esto?

Lo que hice para ingresar la primera imagen es lo siguiente

Código:

<style>
#contenedor{ width:520px; height: 500px; background: url("url de la imagen") no-repeat;}
#link1 a{ background:#C1CC8C; display:block; height:38px; line-height:38px; width:196px; border: 1px solid #fff; float:left; margin:202px 0 0 36px; color:#fff; font-weight:bold; text-decoration:none; text-align:center; font-size:14px}

#link1 a:hover{ background:#fff; color:#000 }

#link2 a{ background:#C1CC8C; display:block; height:38px; line-height:38px; width:196px; border: 1px solid #fff; float:right; margin:202px 20px 0 ; color:#fff; font-weight:bold; text-decoration:none; text-align:center; font-size:14px}

#link2 a:hover{ background:#fff; color:#000 }
</style>

<div id="contenedor">

</div>
<div style="font-size:10px; text-align:right; padding:5px; background:#eee;">
<a href="http://url descarga bases" target="_blank">Descargar</a> Bases
</div>
<fb:comments xid="124327520923174" numposts="20" width="520"></fb:comments>

Gracias

[Debi]

Una vez que la persona le da click al Me Gusta, va directamente al Muro.
Si queres llevarlos a otro lado podés poner un link en la imagen de bienvenida.

Por cierto, la pestaña FBML lleva menos código, se puede configurar una pestaña de forma más sencilla, ejemplo:

<img width="Xpx" height="Xpx" border="0" src="URL de tu imagen aca" title="titulo de tu imagen aca" alt="titulo de tu imagen aca" />

Saludos!

[ChaloFerrada]

Gracias, pero tengo la impresión que si se puede (puedo estar MUY equivocado). Tengo este ejemplo http://www.facebook.com/?ref=home#!/gatoradechile en donde uno ingresa en la pestaña "gatorade" y que luego de hacer click en el botón "Like" cambia la imagen pero se mantiene en la misma pestaña ("gatorade").

Ahora, no se si esto es así por que la pestaña esta como Iframe o como FBML

Otra vez gracias

[Debi]

Mmm ya entendí la pregunta. Investigando un poco encontré esto:

Para que aparezca un contenido para los fans y otro para los que no lo son, hay que implementar el siguiente código en la pestaña:


<div id="wrapper">
<fb:visible-to-connection>
AQUÍ LO QUE VERÁN LOS FANS
<fb:else>
<div id="non-fans">
AQUÍ LO QUE VERÁN LOS NO FANS
</div>
</fb:else>
</fb:visible-to-connection>
</div>

Si te sirve, avisame así sabemos que este Tema ha sido útil!

[ChaloFerrada]

Debi,

Estuve probando con el código que me indicaste, pero no funcionó como tal.
Lo que sucedió fue que aparecieron las 2 imágenes en cuestión, una bajo la otra, pero en ningún caso resultó que apareciera una para los "fans" y otra para los "no-fans".
Intenté poner una URL en lugar de una imagen (para probar si había algún cambio) pero no resultó nada. =(

Lo que utilicé fue una mezcla de los 2 códigos FBML que me explicaste, pero el resultado fue el que ya te expliqué.

<div id="wrapper">
<fb:visible-to-connection>
<div id="fans">
<img width="Xpx" height="Xpx" border="0" src="URL" title="Título" alt="Título" />
</div>
<fb:else>
<div id="non-fans">
<img width=img width="Xpx" height="Xpx" border="0" src="URL" title="Título" alt="Título" />
</div>
</fb:else>
</fb:visible-to-connection>
</div>

En el caso de las URL usé <href = "URL" />

Gracias

[Debi]

Lo probé y me funciona, te digo cómo escribí el código:

<div id="wrapper">
<fb:visible-to-connection>
<img width="492" height="776" border="0" src="http://www.vitadelia.com/images/2007/04/chocolate-dipped-strawberry.jpg" />
<fb:else>
<div id="non-fans"><img width="450" height="339" border="0" src="http://www.cuartoderecha.com/archivos/post_1279.jpg" /></div>
</fb:else>
</fb:visible-to-connection>
</div>

Las imagenes son dos que encontré por ahí en Google, obviamente suplís el contenido por lo que queres poner vos.
Cosas a tener en cuenta: A la hora de testear el código lo tenes que hacer con un usuario que no sea fan ni admin de la pagina, sino siempre vas a ver las dos imagenes, porque sos el admin...

Lo que hice fue en FF configurar la pestaña FBML y en IE loguearme con un usuario común y entrar a la fanpage a probar que funcione :)
Podés ver mi ejemplo en: http://www.facebook.com/locosporelchocolate uso esa fanpage para hacer pruebitas

Saludos!

[ChaloFerrada]

Debi,

MUCHAS GRACIAS ;)

había funcionado originalmente, pero como lo revisé como administrador, no me percaté de que solo se podía ver bien cuando no eres ni admin. ni fan.

De nuevo, muchas gracias

[Debi]

Por nada!! Me alegra haber ayudado :)

[unix86]

Iniciado por Debi

Lo probé y me funciona, te digo cómo escribí el código:

<div id="wrapper">
<fb:visible-to-connection>
<img width="492" height="776" border="0" src="http://www.vitadelia.com/images/2007/04/chocolate-dipped-strawberry.jpg" />
<fb:else>
<div id="non-fans"><img width="450" height="339" border="0" src="http://www.cuartoderecha.com/archivos/post_1279.jpg" /></div>
</fb:else>
</fb:visible-to-connection>
</div>

Las imagenes son dos que encontré por ahí en Google, obviamente suplís el contenido por lo que queres poner vos.
Cosas a tener en cuenta: A la hora de testear el código lo tenes que hacer con un usuario que no sea fan ni admin de la pagina, sino siempre vas a ver las dos imagenes, porque sos el admin...

Lo que hice fue en FF configurar la pestaña FBML y en IE loguearme con un usuario común y entrar a la fanpage a probar que funcione :)
Podés ver mi ejemplo en: [url]http://www.facebook.com/locosporelchocolate[/url] uso esa fanpage para hacer pruebitas

Saludos!

Excelente! me preguntaba lo mismo...Gracias por compartir!

[Debi]

Por nada Unix86!

[Luis10]

Iniciado por Debi

Lo probé y me funciona, te digo cómo escribí el código:

<div id="wrapper">
<fb:visible-to-connection>
<img width="492" height="776" border="0" src="http://www.vitadelia.com/images/2007/04/chocolate-dipped-strawberry.jpg" />
<fb:else>
<div id="non-fans"><img width="450" height="339" border="0" src="http://www.cuartoderecha.com/archivos/post_1279.jpg" /></div>
</fb:else>
</fb:visible-to-connection>
</div>

Las imagenes son dos que encontré por ahí en Google, obviamente suplís el contenido por lo que queres poner vos.
Cosas a tener en cuenta: A la hora de testear el código lo tenes que hacer con un usuario que no sea fan ni admin de la pagina, sino siempre vas a ver las dos imagenes, porque sos el admin...

Lo que hice fue en FF configurar la pestaña FBML y en IE loguearme con un usuario común y entrar a la fanpage a probar que funcione :)
Podés ver mi ejemplo en: http://www.facebook.com/locosporelchocolate uso esa fanpage para hacer pruebitas

Saludos!

Muy buen ejemplo, pero no se como quitar el espacio grande que queda en la parte de "NO FANS", me sale la imagen abajo del todo dejando un gran espacio.

Un saludo.