Facebook FBML Вопросы

Question

У меня есть клиент, который хочет создать страницу в Facebook, очень похожую на 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&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

Они, вероятно, просто фиксируют событие 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>

Я не создал для вас никаких стилей, но код, приведенный выше, скрывает и показывает div "foo" и "bar" в зависимости от того, на что вы нажимаете. Он также добавляет имя класса «selected» к тегу привязки, по которому щелкнули, так что вы можете установить некоторые стили, чтобы дать визуальную подсказку, какая вкладка активна в данный момент. Вы определенно захотите добавить несколько стилей, чтобы придумать это.

Надеюсь, это поможет.

Answer 3

Вы не можете видеть непосредственно код, так как код, написанный на FBML, анализируется Facebook, прежде чем он доставляется в браузер и преобразуется в HTML; вот почему вы видите много JavaScript.

На самом деле он не выглядит таким сложным, поэтому я считаю, что он был написан вручную с помощью JavaScript.