FBMLでイベント告知ページを作ろう

2010-10-20 10:00 (更新：2021-01-05 08:41)深谷歩Facebook

FBMLをさらに使い倒す

「FBMLでファンページに動画を入れよう」では、FBMLタグを利用してFacebook（フェイスブック）のファンページにYouTube動画を埋め込む方法を紹介しました。今回は、イベント（ライブ）の告知をするページを例に、複数のFBMLのタグを組み合わせてページをカスタマイズする方法を紹介します。すぐに使えるサンプルコードを掲載しているので、実際にコードを試しながら読んでみてください。

どんな要素を含めるか？

さて、イベントの告知をする場合、どんな情報を載せる必要があるでしょうか。今回は、音楽ライブイベントを想定しているので、以下のような要素を掲載することにしました。

イベントの基本情報（開催日時、場所など）
音源の試聴
コメント
イベントの基本情報へのリンク
イベントの基本情報は、イベントタブを使って行ないます。イベントタブは、ユーザーのページでもファンページでも作成することができます。それ以外は、ファンページにFBMLでタブを設定して作成します。それぞれの作成方法を順を追って説明していきましょう。

イベントタブにイベントの基本情報を登録する

イベント名や開催日時、場所などのイベントの基本情報は、Facebookに用意されているイベントタブを使って設定します。まずはFacebookにログインします。ユーザーのページまたはファンページを開きます。どちらもデフォルトで「イベント」というタブが表示されているのでそれをクリックします。「イベント」タブが表示されていない場合は、「>>」タブをクリックすると表示されます。もし「>>」タブ内にもない場合は、「+」タブをクリックすると「イベント」タブを追加することができます。

「+ イベントを作成」ボタンをクリックします。以下の画面が表示されるので、それぞれの項目に任意の値を設定します。

項目を入力したら、「イベントを作成」ボタンをクリックします。以下のような画面が表示されればイベント作成は成功です。

この画面が表示されているページのURLは以下のような表記になっています。 <http://www.facebook.com/event.php?eid=104376472962441> 赤字の部分がeidと呼ばれる固有のイベントIDです。以降で作成する告知ページからこのイベントの基本情報のページにリンクを貼る場合、このイベントIDが必要になります。これでイベントタブにイベントの基本情報を登録することができました。

告知用のFBMLページを作成する

次に、告知用のFBMLページを用意します。 FBMLページをファンページに設置する方法は、「FBMLでファンページに動画を入れよう」でも紹介しましたが、ここでもう一度簡単に説明します。なお、スタティックFBMLアプリケーションはファンページ専用ですので、まだファンページをお持ちでない方は、先にファンページを作成する必要があります。 Facebookにログインし、このページにアクセスします。「スタティックFBML」というアプリケーションがあるのでクリックします。

スタティックFBMLのページが表示されます。左メニューの「自分のファンページに追加」をクリックします。自分が管理しているファンページ一覧が表示されますので、「ページに追加」ボタンをクリックします。自分のファンページに戻り、左メニューの「ファンページを編集」をクリックすると、アプリケーション一覧が表示され、その中に「FBML」がインストールされていることが分かります。「編集」をクリックすればFBMLページが作成できるようになります。

試聴用のmp3ファイルを組み込む

ライブでどんな曲が演奏されるのか伝えるために、試聴用mp3ファイルを設置しましょう。 <fb:mp3 />タグを使用すれば、外部サーバに置いてあるmp3ファイルを読み込んで再生できます。サンプルコードは以下のようになります。

<fb:mp3 src="http://socialmediaexperience.jp/mp3/Milky_Way_edit.mp3" title="Milky Way" artist="The Anazaworld" album="Strawberry Love" />

赤字の部分は以下の主なパラメーターの項を参照しながら任意の文字列に変更してください。

主なパラメータ

src	外部サーバに置いてあるmp3ファイルのURLを指定します
title	曲名
artist	アーティスト名
album	アルバム名

※2010.10.17現在、title、artist、albumのパラメーターに日本語（DBCS）を使用すると、再生プレイヤーに表示されないようです。では、実際にFacebookファンページにコードを書いてみましょう。

上記のようにFBMLテキストエリアに記述したら、「変更を保存」ボタンをクリックします。 Facebookファンページに戻り、作成したページを確認すると以下のように表示されます。もしこのように表示されない場合は、mp3ファイルのURLやmp3ファイルのパーミッションを確認してみましょう。

コメント機能を付ける

設置した試聴用mp3ファイルやイベントに対してのコメントを受け付けられるように、コメント機能を付けてみましょう。使用するFBMLタグは<fb:comments></fb:comments>です。サンプルコードは以下のようになります。

<fb:comments xid="smexperience_comments" canpost="true" candelete="false" ></fb:comments>

※赤字の部分は任意の文字列に変更してください。

主なパラメータ

canpost	true OR false	コメントの投稿を許可する場合はtrue、コメントの投稿を許可しない場合はfalse
candelete	true OR false	投稿の削除を許可する場合はtrue、許可しない場合はfalse

では、実際にFacebookファンページにコードを書いてみましょう。先ほど<fb:mp3 />タグで追加したmp3ファイルの後に付け加えると以下のようになります。

上記のようにFBMLテキストエリアに記述したら、「変更を保存」ボタンをクリックします。 Facebookファンページに戻り、どのように表示されるか確認しましょう。以下のように表示されましたか？

イベントへのリンクを設置する

次にイベントへの誘導を図るため、最初に作成したイベントの基本情報のページへのリンクをFBMLページに設置しましょう。<fb:eventlink></fb:eventlink>を使用します。サンプルコードは以下のようになります。

<fb:eventlink eid="104376472962441"></fb:eventlink>

※赤字の部分は「イベントタブにイベントの基本情報を登録する」の項で設定したイベントページのURLに表示されるイベントIDに変更してください。では、実際にFacebookファンページにコードを書いてみましょう。以下のようになります。

忘れずに「変更を保存」ボタンを押しましょう。では実際にどう表示されるか確認してみましょう。以下のように表示されましたか？

上から順番に試聴用mp3、コメント機能、イベント情報へのリンクが表示されました。

見た目をカッコよくしよう

これで要素を作成することができました。でも、これだけではただ単に並べただけで、それぞれの機能が詰まってしまっているので、HTML/CSSで少し調整してみましょう。あくまで一例ですので、自由ににカスタマイズしてください。 [code] <div style="color:black;background-color:#ff8c00;font-size:16px;width:500px;height:1em;padding:10px;text-align:center;"> <strong>Social Media Experience's Halloween Creepy Live 2010</strong> </div> <div style="width:500;height:150px;font-size:12px;text-align:left;"> こんな曲が演奏されます <fb:mp3 src="http://socialmediaexperience.jp/mp3/Milky_Way_edit.mp3" title="Milky Way" artist="The Anazaworld" album="Strawberry Love" /> </div> <div style="text-align:left;"> <fb:comments xid="smexperience_comments" canpost="true" candelete="false" > </fb:comments> </div> <div style="text-align:right;height:30px;"> <fb:eventlink eid="104376472962441"></fb:eventlink> </div> [/code] このサンプルコードを使用すると以下のように表示されます。