Dokumentation
Seite drucken

Integriere einen SuperSaaS Kalender auf Deiner Facebook Seite

Diese Anleitung erklärt, wie ein SuperSaaS Kalender in Deine Facebook Seite integriert wird, was allen Kunden erlaubt online zu buchen ohne Facebook zu verlassen. Wer lieber den Kalender einfügt, indem ein “Hier buchen” Schaltknopf auf die eigene Facebook Seite gesetzt wird, folgt lieber dieser Anleitung add a Book Now button.

Was ist für die Integration nötig?

  • Eine Facebook Business Seite
  • Ein SuperSaaS Konto mit einem Paket Abo mit SSL Verschlüsselung und mindestens einem Kalender.

Deinen SuperSaaS Kalender in ein Fenster auf Deiner Facebookseite einfügen

  1. Logge Dich auf Deiner Business Facebookseite ein

  2. Öffne ein weiteres Fenster in Deinem Browser und gehe zu: apps.facebook.com/static_html_plus/

  3. Wähle Add Static HTML to a Page

    Add Static HTML
  4. Wenn Du mehrere Business-Seiten auf Facebook hast, dann wähle zuerst die Seite aus, in die Du den Kalender integrieren willst, klicke erst dann Add Static HTML: iframe tabs.

    Select page
  5. Der HTML Tab (Reiter) wird nun auf Deiner Facebook Business Seite erscheinen.

  6. Um den HTML Tab zu bearbeiten klicken auf ‘Einstellungen’ und wählen Apps aus der linken Reihe aus.

    Edit settings
  7. Wähle den ‘iframe Tabs’ den Du bearbeiten möchtest und klicke auf Einstellungen bearbeiten.

    Edit settings
  1. Jetzt kann der vorgegebene Text Willkommen in einen eigenen Text verändert werden, wie beispielsweise Hier Buchen. Klicke Speichern und dann klicke OK.

Change text
  1. Wiederhole Schritt 7 um das vorgegebene Bild zu ändern. Dieses mal klicke auf “Ändern” neben Eigenes Symbol:. Dort erscheint eine neue Seite unter ‘Individuelles Bild hochladen’. Bewege die Maus über das Bild mit dem Stern und klicke auf “Bearbeiten”.

Click change Click edit
  1. Ein Pop-up-Fenster öffnet sich, mit dem ein Bild von Deinem Computer hochgeladen werden kann. Dieses Bild muss 111 in der Breite × 74 Pixels in der Höhe haben und als JPG-, GIF- oder PNG-Datei vorliegen.

    Du kannst eines der Beispiele von unten benutzen (klicke rechts und wähle ‘Sichern unter…') oder erstelle einen eigenen Schaltknopf.

Select an image Button 1 Button 2 Button 3
  1. Eine Vorschau von dem Bild erscheint ohne die Möglichkeit diese zu sichern. Trotzdem erscheint das Bild auf Deiner Facebookseite, wenn Du dahin zurück gehst findest Du es auf der linken Seite unter dem Titel ‘Apps’

Preview and navigate back to your page
  1. Jetzt, da das Styling abgeschlossen ist, können wir den iFrame in die Seite integrieren. Klicke dafür auf Deinen neu erstellten Nun Buchen! Schaltknopf (den Static HTML Tab) und klicke auf Bearbeiten. Oder Du findest Dein erstelltes Bild als Schaltknopf unter ‘Apps’ auf der linken Seite Deiner Facebookseite und klickst auf Set up tab.

    Click on the new book now button
  2. Wähle unter Einstellungen auf Deiner Facebook Seite ‘Einstellungen’ gehe zu Apps und wähle die entsprechende App aus und klicke auf Link zu dieser Webseite erstellen. Dann erscheint ein Pop-up-Fenster mit der bisherigen URL auf die Du nochmal klickst. Es erscheint ein neues Bild, klicke dort auf Edit Tag. (Es ist auch möglich mit der HTML app statt dessen zu arbeiten. Dort klickst Du auf Embeded your website für eine schnelle Integration.).

    Choose website Copy and paste the schedule URL
  3. Kopiere die URL Deiner SuperSaaS-Kalender-Webseite und kopiere sie unter Website - Web address in das Feld; das mit ‘http://'' beginnt. Klicke dann auf den rechts neben der URL stehenden Schaltknopf Apply change. Danach stelle sicher, dass das Häckchen unter ‘Remove scrollbars’ gesetzt ist, damit Deine Seite in die Facbookseite passt und klicke dann auf Save & Publish. Klicke auf den Schaltknopf Preview, um eine Vorschau für Deine Facebook Webseite zu sehen. Um Korrekturen vorzunemen wiederhole den Vorgang solange, bis die richtige Seite erscheint. Dann ist Deine Seite als iFrame in Facebook eingebettet.

    Preview Preview
Damit der iFrame richtig dargestellt wird auf einer Facebook Seite, musst Du “SSL” in in Deinem SuperSaaS Konto freischalten. Du kannst auf SSL innerhalbe Deines SuperSaaS Kontos umschalten unter Zugangs Kontrolle auf dem Dashboard. (Das bedeutet, dass der Link zu Deinem Kalender mit dem Kode https beginnt, anstatt mit http wie zuvor.)
Wenn Du den Kalender nicht in einen iFrame (wo es mit 800 Pixeln die Breite der Facebookseite einnimmt) setzen möchtest, kannst Du statt dessen einen Schaltknopf oder Link zu Deiner Kalender- und Terminseite nutzen. Dann erscheint der Kalender in seinem eigenen Fenster im Browser. (In diesem Fall wäre SSL nicht nötig.)

Nutze ein ‘leadgate’, um Besucher der Seite anzuregen Deine Facebook Seite mit ‘Gefällt mir’ zu kennzeichnen

Wenn Du Deinen Buchungs- oder Terminkalender in Deine Facebook integriert hast bietet Dir die App ‘Static HTML: iframe tabs’ die Möglichkeit an ein leadgate zu erstellen. Wenn Du das ‘leadgate’ wählst (enable), dann wird den Leuten ein Pop-up-Fenster angezeigt, indem Informationen von ihnen gesammelt werden bevor sie Deinen eigefügten Terminkalender sehen können.

  1. Wenn Du die App ‘Static HTML: iframe tabs’ im Administratorenbereich Deiner Facebookseite siehts, klicke auf bearbeiten. Klicke dann auf Leadgate.

    Go to fangate
  2. Wähle Enable leadgate, stelle eine Mitteilung für Deine Besucher ein und klicke Save & publish.

    Enter a message for visitors Preview