ドキュメンテーション
iframeを用いた統合は、現在Facebookでサポートされていません。
Facebookページに「今すぐ予約」ボタンを追加することは可能です。 Facebookとの統合を参照ください。

Facebookページのiframeに予約スケジュールを統合

以下のチュートリアルでは、SuperSaaSスケジュールをFacebookページのフレームに統合する方法について説明します。
iframeを使用すると、ユーザーはFacebookページを離れることなくスケジュールにアクセスできます。 「今すぐ予約」ボタンを追加してスケジュールを統合したい場合は、予約ボタンを追加に従ってボタンをFacebookページに追加できます。

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

  • フェイスブック・ビジネス・ページ
  • 少なくとも1つのスケジュールを持つSuperSaaSサブスクリプションとSSLセキュアアカウント

SuperSaaSスケジュールをFacebookページのiframeに追加

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

  2. ブラウザで別ウィンドウを開き、次のURLへ apps.facebook.com/static_html_plus/

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

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

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

  6. 設定タブにある"HTMLタブの編集"をクリクして、左側のカラムからの"アプリ"を選択します。

    Edit settings
  7. 対象フレームの"設定を変更"を選択します。

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

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

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

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

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

Preview and navigate back to your page
  1. これらのデザイン変更を完了させたのち、iframeをページへ統合することが出来ます。
    作成したBook now!ボタンをクリック(Static HTMLタブ) 次に、編集タブをクリック、または、ページの左側にあるアプリの中からボタンを見つけることもできます。

    新規book now ボタンをクリック
  2. 無料アプリセクションに移動し、ウェブサイトアプリを選択してすばやく統合します(代わりにHTMLアプリを使用することもできます)。

    Choose website
    Copy and paste the schedule URL
  3. 外部ページフィールドのURLへ、スケジュールのURLを貼り付けます。
    スクロールバーを削除してスケジュールをページに合わせて拡大縮小し、保存して公開をクリックします。プレビュータブをクリックして、Webサイトのプレビューを表示します。

    Preview
    Preview
Facebookページでiframeを正しく表示するには、SuperSaaSアカウントでSSLを有効にする必要があります。 SSL設定はSuperSaaS管理画面アクセスコントロルでSSLをオンに切り替えることができます。 (これは、スケジュールへのリンクがhttp)ではなく、httpsに変更されることを意味します)
もしiframe内でスケジュールを表示したくない場合(800px幅のフェイスブックページ)、ボタンもしくはリンクを代わりに設置することが出来ます。
その場合、SSLは必要なく、スケジュールは独自のブラウザ内に表示されます。

leadgateを使用してFacebookページのいいね増加を図る

自分のFacebookのページにスケジュールを統合したら、静的なHTMLアプリでleadgateを作成することができます。
leadgateを有効にした場合、スケジュールのフレームを参照する前に、情報をキャプチャするポップアップが表示されます。

  1. 管理者モードで静的なHTMLのアプリを表示し、編集タブをクリックします。
    ついでLeadgate利用にチェックを入れます。

    Go to fangate
  2. leadgateを適用にチェックを入れたら、ビジターへのメッセージを入力して保存 & 公開します。

    Enter a message for visitors
    Preview