Facebookページ作成に挑戦・その2(HTMLとCSSでデザイン)

2011年2月14日更新
Facebookページのタブは、2011年3月11日以降はiframeで作るように変わります。
この記事で紹介した方法は、それ以後は使えなくなります。
今後はiframeでFacebookページを作るようにしてください。

スタティックFBMLは、基本的にはHTMLとCSSで作っていくことができます。
今日はその方法を紹介します。

1.HTMLの使い方

スタティックFBMLには、一部の要素を除いて、通常のHTMLを入れることができます。

たとえば、スタティックFBMLの内容として、以下のように入力したとします。

<h2>●●のページにようこそ</h2>
<p>●●のページにようこそいらっしゃいました。</p>
<p><a href="http://blog.○○○.com/">ブログ</a>もよろしくお願いします。</p>

すると、HTMLの各要素が通常通りにレンダリングされ、h2／p／aの各要素が出力されます。
a要素はリンクとして正しく動作します。
実際に上記のページを表示すると、以下のようになります。

なお、img要素を使って画像を表示することもできます。
Facebookにアップロードした画像や、外部のサーバーにある画像を使うことができます。
ただし、外部の画像を使う場合、ファイルを差し替える際に注意が必要になります（詳細は後述）。

2.CSSの使い方

HTMLとCSSを組み合わせることもできます。
その際には、以下の2つの方法のどちらかを使います。

2-1.インラインスタイルシートを使う

HTMLの要素にstyle属性を入れて、インラインスタイルシートを指定することができます。
たとえば、以下のように書けば、文字を赤色にすることができます。

<p style="color : red;">この部分は赤字になります。</p>

2-2.外部CSSファイルを使う

スタティックFBMLの内容として、外部CSSファイルを参照するためのlink要素を入れることもできます。
ただし、FacebookにはCSSファイルを置く場所はないので、自分のサーバーにCSSファイルをアップロードしておきます。

たとえば、以下のような内容の外部CSSファイルを作り、自分のサーバーにアップロードするとします。
そして、そのCSSファイルのアドレスが、「http://www.○○○.com/mystyle.css」になるとします。

h2 {
    font-size : 1.5em;
    padding-left : 10px;
    border-left : 5px solid #3b5998;
    border-bottom : 1px solid #3b5998;
}

また、スタティックFBMLの内容として、以下のように入力するとします。

<link rel="stylesheet" type="text/css" href="http://www.○○○.com/mystyle.css" />
<h2>●●のページにようこそ</h2>
<p>●●のページにようこそいらっしゃいました。</p>
<p><a href="http://www.h-fj.com/blog/">ブログ</a>もよろしくお願いします。</p>

すると、h2要素に外部CSSが適用され、以下のような表示になります。

2-3.style要素は使えない

ここまでで述べたように、インラインスタイルシートと外部CSSファイルを使うことはできます。
ところが、スタティックFBMLにstyle要素を入れることはできません。
style要素を使うと、Internet Explorerでstyle要素が認識されない問題が生じます。

3.外部ファイルを使う場合の注意

外部の画像ファイルやCSSファイルを使うと、その後にタブを初めて表示する時点でファイルがFacebook側でキャッシュされ、次回以降はキャッシュが使われるようになっています。
そのため、画像ファイルやCSSファイルの内容を修正してアップロードしなおしても、その修正はすぐには反映されません。

修正をすぐに反映させるには、画像ファイルやCSSファイルのアドレスの後に、「?v=バージョン番号」のようなパラメータを付けます。
そして、ファイルを差し替えるたびに、バージョン番号の数値を上げるようにします。

たとえば、外部CSSファイルとして、「http://www.○○○.com/mystyle.css」を使うとします。
この場合、最初にファイルをアップロードした後で、スタティックFBMLに以下のような行を入れます。

<link rel="stylesheet" type="text/css" href="http://www.○○○.com/mystyle.css?v=1.0" />

その後に外部CSSファイルを修正して、アップロードしなおしたとします。
この時点で、上のlink要素を書き換えて、バージョン番号を変えます。
たとえば、以下のようにして、バージョン番号を1.1にすると良いです。

<link rel="stylesheet" type="text/css" href="http://www.○○○.com/mystyle.css?v=1.1" />

お知らせ