Mini Site On Facebook Fanpage

 This is a screenshot of facebook fanpage minisite. It is placed on a static FBML tab. You can add image gallery, contact forms and many other features to this tab site.
 

To make a mini-site on the static FBML tab of your fanpage page you can use this basic code

<!-- navigation elements -->

<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a>

<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a>

<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>

<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>



<!-- Content to display when user clicks on the Home tab -->

<div id="nav1">

Homepage text

</div>



<!-- Content to display when user clicks on the Specials tab -->

<div id="nav2" style="display: none;">

Specials text

</div>



<!-- Content to display when user clicks on the Locations tab -->

<div id="nav3" style="display: none;">

Locations text

</div>



<!-- Content to display when user clicks on the About tab -->

<div id="nav4" style="display: none;">

About text

</div>

This is just the basic code to make such a site. By adding a style sheet it can be made better.

Here is an example style sheet to make the menu tabs.

<style type="text/css">

#body
{
background-color:yellowGREEN;
}

#coolmenu{
margin: 0;
    padding: 12px 0 12px 0;
  
}

#coolmenu a{
    text-decoration: none;
    font-weight: none;
    background:black;
    color: silver;
    padding:8px 10px;
    margin: 0 1px;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color:brown;
color: white;
}

</style>

Internet explorer doesn't support <style type="text/css"> so you may need to add external stylesheet like this

 <link ref="stylesheet" type="text/css" href="http://yourdomain.com/style.css" />

Some other screenshots

A contact form embedded on fanpage

A popup dialog box

A Like to reveal page

Video Tab