TopFacebook > 2011年1月
2011年1月31日

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

January 31,2011 12:55 AM
Tag:[, ]
Permalink

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.参考サイト

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

Comments [4] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3