FacebookのFBMLは、私は、クライアントが「エンチャント」ページ内<a href="http://www.facebook.com/enchantment" rel="nofollow">http://www.facebook.com/enchantment</a></p> <p>に非常によく似Facebookページを作成するために探している

Question

に関する質問には、サブタブのリストがあることがわかります、「エンチャント、宣伝文、抜粋、オーダー "。私は同じスタイルを作りたいと思っていますが、どうやってそれを見つけ出すことはできません。私はコードを見て、彼らはメインタブの "FBML静的"アプリケーションを使用しているようだ、私は非常に疑問を手書きで書かれたタブを表示し、非表示にJavaScriptのトンがあります。

誰もがこれに関する経験がありますか？前もって感謝します。

Answer 1

FBMLで書かれたコードは、ブラウザに配信されてHTMLに変換される前にFacebookによって解析されるため、コードを直接見ることはできません。そのため、多くのJavaScriptが表示されます。

実際にはそれほど複雑ではないので、実際にはJavaScriptで手書きされていたと思います。

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

開発者ページの[マイアプリケーション]リンクから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を経て、私はわからないよ）それは便利なすべての作業を行い、何かに上記のリンクに変換like：

<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世代の世話をするため、最初の部分について心配する必要があります。ご覧のとおり、これはかなり簡単なプロセスです。