Facebook アプリ TabSite の使い方

Facebook アプリ
TabSite の使い方
佐田 圭一朗
Facebook ページのカスタムタブをブログ調の編集画面で作
成・編集できる Facebook アプリ、
「TabSite」の使い方をま
とめた 操作マニュアル。
（2011/05/26 時点）
Creator’ s Studio
“ A D VA N ”
h t t p : / / w w w. f a c e b o o k . c o m
/pages/Creators-StudioA D VA N / 2 0 2 9 9 9 9 6 6 4 1 0 5 8 2
[email protected]
TabSite とは
TabSite とは、Facebook アプリのひとつで、
ブログの更新ページと同じような画面でカスタムタブの作成と更新が可能、
加えてひとつのカスタムタブページ内に複数のサブページを持つことができる、
という特徴を持ちます。
海外のアプリなので、説明などがすべて英語で書かれており、
また、一部日本ではなじみのないサービスと連携している部分がありますが、
それほど怖がるほどではありません。
以下、TabSite の使い方を説明していきたいと思います。
1. TabSite 公式ページへアクセス
まず、以下の公式サイトへアクセスします。
http://www.facebooktabsite.com/
2. アカウントの取得
画面上部のメニューから、「Sign Up」をクリックしてください。
Facebook との通信を求められるので、「Connect with Facebook」をクリックします。
この際、Facebook にログイン済みならば、
通信許可を求めるポップアップが出ますので「許可」をクリックします。
もし、Facebook にログインしていない場合は、
一度 Facebook のログイン画面に遷移するので、Facebook へログインします。
TabSite のアカウントタイプの選択ページへ自動的に移動します。
この際、自分が管理者権限を持つ Facebook ページのリストが表示されるので、
カスタムタブを追加したい FB ページを選択してください。
※一度に一回しか、 追加するファンページを選択することは出来ません。
別のファンページに追加する場合は、 再度アカウントの取得を始めから行う必要があります。
（追加するファンページの数に制限はありません）
アカウントタイプのリストが表示されますので、
ここでは「Free TabSite (Free)」のラジオボタンをチェックします。
また、「 I accept the Terms & Conditions 」もチェック必須になっていますので、
チェックを入れてください。
※Free 版では、以下の機能制限があります。
・
カスタムタブ名は「TabSite」または「Welcome」のみ選択可能
・
カスタムタブ内のサブページは二つまで
・
画像のアップロードは１ＭＢまで
・
ページの一番下に広告が入る
「Next Step」ボタンをクリックします。
これで、アカウント取得は完了です。管理ページに移動します。
3. Facebook ページへの追加
さて、管理ページに移動すると、何やらポップアップが出てきます。
これは、初期設定を行うためのナビゲーションになっています。
さっそく、「Click Here」をクリックしてみましょう。
すると、「Name Your TabSite」のポップアップが出ます。
カスタムタブの名前を決めるところですが、無料版は「TabSite」または「Welcome」しか選択できません。
プルダウンから好きな方を選び、「Submit」をクリックしてください。
FB ページへのカスタムタブ追加ナビゲーションが開きます。
そのまま、「Click Here」をクリック。
Facebook に移動し、アプリの追加を確認されます。
「アプリケーションの追加先」から、追加するファンページを選択して
「Welcome by TabSite | iframe app を追加する」ボタンをクリックします。
ファンページに移動しますので、カスタムタブが追加されていることを確認してください。
4. TabSite の編集
さて、管理ページへ戻ります。
開いたままのポップアップナビゲーションは、もう必要ありませんので閉じてください。
念のため、この管理ページをブックマークしておきましょう。
TabSite の編集や修正は Facebook 上ではなく、このページから行うことになります。
それでは、カスタムタブの編集を始めましょう！
「Click to Add a New Page」をクリックしてください。
サブページ作成ナビゲーションが開きます。
「Sub-Page Name」にサブページ名を設定し、「Submit」をクリックしてください。
（※「Sub-Page Type」は無料版では選択できません）
サブページが作成され、編集画面が表示されました。
各機能、アイコンの説明は以下の通りです。
①アイコン群１
左から、「太字」、「斜体」、「下線」、「打消し線」、 「左揃え」、「中央揃え」、「右揃え」、「両端揃え」。
②文字装飾
「Paragraph」 ：通常の文字
「Address」 ：斜体
「Preformatted」：等幅文字
「Heading1～6」：HTML の＜h1＞～＜h6＞タグに相当
③フォント選択
フォントが選べます。ただし、半角文字のみしか反映されません。
（※英語圏のアプリのため、日本語フォントが無い）
④アイコン群２
左から、「切り取り」、「コピー」、「貼り付け」、「Plain Text として貼り付け」、
「Word からの貼り付け」、「並列リスト」、「順序付きリスト」、「段上げ」、「段下げ」、「元に戻す」、「やり直し」。
⑤アイコン群３
左から、 「リンク」
‥‥通常のブログと違い、書いた文字を選択してクリックすることで設定ウィンドウが開きます。
リンクについてはかなり詳細に設定が可能ですが、ここでは「General」のみ説明します。

「Link URL」：リンク先の URL を記入。
右のブラウズボタンから、アップロードした画像を指定することもできます。

「Anchors」：アンカーを使った、ページ内リンクの場合に使用。

「Target」：リンク先を開く際の処理を指定します。
⇒Open in this window/frame
このウィンドウまたはフレームでリンク先を開く
⇒Open in new window(_blank)
別のウィンドウ／タブでリンク先を開く
⇒Open in parent window/frame(_parent)
入れ後のフレーム構造の場合、ひとつ上の親フレームでリンク先を開く
⇒Open in top frame (replaces all frames (_top)
フレーム構造の場合、フレームをすべて解除した上でリンク先を開く

「Title」：マウスをリンクに載せたときに表示される文章を設定

「Class」：対応していません
「リンク解除」
‥‥「リンク」した文字を選択してクリックすることで、リンクが解除できます。
「アンカー設定」
‥‥リンク用にアンカーを設置します。
⑥フォントサイズ選択
文字の大きさが選択できます。
⑦アイコン群４
左から、「フォーマット除去（文字への設定（太字など）を解除します）」、 「下付き文字」、「上付き文字」、
「特殊文字」、「誤字チェック（英語のみ）」、「参照（html＜site＞タグ）」、 「参照（html＜blockquote＞タグ）」、
「乱雑なコードのクリーンアップ」、「ヘルプ」、「プレビュー」、「文字の色」、「文字の背景の色」、
「画像の追加、選択」。
⑧アイコン群５
「表の追加」、「表の列のプロパティ」、「表のセルのプロパティ」、「前に行の追加」、「後に行の追加」、
「行の削除」、「左に列の追加」、「右に列の追加」、「列の削除」、「セルの結合の解除」、「セルの結合」。
⑨サインアップフォーム
他サービスにサインアップする。残念ながら、海外のサービスのみ。
⑩ページビュー
設置した Facebook ページの、TabSite によるカスタムタブページ訪問者数。
上記機能を使ってページを編集したら、
「Save Page」または「Save & Post to the Wall（更新したことをウォールに投稿）」ボタンを押して、
ページを公開してください。
「Save & Post to the Wall」をクリックした場合、ウォールへの投稿に使う画像の選択画面が出ますので、
使いたい画像、もしくは「No Image」のラジオボタンを押したあと、
再び「Save & Post to the Wall」をクリックしてください。
Facebook の投稿画面に移動します。
コメントを書き込んで、「公開」をクリックしてください。
Facebook ページを確認すると、
ウォールにカスタムタブへのリンクとコメントが表示されていることがわかります。
公開が終わったら、編集ページでのプレビューと実際のカスタムタブの表示では
若干見栄えが異なる場合もありますので、実際にカスタムタブを開いて確認してみてください。
5. TabSite の管理
最後に、カスタムタブの名前の変更や、サブページの追加などの管理面について説明します。
① カスタムタブの管理
カスタムタブの右側の鉛筆マークをクリックしてみましょう。
管理メニューが表示されます。
ここで、
「Edit Tab」
... カスタムタブの内容を編集します。（４．TabSite の編集部分）
「Rename Tab」
... カスタムタブ名を変更します。
「Delete Tab」
... カスタムタブを削除します。
※「Edit Tab Global Header/Footer」、「Edit Tab Navigation」は無料版では使用できません。
「Rename Tab」をクリックすると、以下のナビゲーションが表示されます。
ためしに、「TabSite」にタブ名を変更してみます。
すると、管理ページ上のカスタムタブ名が変更されました！
※注意！！！
カスタムタブ名を変更した場合、Facebook ページへ再度カスタムタブを追加する必要があります。
追加ナビゲーションが表示されますので、指示に従って追加してください。
また、以前の名前のカスタムタブが残ってしまうので、
Facebook ページの左メニューから「編集」をクリックし、いらないカスタムタブを削除してください。
（以前の名前のカスタムタブは、クリックしても何も表示されない「ゴミ」です）
② サブページの管理
まずは、サブページの追加方法です。
無料版ではあと一つ、サブページが追加できます。
サブページタブ横の「＋」をクリックしてください。
サブページ作製ナビゲーションが表示されるので、設定を行って「Submit」をクリック。
これで、ふたつめのサブページが作成されました。
次に、サブページの管理について。
サブページタブの右側の鉛筆マークをクリックしてみましょう。
管理メニューが表示されます。
ここで、
「Edit Sub-page」
... サブページの内容を編集します。
「Rename Sub-page」
... サブページ名を変更します。
「Reorder Sub-page」
... サブページタブの順番を変更します。
「Rename Sub-page」をクリックすると、サブページ名変更ナビゲーションが表示されます。
また、「Reorder Sub-page」をクリックすると、以下の画面が表示されます。
タブをクリックしたまま移動させ、サブページタブの順番を変更してください。
これで、TabSite の説明は終了です。
今回、作成していったサンプルページは以下で確認できます。
http://www.facebook.com/pages/FBPageLab/202183106488466?sk=app_186663019975