Facebook FBML Questions

I have a client looking to create a Facebook page very similar to http://www.facebook.com/enchantment

Inside the "Enchantment" page, you can see that there is a list of sub-tabs, "Enchantment, Blurbs, Excerpts, Order". I'm looking to create the same style, but I can't seem to figure out how. I've looked through the code and it appears they're using the "FBML Static" application for the main tab, and there's a ton of javasc开发者_如何学Cript to show and hide the tabs that I highly doubt was all written by hand.

Does anybody have any experience with this? Thanks in advance.

You will have to create a Facebook application via the My Applications link in the developers page. After you have filled in all the of the fields your app page should be up and running.

Now you need to begin developing the actual app on your website (you will have to specify the link in your application settings). Go through the Developer documentation, as they have quite a good documentation.

So, in order to actually create those tabs, its actually very simple, all you have to do is utilize FBMls clicktoshow and clicktohide attributes. Essentially all you need is the following code:

<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Link 1</a>

<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Link 2</a>

<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">Link 3</a>

<div id="nav1">
//content for first tab
</div>

<div id="nav2">
//content for second tab
</div>

<div id="nav3">
//content for third tab
</div>

When Facebook 'imports' this (only via FMBL, I'm unsure if this works with iframe) it conveniently does all the work and converts the above links to something like:

   <a href="#" clicktoshow="nav1" clicktohide="nav2, nav3" class="test" 
onclick="(new Image()).src = '/ajax/ct.php?app_id=7146470109&amp;action_type=3&amp;post_form_id=fd583a515fe76b1d3d300e974aba931d&amp;position=16&amp;' + Math.random();FBML.clickToHide(&quot;app7146470109_nav2&quot;);
FBML.clickToHide(&quot;app7146470109_nav3&quot;);
FBML.clickToHide(&quot;app7146470109_nav4&quot;);FBML.clickToHide(&quot;app7146470109_nav5&quot;);FBML.clickToHide(&quot;app7146470109_nav6&quot;);
FBML.clickToHide(&quot;app7146470109_nav7&quot;);FBML.clickToHide(&quot;app7146470109_nav8&quot;);FBML.clickToShow(&quot;app7146470109_nav1&quot;);return false;">Test</a>

But, you only have to worry about the first part, as Facebook takes care of the second. As you can see it is a fairly straightforward process.

They're probably just capturing the click event, and simply showing and hiding different divs based on that. You can create a static FBML tab, and do something like this inside of it:

<ul>
<li><a id="afoo" href="#foo" onclick="gotoFoo(this); return false;">Foo</a></li>
<li><a id="abar" href="#bar" onclick="gotoBar(this); return false;">Bar</a></li>
</ul>

<div id="foo">
This is content of the foo tab
</div>
<div id="bar" style="display:none;">
This is content of the bar tab
</div>

<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var afoo = document.getElementById('afoo');
var abar = document.getElementById('abar');

var gotoFoo = function(target) {        
  abar.removeClassName('selected');   
  bar.setStyle({display: 'none'});
  afoo.addClassName('selected');    
  foo.setStyle({display: 'block'});
};

var gotoBar= function (target) {
  afoo.removeClassName('selected');   
  foo.setStyle({display: 'none'});
  abar.addClassName('selected');    
  bar.setStyle({display: 'block'});
};

</script>

I haven't created any styles for you, but what the code above does is it hides and shows the "foo" and "bar" divs depending on what you click on. It also adds the class name "selected" to the anchor tag that was clicked on so that you can set some styles to give a visual cue as to which tab is currently active. You'll definitely want to add some styles to pretty this up.

I hope this helps.

You cannot see directly the code since the code written in FBML gets parsed by Facebook before it's delivered to the browser and transformed into HTML; that's why you see a lot of JavaScript.

Actually it doesn't look so complex so I believe it was actually written by hand with JavaScript.