Facebook FBML 问题答案

【问题标题】：Facebook FBML QuestionsFacebook FBML 问题
【发布时间】：2010-11-29 00:23:40
【问题描述】：

我有一个客户希望创建一个与http://www.facebook.com/enchantment 非常相似的 Facebook 页面

在“附魔”页面内，您可以看到有一个子选项卡列表，“附魔、Blurbs、Excerpts、Order”。我正在寻找创建相同的样式，但我似乎无法弄清楚如何。我查看了代码，似乎他们正在对主选项卡使用“FBML 静态”应用程序，并且有大量的 javascript 来显示和隐藏我高度怀疑是手工编写的选项卡。

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

【问题讨论】：

标签： javascript facebook fbml markup

【解决方案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&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 会处理第二部分。如您所见，这是一个相当简单的过程。

【讨论】：

【解决方案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”添加到单击的锚标记中，以便您可以设置一些样式以提供有关当前处于活动状态的选项卡的视觉提示。你肯定想添加一些样式来美化它。

我希望这会有所帮助。

【讨论】：

无需 Javascript 即可在上述 Facebook 页面中创建标签。看我的回答。

【解决方案3】：

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

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

【讨论】：

无需 Javascript 即可在上述 Facebook 页面中创建标签。看我的回答。