このチュートリアルにはupdatedバージョンがあります。

チュートリアル: スケジュールをあなたのフェイスブック・ページに統合する方法

このチュートリアルでは、SuperSaaSスケジュールをあなたのフェイスブックに統合し、お客様がフェイスブック上から予約出来るようにする方法を説明します。 この方法では、フェイスブック・ログインを用いないため、もしユーザーに登録してもらいたい場合はプロセスが必要です。

統合のために必要なものは?

あなたのフェイスブック・ページのフレームにSuperSaaSスケジュールの追加

  1. あなたのフェイスブック・ビジネス・ページへのログイン

  2. ブラウザで新たなウィンドウを開き、次のURLへ進みましょう。: apps.facebook.com/static_html_plus/

  3. “ページにStatic HTMLを追加”を選択

    Add Static HTML
  4. もしあなたが複数のフェイスブック・ビジネス・ページを持っている場合、まず初めにスケジュールを統合したいページを選び、それから “Static HTMLを追加: iframe タブ”をクリックしてください。

    Select page
  5. Static HTMLタブがあなたのフェイスブック・ビジネス・ページ上に現れます。

    Tab appears on your page
  6. Static HTMLタブの横にあるドロップ‐ダウン・メニューの矢印をクリックし、そして編集アイコンをクリックし、“設定を編集”を選択して下さい。

    Edit settings
  7. デフォルト(初期設定)の“Welcome” テキストを、あなたの好きなものに変更することが出来ます。例えば、“Book now!”等です。“保存”をクリックして下さい。

    Change text
  8. ステップ6を繰り返すことで、デフォルト(初期設定)のスター画像を変更することが出来ます。“Custom tab(カスタム・タブ)”の横の“Change(変更)”をクリックして下さい。これによって、新たなページが開き、そこで画像をアップロードすることが出来ます。スター画像の上に移動し、“Edit(編集)”をクリックして下さい。

    Click change
    Click edit
  9. ポップアップが開いて、コンピューターから画像を選択できます。 (111 × 74 pixels).

    Select an image

    右クリックして "Save as…"・・・として保存”を選択するか、自分自身のボタンを作って下記の見本をダウンロード、利用することができます。

    Button 1 Button 2 Button 3
  10. 画像のプレビューが現れ、保存せずに確認することが出来ます。しかし、検索機能を用いてフェイスブック・ページに戻った場合、すでにその画像がフェイスブックページ上に表示されています。

    Preview and navigate back to your page
  11. これらのデザイン変更を完了させたのち、iframeをページへ統合することが出来ます。作成したBook now!ボタンをクリックして下さい(Static HTMlタブ)。

    Click on the new book now button
  12. HTML appを選択します。 indexタブ上に次の integration tutorialからiframe codeをコピーして来ます。なお、これはスケジュールをあなたのウェッブサイトに統合する場合にも使えます。 セキュリティ警告を避けたい場合は、http:部分を削除してください。幅を“100%”に変更して高さを=”1000px”.(保存と発行)をクリックし、そしてスケジュールを確認するためにPreview(プレビュー)をクリックして下さい。

    Choose HTML Copy in the iframe HTML code Preview

    もしiframe内でスケジュールを表示したくない場合(800px幅のフェイスブックページ)、ボタンもしくはリンクを代わりに設置することが出来ます。その場合、スケジュールはそれ自身のブラウザ・ウインドウ内に表示されます。


チュートリアルインデックスへ戻る