FBMLでファンページに動画を入れよう

  • このエントリーをはてなブックマークに追加

Static FBMLとは何か

Static FBMLという用語を聞いたことはありますか?これは、Facebookが開発した言語で、ファンページをカスタマイズするために必要なものです。

Static FBMLは、Static Facebook Markup Language(以下、FBML)の略称です。FBMLを使えば、ファンページを自由にデザインしたり、アプリケーションを追加したりすることができるようになります。

ファンページをカスタマイズする場合、ほとんどのHTML/CSSが使用できるので、通常のWebページと同じように作成することができます。ただし、挿入する要素によっては、FBMLを使用しなければいけません。

例えば、ファンページの中にYouTubeの動画を設置して、再生できるようにする場合、YouTubeが生成する埋め込みコードを使用しても表示することはできません。

そこで、今回はSocial Media ExperienceのファンページにYouTubeの動画を設置する方法を例にして、FBMLの使い方について説明します。

追記:ソースコードを修正しました

2010.10.15更新
この記事を投稿してから、読者の方から「動画が表示されない」というご指摘をいただきました。
掲載したソースコードを見なおしたところ、WordPressの禁則処理設定でクオーテーション(’、”)の一部が全角に変換されていました。これが原因で正しく動作しなかったようです。
現在は、<pre></pre>タグを利用してソースコードを表示しています。そのままコピーアンドペーストしていただければ、お試しいただけます。

ファンページの制限

最初にファンページの制限について説明しましょう。「せっかく作ったのに思ったように動かなかった」ということにならないように、ページを作る前にファンページやFBMLの制限を確認しておきましょう。

  • FBMLはファンページでのみ使用できる
  • ファンページで使用できる言語はHTML、CSS、FBMLのみ
  • Javascript、Flashファイルをロードすることはできるが、自動的に開始することはできない
  • つまり、ファンページでは、PHPやPythonなどで書いたプログラムを動作させることはできません。またJavascriptやFlashの再生も自動的に開始することができません。これらはユーザーがクリックして初めて動作します。よって、Javascriptを使用したLanding Page OptimizationやFlashを使用したメニューなどは極力避けた方がよいでしょう。

    FBMLの方言

    ファンページ内では、HTML/CSSが使用できますが、要素によってはFBMLを使用しなければいけません。例えば、YouTubeなどのFlashビデオを埋め込むには、通常使用する<embed>ダグではなく、<fb:swf>というタグを使用します。

    その他のFBMLの詳細についてはFacebook Markup Language (FBML) – Facebook Developersを参照してください。

    ファンページにFBMLを追加する

    では実際にFBMLを使ってファンページをカスタマイズしていきましょう。

    まずはFacebookにログインし、Static FBMLのページを開きます。

    遷移先のページに「スタティックFBML」というアイコンがありますので、これをクリックします。

    FBMLを追加する

    次に左メニューの「自分のファンページに追加」をクリックします。

    fbml_03

    ポップアップメニューが表示され、管理しているファンページの一覧が表示されますので、「ページに追加」ボタンをクリックします。

    fbml_02

    以上で、自分のファンページ内にFBMLページを追加できるようになりました。引き続き、Facebookにログインしたままで作業を行ないます。

    追加したFBMLを確認する

    では、実際に追加されているか確認してみましょう。

    ファンページを追加するアカウントのページを表示します。左メニューにある「広告とファンページ」をクリックします。「広告とファンページ」が表示されていない場合は、「他を見る」をクリックすると表示されます。

    管理しているファンページの一覧が表示されますので、編集するファンページを選び「ファンページを編集」をクリックします。

    使用できるアプリケーション一覧が表示されます。その中にFBMLのアプリケーションが追加されています。

    FBMLにYouTubeの動画を追加する

    FBMLにある「編集」をクリックします。タイトルとコード記述のためのテキストエリアが表示されます。

    タイトルに任意の文字列を入力します。この例では「ようこそ」というタイトルを入力しました。

    次に、テキストエリアにYouTubeの動画を挿入するためのコードを記述します。

    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://www.youtube.com/v/xxxxxxxxxxx'
    imgsrc='http://img.youtube.com/vi/xxxxxxxxxxx/1.jpg' width='480' height='385' />
    

    xxxxxxxxxxx」の部分にはYouTubeで生成されたIDを入力します。例えば、Social Media Experienceが作成した「Let’s Share Amazing Experiences!」のURLはhttp://www.youtube.com/watch?v=6Sptfy03Vbwとなっています。この場合、IDは6Sptfy03Vbwとなります。

    先ほどのFBMLにこのIDを入れると、以下のようになります。

    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://www.youtube.com/v/6Sptfy03Vbw'
    imgsrc='http://img.youtube.com/vi/6Sptfy03Vbw/1.jpg' width='480' height='385' />
    

    テキストエリアに上記コードを記述したら、「変更を保存」ボタンをクリックします。
    コードの記述は以上で終了です。

    表示内容を確認する

    では、正しく表示されることを確認してみましょう。

    Facebookのファンページを開くと、先程追加した「ようこそ」というタブが表示されるようになっています。

    タブが見つからない場合は「>>」タブをクリックしてみましょう。プルダウンメニューが表示され、その中に「ようこそ」というページがあります。

    動画の画面は表示されていますか?

    なお、YouTubeの動画はFlashで作成されています。つまり、FBMLの制限により、自動的に再生させることはできません。表示された画像をクリックすると再生が始まります。

    少しだけカスタマイズしてみる

    では、最後に少しだけカスタマイズしてみましょう。

    今の状態では画面が大きいので、少し小さくしてみます。

    <fb:swf>内のwidthとheightの値を変更すると画面の大きさを変更することができます。ここでは、全体を7割の大きさ(350 x 277)にしてみましょう。

    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://www.youtube.com/v/6Sptfy03Vbw'
    imgsrc='http://img.youtube.com/vi/6Sptfy03Vbw/1.jpg' width='350' height='277' />
    

    コードを修正したときは忘れずに「変更を保存」をクリックしましょう。

    再度表示してみると指定通りのサイズに縮小されたことがわかります。

    このままでは左寄りになっているので中央に配置するように変更してみましょう。HTML/CSSが使用できるので、<div>タグで中央に寄せます。

    <div style="text-align:center;">
    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://www.youtube.com/v/6Sptfy03Vbw'
    imgsrc='http://img.youtube.com/vi/6Sptfy03Vbw/1.jpg' width='350' height='277' />
    <div>
    

    これで、指定したとおりにYouTubeの動画が挿入されました。実際のSocial Media Experienceのファンページのようこそページはここから確認することができます。

    ファンページをイメージ通りに作成して魅力あるものにするためには、FBMLは必須になります。Social Media Experienceも今後、どんどんファンページをカスタマイズしていきます。要望があれば、その方法も順次公開していく予定です。

    あこがれのファンページ

    さて、参考までにFBMLを効果的に使っているファンページを4つ紹介しましょう。

    Eco-Artware.com
    Starbucks
    Coca-Cola
    無印良品

    どのファンページもさすが、企業の個性があらわれていて素敵ですね。皆さんもまずはこの記事を参考に動画を載せてみてください。

    追記:ソースコードを修正しました

    この記事を投稿してから、読者の方から「動画が表示されない」というご指摘をいただきました。

    掲載したソースコードを見なおしたところ、WordPressの禁則処理設定でクオーテーション(’、”)の一部が全角に変換されていました。これが原因で正しく動作しなかったようです。

    現在は、<pre></pre>タグを利用してソースコードを表示しています。そのままコピーアンドペーストしていただければ、お試しいただけます。

    • このエントリーをはてなブックマークに追加

    SNSでもご購読できます。