Static FBMLの使い方

前回は、Facebookアプリを使って
ファンページのコンテンツ（カスタムタブ）を増やす一例を紹介しました。



しかし、様々なFacebookアプリに頼らずとも、
HTMLやCSSの知識がある方なら、「Static FBML」アプリを使って
自分の思うようにカスタムタブを作ることも可能です。

Static FBMLは、Facebookが開発した言語で、
Static Facebook Markup Language（以下、FBML）の略称です。
ファンページに動画などのコンテンツを埋め込んだり、
Facebookの機能を利用できたりするほか、
ほとんどのHTML/CSSも使用可能なため、
カスタムタブを自由にデザインしたり、
アプリケーションを追加したりすることができるようになります。

通常のHPに比べていくつか制限はあるものの、
（例：flashやjavascriptは自動実行できない）
ファンページにおいて、
個性的なページを作るのに非常に有効なものと言えそうです。



以下に、作成方法についてまとめたページをいくつか紹介します。

・Facebookファンページにオリジナルデザインのコンテンツを加える方法｜かちびと.net
　ファンページの作り方から、Static FBMLの追加の仕方、
　さらには海外のStatic FBMLデザインギャラリーや
　無料テンプレートページの紹介もあります。
　
・FBMLでファンページに動画を入れよう｜Social Media Experience
　Static FBMLでYouTube動画を埋め込む方法が解説されています。
　カスタムタブでは＜iframe＞タブが使用できないため、
　通常のWebページのやり方では
　YouTube動画の埋め込みが出来ません。

・ＦＢＭＬを日本語訳しました
　FBMLの技術仕様
　（http://developers.facebook.com/docs/reference/fbml/）を
　日本語化した原稿PDFを配布しています。
　いいねボタンを押すことで、ダウンロードURLが表示されます。



さて、ここからは技術的な話を。

カスタムタブを作成する際、
CSS（スタイルシート）が使用できるのですが、
困ったことにインラインで記述する必要があります。
（例：＜p style="margin:10px;"＞）

ネットで情報を検索すると、
日本語サイトはおろか海外サイトでも間違いが多いのですが、
CSSをベタ書きするとIEではスタイルが反映されません。

また、＜link＞タブで外部からCSSを読み込む形にすると、
"margin"などの一部のスタイルが反映されない現象が発生します。
（Firefoxで確認、他ブラウザ未検証）

SEとしては管理もしにくくて非常にイヤではあるのですが、
現状ではタグにひとつずつインラインでスタイルを設定するのが、
思い通りのデザインを実現するには必要なようです。