In this example  we will create 3 buttons. Two of the buttons will open a hidden div from which other navigation options are presented, the third button will be a direct link to a new page. You can view a demo here.

To begin, create the navigation menu. The first button has a hidden div with id ‘button1′ containing 3 sub-menu items and a link to close the box. The second button also has a hidden div but this one has a lot of entires requiring a scroll bar. The third button has no sub-menu and hence no hidden div. 

<ul class="maintabs clearfix">
  <li><a id='button1' href='#'>First Button</a>
      <div id='button1div' class='popup clearfix' style='position:absolute; top:100px; left:65px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="# onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
        </ul>
      </div>
  </li>
  <li><a id='button2' href='#'>Second Button</a>
      <div id='button2div' class='popup clearfix' style='position:absolute; top:100px; left:150px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="#" onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
           <li><a href='page1d.php'>Option D</a></li>
           <li><a href='page1e.php'>Option E</a></li>
           <li><a href='page1f.php'>Option F</a></li>
           <li><a href='page1g.php'>Option G</a></li>
           <li><a href='page1h.php'>Option H</a></li>
           <li><a href='page1i.php'>Option I</a></li>
           <li><a href='page1j.php'>Option J</a></li>
           <li><a href='page1k.php'>Option K</a></li>
           <li><a href='page1l.php'>Option L</a></li>
        </ul>
     </div>
  </li>
  <li><a id='button3' href='anotherpage.php'>Third Button</a></li>
</ul>

Next we need some FBJS to detect when the mouse moves over the navigation links. In this example I have made each hidden div the same size so they can share the code. It would be simple to change this to use a different size/shape/fade for each div if required. The script first determines which object fired the event. It then closes all other hidden divs and fades up the required new div. 

<script>
function mouseaction(evt) {
eventFiredBy_ObjectId = evt.target.getId();
if (eventFiredBy_ObjectId == 'button1') targetId = document.getElementById('button1div');
else if (eventFiredBy_ObjectId == 'button2') targetId = document.getElementById('button2div');
 
//First hide all other divs
if (eventFiredBy_ObjectId != 'button1') document.getElementById('button1div').setStyle({display: 'none'});
if (eventFiredBy_ObjectId != 'button2') document.getElementById('button2div').setStyle({display: 'none'});
 
// then make the new div visible:
if (eventFiredBy_ObjectId != 'button3') {
Animation(targetId).to('height', 'auto').from('0px').to('width', '150px').from('0px').to('opacity', 1).from(0).show().go();
}
}
 
//add event listener to divs (mouseover & mouseout)
document.getElementById('button1').addEventListener('mouseover',mouseaction);
document.getElementById('button2').addEventListener('mouseover',mouseaction);
document.getElementById('button3').addEventListener('mouseover',mouseaction);
 
</script>


Facebook provides a “blind” effect which would prevent the text rolling in the box as it opens. We choose not to use it here since we need the scrollbar on the second hidden div.
 
Below the navigation list you need a div that has enough height to exceed the largest hidden div. This will ensure the entire hidden div will be revealed on the mouseover.

To navigate through the menu, the user will mouse over the tabs to open the sub-menu, if any. The sub-menu will remain displayed until the user mouses over another tab or until they select a link from the sub-menu.

The complete example source code is available for download in a text file here.

There are currently 29 bugs reported against the Facebook image caching mechanism. Some of these problems have been around for over a year, so there is valid reason to be concerned.

Fortunately there is a method you can use that forces Facebook to re-cache your image when calling setFBML.

By appending the current time to the image name, Facebook believes the image to be new and saves it as a new image.

<img src="http://www.mysite.com/images/image.jpg?refresh=<? echo time(); ?>" />

Use this on all your profile box images to ensure you always have valid content displayed.

However, for those application developers who want to go one step further, here is a description of how to support the profile box on the user’s Wall tab using the PHP library.

1. Client Library

First, make sure you have the latest client library. Visit the the Facebook client library wiki page for more information and a link to the download. Note that this library drops support for some old functions such as require_add, so if you haven’t kept your application up-to-date now is the time to do so. The PHP 5 version of the library contains the call you need. If you are using PHP 4 then you need to manually update the library call to look like this:

function profile_setFBML($markup, $uid = null, $profile=”, $profile_action=”, $mobile_profile=”, $profile_main=”) {
return $this->call_method(’facebook.profile.setFBML’, array(’markup’ => $markup,
‘uid’ => $uid,
‘profile’ => $profile,
‘profile_action’ => $profile_action,
‘mobile_profile’ => $mobile_profile,
‘profile_main’ => $profile_main));

2. Reset FBML

For the profile box to appear on the Wall tab you must load the FBML that will appear there. This is done using the same function that was used to load the old-style profile, only now there is a new parameter “profile_main”. In PHP, use the following code to load the profile boxes:

$fbml = "<fb:wide>This is a wide profile box on the Boxes tab.</fb:wide>";
$fbml .= "<fb:narrow>This is a narrow profile box on the Boxes tab.</fb:narrow>";
$fbml_main = "This is the Wall tab profile data";
$result = $facebook->api_client->profile_setFBML(NULL, $user_id, $fbml, NULL, NULL, $fbml_main);
echo "set FBML: result = ".var_export($result,true);


If your return code is NULL, all is well. If not, check the return codes documented on the wiki page.

3. Add to Profile Button

If you want to make it really easy for the user, program an “Add to Profile” button to appear on a canvas page. If the user has not yet added a profile box (on the Boxes or Wall tabs) and the FBML for profile_main was successfully loaded in step 2 then the button will appear. If there is already a profile box displayed, then the button will not appear. The code for the button is simple:

<fb:add-section-button section="profile" />


Note this cannot appear within the dashboard.

That’s it! You should now have the ability to display a profile box on either the Wall tab or the Boxes tab.