Facebook FBML 问题

Question

我有一位客户希望创建一个与 http://www.facebook.com/enchantment

在“附魔”页面中，您可以看到有一个子选项卡列表，“附魔、简介、摘录、订单”。我想创造相同的风格，但我似乎不知道如何做。我查看了代码，看起来他们正在使用“FBML Static”应用程序作为主选项卡，并且有大量的 javascript 来显示和隐藏选项卡，我非常怀疑这些选项卡都是手工编写的。

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

Answer 1

您必须通过开发人员页面中的“我的应用程序”链接创建 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&action_type=3&post_form_id=fd583a515fe76b1d3d300e974aba931d&position=16&' + Math.random();FBML.clickToHide("app7146470109_nav2");
FBML.clickToHide("app7146470109_nav3");
FBML.clickToHide("app7146470109_nav4");FBML.clickToHide("app7146470109_nav5");FBML.clickToHide("app7146470109_nav6");
FBML.clickToHide("app7146470109_nav7");FBML.clickToHide("app7146470109_nav8");FBML.clickToShow("app7146470109_nav1");return false;">Test</a>

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

Answer 2

他们可能只是捕获点击事件，并根据该事件简单地显示和隐藏不同的 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”添加到单击的锚标记中，以便您可以设置一些样式来提供有关当前活动选项卡的视觉提示。您肯定会想添加一些样式来美化它。

我希望这有帮助。

Answer 3

您无法直接看到代码，因为用 FBML 编写的代码在传递到浏览器并转换为 HTML 之前会被 Facebook 解析；这就是为什么你会看到很多 JavaScript。

实际上它看起来并没有那么复杂，所以我相信它实际上是用 JavaScript 手工编写的。