こんにちは。
リウムのーちゃんです。

今日は、ここ2,3日程、私が悪戦苦闘した
Facebookのウェルカムページの作り方についてのご紹介です。

 

「ウェルカムページ」とは、
自社のFacebookページを初めて見ていただいたお客様に、
ファンになっていただけるようにお誘いするページです。

リウムスマイル!Facebookページのウェルカムページ
リウムスマイル!Facebookのウェルカムページ


まだ「いいね!」をしていただいていないお客様だけを対象に、最初に表示するページとしても設定できます。
このFacebookページがどんな内容なのかを簡単に説明し、
「ファンになるとこんな良い事があるよ~!」
ということをわかりやすく表示するといいですね!

 

リウムが開発した新システム「リウムスマイル!」のFacebookページがあるのですが、
まだまだ作りかけで少しのあいだ放置状態でした。

 

最近、Facebookでもきちんとデザインされたページをよく見ますが、
何をどうやって作られてるのか全然わかっていませんでした。

何しろ、私がFacebookのことをよくわかっていない・・・
でもこのまま放置していてもよくないので、意を決していじり始めました。

 

いじり始めたはいいのですが、何が何やら、どこをどういじったらどうなるのかさっぱり。
調べようにも、Facebookの操作インターフェイスはすごくよく変更されるらしく、
見つけた情報でも画面が全然違ったり、ボタンがなかったりで作業が進まない・・・。

 

でも、どうにかやっと理解できたので、
「これから作成するぞ!という方に、少しでも新しい情報を」
と思ったのでご紹介いたします。

 

 

本記事では、基本的なFacebookページの登録や設定方法等は今回は省きます。

 

 

2011/08/29現在

【iframeを使用したFacebookのウェルカムページの作り方】

簡単に説明すると、
web上にアップされているページを
アプリを作成して読み込み、
それをFacebookページに追加する

という感じです。

 

【作り方の流れ】

  1. iframeで表示させる、元々のページを作成し、web上にアップしておく
  2. アプリの登録とアプリ開発者として登録
  3. アプリの編集
  4. Facebookページにアプリを組み込む
  5. ウェルカムページをデフォルトページに設定

 

【作り方】

  1. iframeで表示させる、元々のページを作成し、web上にアップしておく

    まず、Facebookページにウェルカムページのような独立した項目(タブ)を増やすには、通常のwebサイトと同じようにhtmlでwebページを作成し、web上に公開しておく必要があります。
    基本的なwebサイトの作成方法は今回は省かせていただきますが、ポイントをいくつか挙げておきます。
    • iframeの表示する大きさは、幅520px 高さ800pxです。
      それ以上になると、Facebookページにスクロールバーが表示されてしまうので、かっこ悪くなってしまいます。
      ただし、この大きさで指定されていますが、IE8で確認するとスクロールバーが表示されました。試しに3pxずつ小さくし、幅517px 高さ797pxにするとスクロールバーは消えました。

    • スタイルは外部スタイルシートを使用するより、インラインで書き込んだ方がいいようです。
    • backgroundで画像を読み込ませることはできないようです。
    リウムスマイル!Facebookページのウェルカムページをweb上に公開しているのをご覧いただけます。
    リウムスマイル!Facebookページのウェルカムページの中身

     

  2. アプリの登録とアプリ開発者として登録

    Facebookではウェルカムページのような独立した項目(タブ)は1つのアプリとして扱うようです。
    ページだけど、アプリ。
    この辺が今までの私の理解と違ったのでややこしかったです。
    ページを増やす(作る)=アプリを作る
    なので、まずはアプリ開発者登録をします。
    Facebookから開発者登録のページにたどり着きにくいので、リンクをはっておきます。
    Facebook開発者ページ(http://www.facebook.com/developers/

    Facebookにログインした状態で、上の開発者ページへアクセスしてください。
    アクセスしてからの操作方法です。
    それでは、スクリーンショットでダダッとご説明します。

    上のような画面になったら、「許可する」をクリックします。

    上のような画面になったら、「許可する」をクリックします。

    「+Create New App」をクリックします。

    「+Create New App」をクリックします。
    登録より先にアプリを作り始めるみたいです。

    「App Name」にアプリの名前を入力します。「Locale」は言語を設定します。

    「App Name」にアプリの名前を入力します。
    「Locale」は言語を設定します。

    利用規約に同意するにチェックをつけて「続行」をクリックします。

    表示されている文字を入力して「送信を」クリックします。

    「mobile phone」をクリックします。

    アプリ開発者としての登録がない場合、この表示になります。
    ここからアプリ開発者としての登録が始まります。
    「mobile phone」をクリックします。

    携帯メールアドレスを入力して、送信をクリックします。

    携帯メールアドレスを入力して、送信をクリックします。

    私の携帯にメールが届かなかったので、キャンセルをクリックしました。

    コード入力画面ですが、
    私の携帯にメールが届かなかったので、キャンセルをクリックしました。

    電話番号を追加をクリックします。

    キャンセルをクリックすると、モバイル設定に移動しました。
    電話番号を追加をクリックします。

    「続行」をクリックすると、携帯にショートメールでメールが届きました。

    コードを入力すると、アプリが登録されました。

     

  3. アプリの編集

    「Edit Setting」をクリックし、アプリの設定を行います。

    チェックマークをクリックすると、入力項目が表示されます。

    入力する内容をご説明します。

    【Website】
    Site URLhttp://apps.facebook.com/○○○/
    作成したアプリのFacebook上のURLです。
    すでにあるURLは取得できません。
    小文字のアルファベットで指定します。
    【App on Facebook】
    Canvas URLiframe内に読み込むファイルを置いているサーバーのURLを記入します。
    最後は/(スラッシュ)で終わるように記述します。
    【Page Tab】
    Page Tab NameFacebookページでは左メニューとして表示されます。
    今回は「ようこそ!」とします。
    Page Tab URLFacebookページのタブのiframe内に読み込むコンテンツのURLを記入します。

    それ以外は、何も入力せずに「変更を保存」をクリックしました。
    これで、アプリの編集は完了です。

    ↑リウムスマイル!Facebookページのウェルカムページの設定内容です。

     

  4. Facebookページにアプリを組み込む

    それでは、今作成したページをFacebookページに組み込んでいきます。

    左メニューの「View App Profile Page」をクリックします。

    左メニューの「View App Profile Page」をクリックします。

    左メニューの「マイページへ追加」をクリックします。

    アプリのページに移動します。
    左メニューの「マイページへ追加」をクリックします。

    追加したいページの「Facebookページに追加」をクリックします。

    追加したいページの「Facebookページに追加」をクリックします。
    1度クリックすると、表示が消えます。
    消えたら追加されたことのようです。
    追加したFacebookページにアクセスして、タブが追加されているか確認してください。

     

  5. ウェルカムページをデフォルトページに設定

    タブを追加したFacebookページの編集画面を開きます。

    右上の「Facebookページを編集」をクリックします。

    右上の「Facebookページを編集」をクリックします。

    「デフォルトで表示するタブ」で追加したタブを選択します。

    左メニューは「権限の管理」になっていますか?
    「デフォルトで表示するタブ」で追加したタブを選択します。

    「変更を保存」をクリックして完了です。

    「変更を保存」をクリックして完了です。

 

長くなりましたが・・・
以上が、iframeによるFacebookページのウェルカムページの作り方です。
iframeを使用するので、htmlの知識やサーバの用意が必要です。
その知識があったとしても、どこに何を登録したら???というのがFacebookのようです・・・

私もFacebookを完璧に理解できたわけではないので、操作として遠回りしている部分もあるかもしれません。
でも現段階(2011/08/29)で、この操作方法を順にしていただくと、ウェルカムページが作成できると思います。
お困りの方に少しでも役に立つことができたら嬉しいです。