Crear menú / tabs en pagina facebook (fbml)

Puedes colocar un pequeño menu en tu pagina facebook para mostrar diferente informacion sin necesidad de salir de la pestaña fbml.

lo primero que debes hacer es colocar la aplicacion FBML a tu pagina facebook, para luego poder colocar el codigo.


ESTE ES EL CÓDIGO BÁSICO PARA CREAR TABS:
<ul>
<li><a href="index.html" clicktoshow="1" clicktohide="2, 3, 4">PRIMERO</a></li>
<li><a href="about.html" clicktoshow="2" clicktohide="1, 3, 4">SEGUNDO</a></li>
<li><a href="services.html" clicktoshow="3" clicktohide="1, 2, 4">TERCERO</a></li>
<li><a href="contact.html" clicktoshow="4" clicktohide="1, 2, 3">CUARTO</a></li>
</ul>

<p style: padinn-top
<div id="1" >
CONTENIDO DE PRIMERO
</div>
<div id="2" style="display:none;">
CONTENIDO DE SEGUNDO
</div>
<div id="3" style="display:none">
CONTENIDO DE TERCERO
</div>
<div id="4" style="display:none">
CONTENIDO DE CUARTO
</div>

Y QUEDARA ASÍ:


Como observaras le falta que le den estilo.

Ahora les paso a mostrar uno mas elaborado:

<div style="width:520px; height:400px; background:#000000 ;font-family:Arial, Helvetica, sans-serif;
font-size:18px;text-align:center; padding-top: 20px;color:#FFFFFF;">
<ul>
<li style="list-style:none; display:inline; margin:0 7px;"><a href="index.html" clicktoshow="1" clicktohide="2, 3, 4"><img src="http://img54.xooimage.com/files/1/1/9/1-2318654.png" /></a></li>

<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />

<li style="list-style:none; display:inline; margin:0 7px;"><a href="about.html" clicktoshow="2" clicktohide="1, 3, 4"><img src="http://img51.xooimage.com/files/9/c/3/2-2318661.png" /></a></li>

<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />

<li style="list-style:none; display:inline; margin:0 7px;"><a href="services.html" clicktoshow="3" clicktohide="1, 2, 4">
<img src="http://img54.xooimage.com/files/c/8/e/3-2318672.png" /></a></li>

<img src="http://img50.xooimage.com/files/a/d/f/menuseparator-22853ce.png" alt="" width="5" height="20" />

<li style="list-style:none; display:inline; margin:0 7px;"><a href="contact.html" clicktoshow="4" clicktohide="1, 2, 3"><img src="http://img50.xooimage.com/files/e/e/e/4-2318686.png" /></a></li>
</ul>
<br><br>
<center>
<div style="background: url(http://img52.xooimage.com/files/c/f/0/simplewood-2318301.jpg); no-repeat left top; width:400px; height:180px; padding-top:100px;padding-right:20px;">
<div id="1" >
CONTENIDO DE PRIMERO
</div>
<div id="2" style="display:none;">
CONTENIDO DE SEGUNDO
</div>
<div id="3" style="display:none">
CONTENIDO DE TERCERO
</div>
<div id="4" style="display:none">
CONTENIDO DE CUARTO
</div>
</div></center>
</div>

Y QUEDARA ASI:



LO VERDE ES LO PRINCIPAL PARA EDITAR.. PERO LES RECOMIENDO QUE LO EDITEN A SU GUSTO, DE LA FORMA QUE DESEEN. TÓMENLOS COMO EJEMPLO PARA CREAR LOS SUYOS.



Las preguntas que soliciten respuesta hazlas en nuestra pagina Facebook
 
Trucos Facebook | Trukibook © 2014
Powered by Trukibook - FB Me Gusta pop up