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>
<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Í:
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>
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.
0 comentarios:
Publicar un comentario