Facebook FBML问题

Question

在"Enchantment“页面中，您可以看到有一个子选项卡的列表，"Enchantment，Blurbs，Excerpts，Order”。我想创造同样的风格，但我似乎想不出怎么做。我已经看过代码了，看起来他们在主选项卡中使用了"FBML Static“应用程序，并且有大量的javascript用来显示和隐藏选项卡，我非常怀疑这些都是手工编写的。

有没有人有这方面的经验？提前谢谢。

Answer 1

您必须通过开发者页面中的My Applications链接创建一个Facebook应用程序。在您填写完所有字段后，您的应用程序页面应已启动并运行。

现在你需要开始在你的网站上开发实际的应用程序(你必须在你的应用程序设置中指定链接)。浏览开发人员文档，因为他们有相当好的文档。

因此，为了实际创建这些选项卡，它实际上非常简单，您所要做的就是利用FBMls clicktoshow和clicktohide属性。基本上，您所需要的只是以下代码：

<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>

当Facebook‘导入’这个(仅通过FMBL，我不确定这是否适用于iframe)时，它可以方便地完成所有工作，并将上面的链接转换为以下内容：

   <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>

但是，你只需要担心第一部分，因为Facebook会处理第二部分。正如您所看到的，这是一个相当简单的过程。

Answer 2

你不能直接看到代码，因为用FBML编写的代码在交付给浏览器并转换成HTML之前会被Facebook解析；这就是为什么你会看到很多JavaScript的原因。

实际上它看起来并不复杂，所以我相信它实际上是用JavaScript手写的。

Answer 3

它们可能只是捕获了click事件，并基于此简单地显示和隐藏了不同的div。您可以创建一个静态FBML选项卡，并在其中执行类似以下操作：

<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>

我没有为您创建任何样式，但上面的代码所做的是根据您单击的内容隐藏和显示"foo“和"bar”div。它还将类名"selected“添加到单击的锚点标记中，以便您可以设置一些样式，以提供当前活动的选项卡的可视提示。

我希望这能帮到你。