Facebookページ(旧ファンページ)作成~FBMLを使えるようにするまでの流れ

Facebookページ(旧ファンページ)作成~FBMLを使えるようにするまでの流れ

Posted at January 31,2011 12:55 AM
Tag:[Facebook, FBML]

Facebook(フェイスブック)でファンページを作成し、作成したファンページでFBML(FaceBook Markup Language)を使えるようにするまでの手順を紹介します。

FBMLはMTML(Movable Type Markup Language)、つまりMTのテンプレートタグと同じようなものです。ネットで検索して手順を調べたところ、一番最初のページがリニューアルされているようでした。ということで、紹介するのは2011年1月30日現在の情報です。

注:Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。

蒲生さん率いる「Facebookファンページガイドブックプロジェクト」に参加させて頂けることになりましたので、このエントリーはそのとっかかりです。

1.ファンページの作成

ファンページを作成するには、Facebookのアカウントをもっていることが必要です。アカウントを持っている場合、ファンページ作成のページへ移動。

ファンページ作成のページ
ファンページ作成のページ

作成したいカテゴリをクリックすれば入力フォームが開くので、任意の名称を入力して「利用開始」をクリック。名称にはいくつかの制約があるようで、「利用開始」をクリックしたときにNGとなる場合があります。

ファンページ作成のページ

これでファンページができあがりました。

TestFBML
ファンページ

ファンページのURLは、25名を超えるファンがいればURLを変更することができます。その情報はヘルプセンターにあります。

ヘルプセンター

2.ファンページでFBMLを利用する

注:Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。

ファンページでFBMLを利用するためには、「スタティックFBML」というFacebookアプリケーションをファンページに追加します。このアプリケーションを加えることで、FBMLが使えるボックスを追加することができます。追加したボックスは、ファンページにある「ウォール」「写真」「ディスカッション」などのタブと並んで表示されます。

ファンページ

「スタティックFBML」をファンページに追加するには、ファンページ左メニューの「ファンページを編集」をクリック。

ファンページ

左メニューの「アプリ」をクリック。

ファンページ

アプリケーション一覧が表示されるので、「スタティックFBML」の「アプリを追加する」をクリック。

アプリケーション一覧

これで「スタティックFBML」がファンページで利用できるようになります。画面が更新されない場合はリロードしてください。

3.FBMLを書いて表示してみる

続いて、「スタティックFBML」を使ってFBMLを入力し、ファンページに表示してみましょう。アプリケーション一覧の「スタティックFBML」の「アプリケーションへ移動」をクリック。

アプリケーション一覧

これでスタティックFBMLの編集画面が表示されます。

スタティックFBMLの編集画面

任意のFBMLをテキストエリアに入力して「変更を保存」をクリック。「ボックスのタイトル」はファンページのタブ名になります。ここでは以下のようなYouTube動画を埋め込むfb:swfタグを入力します。

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

ファンページを確認するには、左上のファンページ名のリンクをクリック。

ファンページへのリンク

これでファンページに「FBML」タブが追加されました。

ファンページ

「FBML」タブをクリックすれば、さきほど入力したFBMLが表示されます。

ファンページのタブ

動画の場合、画像を一度クリックすれば再生可能な状態になります。

追加したページ

4.スタティックFBMLのボックスを追加する

スタティックFBMLのボックスを追加したい場合は、3項の編集画面を表示した左下にある「FBMLボックスをもう一つ追加」をクリック。

編集画面

これでボックスが追加されました。

編集画面

追加したボックスは「スタティックFBML」のアプリケーションがひとつ追加された状態となります。編集方法はひとつめの「スタティックFBML」と同様です。

アプリケーション一覧画面

5.スタティックFBMLのタブを削除した場合

スタティックFBMLで作成したタブは次のように削除することができます。

タブの削除

タブを削除したあと、そのまま削除したタブに対応する「スタティックFBML」を使いたい場合があると思いますが、「アプリケーションへ移動」をクリックすると、編集画面の代わりに次の「スタティックFBMLを追加しますか?」という画面が表示されます。

アプリケーション選択画面

この画面では期待通りの操作(=編集画面の表示)は行えないので、ひとつ前のアプリケーション一覧画面に戻って「設定を編集」をクリック。

アプリケーション一覧画面

開いたダイアログに表示されている「追加」をクリック。

設定画面

表示が「追加済み」に切り替わるので、「OK」をクリック。

設定画面

再度「アプリケーションへ移動」をクリックすれば編集画面が表示されます。タブも復活します。

アプリケーション自体を削除したい場合はタブの削除ではなく、アプリケーション一覧画面の一番右側にある×印をクリックしてください。

6.FBMLについて

FBMLリファレンスは次のページにあります。

FBML(Facebookマークアップ言語)

FBMLはFacebookアプリケーションでも利用できますが、開発者ロードマップによるとアプリケーションでの利用についてはIFramesを推奨しているようです。また一部のFBMLタグが1月31日以降、利用できなくなるようなのでご注意ください。

開発者ロードマップ
開発者ロードマップ

7.参考サイト

参考サイトは以下です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

初めまして。
検索エンジンから辿り着きました。
どうぞ宜しくお願い致します。

facebookって使いづらいなと思いインデックスフォルダーの様なページを見つけ、それがファンページと知るまで数時間費やし貴サイトに辿り着きました。

図解されているので大変見やすく参考になります。早速ファンページを開設しました。上手く出来ました♪ プロフィール写真をUPしたり、基本データを入力したりしました。が、何か連動?だかをクリックしてしまい個人ページの様にアプリが左側に表示されてしまいました。

ファンページの横並びのボックスの方が見やすく管理しやすいと思ったのに・・・。ファンページの削除・開設を何度も繰り返しても個人ページの様に左側にアプリが表示されてしまします。

どの様な対処で元に戻りますでしょうか?
どうぞ宜しくお願いします。

[1] Posted by Sally : February 12, 2011 6:41 PM

>Sallyさん
こんばんは。
記事参照ありがとうございます。
すいませんが多忙のため、確認でき次第、何らかの回答を本コメント欄で致します。
すいませんがお時間頂けますでしょうか。

[2] Posted by yujiro logo : February 16, 2011 2:34 AM

了解しました♪
宜しくお願いします。

[3] Posted by Sally : February 18, 2011 7:01 PM

>Sallyさん
こんばんは。
ご返事遅くなってすいません。
横に表示されるようになったのは「アプリ」という文字列ではなく、これまで中央カラムにあった横並びのタブメニュー(「ウォール」・「基本データ」など)がすべて左側に移動したということであれば、facebookのデザインがそのように変更されたものと思われます。
ご質問の解釈が間違ってましたらご指摘ください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : February 25, 2011 5:48 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)