Facebook FBML les Questions

Question

J'ai un client à la recherche de créer une page Facebook très similaire à http://www.facebook.com/enchantment

intérieur de la page « enchantement », vous pouvez voir qu'il ya une liste des sous-onglets, « Enchantement, Blurbs, Extraits , Commande". Je cherche à créer le même style, mais je n'arrive pas à comprendre comment. J'ai regardé le code et il semble qu'ils utilisent l'application "FBML Static" pour l'onglet principal, et il y a une tonne de javascript pour afficher et masquer les onglets dont je doute fortement que tout ait été écrit à la main.

Quelqu'un a-t-il une expérience avec ceci? Merci d'avance.

Answer 1

Vous ne pouvez pas voir directement le code puisque le code écrit en FBML est analysé par Facebook avant d'être livré au navigateur et transformé en HTML; c'est pourquoi vous voyez beaucoup de JavaScript.

En fait, il n'a pas l'air si complexe, donc je crois qu'il a été écrit à la main avec JavaScript.

Answer 2

Ils ne font probablement que capturer l'événement click, et affichent et cachent simplement les différents divs en fonction de cela. Vous pouvez créer un onglet FBML statique, et faire quelque chose comme ça à l'intérieur de celui-ci:

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

Je n'ai pas créé de styles pour vous, mais ce que le code ci-dessus n'est-ce cache et montre la « foo » et "bar" divs en fonction de ce que vous cliquez sur. Il ajoute également le nom de la classe "selected" à la balise d'ancrage sur laquelle vous avez cliqué afin que vous puissiez définir certains styles pour donner une indication visuelle de l'onglet actif. Vous aurez certainement envie d'ajouter quelques styles pour jolies ça.

J'espère que cela aide.

Answer 3

Vous devrez créer une application Facebook via le lien Mes applications de la page des développeurs. Une fois que vous avez rempli tous les champs, votre page d'application doit être opérationnelle.

Maintenant, vous devez commencer à développer l'application réelle sur votre site Web (vous devrez spécifier le lien dans les paramètres de votre application). Parcourez la documentation du développeur, car ils ont une bonne documentation. Par conséquent, pour créer ces onglets, il suffit d'utiliser les attributs FBMls clicktoshow et clicktohide. Essentiellement tout ce que vous avez besoin est le code suivant:

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

Lorsque « importation » Facebook ce (uniquement via FMBL, je ne suis pas sûr si cela fonctionne avec iframe), il ne pratique tout le travail et convertit les liens ci-dessus à quelque chose comme:

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

Mais, vous n'avez qu'à vous soucier de la première partie, car Facebook prend en charge la seconde. Comme vous pouvez le voir, c'est un processus assez simple.