Tour - Ihre erste App erstellen

Lernen Sie fanpageGENERATOR auf unserer Tour kennen. Von der Anmeldung bis zur Veröffentlichung der ersten Facebook-App finden Sie hier Schritt für Schritt alles erklärt.

Tour-Inhalte

1.) Neue Facebook-App anlegen

Zuerst wird eine neue, leere Facebook-App benötigt. Diese ist wie ein leerer Container und wird später die Bausteine mit Inhalten oder Funktionen beinhalten. 

Es gibt zwei grundsätzliche Möglichkeiten, um zur ersten Facebook-App zu kommen. Entweder eine leere App anlegen, diese ist tatsächlich nur ein leere Container, der mit Inhalten gefüllt werden muss, oder eine App basierend auf einer der angebotenen Vorlagen erstellen.

Bei der Verwendung einer Vorlage ist danach lediglich Anpassungsaufwand notwendig.

2.) Facebook-App Einstellungen wählen

Der Name der App ist zu vergeben und anschließend ist das Layout zu wählen. Es werden zwei Möglichkeiten angeboten. Bei der Version "Freie Positionen" können Inhalte skaliert und via Drag & Drop angeordnet werden. Bei "Feste Positionen" wird eine grundlegende Struktur angeboten, bei der Inhalte änderbar sind.

Die einzustellende Sprache betrifft die Systemdialoge von Facebook. Diese können in der ausgewählten Sprache angezeigt werden. Die eigentlichen App-Inhalte müssen vom Ersteller selbst in der passenden Landessprache eingestellt werden.

3.) Arbeitsbereich für die App-Erstellung

Der Arbeitsbereich für die App-Erstellung gliedert sich in drei Bereiche. Oben die Hauptnavigation mit den wichtigsten Funktionen, links die Auswahl der verfügbaren bzw. nutzbaren Bausteine und nützlichen Funktionen. Vor allem das Supportfenster ist hilfreich weil alle Anfragen sofort zuzuordnen sind und von unserem Support-Team schnell beantwortet werden können.

In den Arbeitsbereich werden die Bausteine platziert, die in der Facebook-App verwendet werden sollen. Auf diese Weise lassen sich Facebook-Apps von einfacher Inhaltspräsentation bis zum Gewinnspiel erstellen.

4.) HTML-Inhalte einfügen

Die ersten Inhalte werden eingestellt. Die Hauptüberschrift über dem Gewinnspiel. Hierzu wird links der Baustein HTML ausgewählt. Der Textinhalt wird komfortabel mit dem Texteditor erfasst. Text welcher durch den HTML-Baustein erfasst wird, kann im Nachhinein nach Wunsch formatiert werden.

Hier ist der Text der Hauptüberschrift in Bearbeitung und bereits im Editor zentriert worden.

Anschließend wird ein zweiter HTML-Baustein mit dem einleitenden Text der App hinzugefügt. Durch die Aufteilug in zwei Bausteine können die Inhalte später via Drag & Drop so platziert werden, wie es gewünscht wird.

5.) Bilddateien mit dem Dateimanager hochladen

Alle Daten welche via Baustein Verwendung finden sollen, müssen zuerst mit dem Dateimanager in das System hochgeladen werden. Für aktuelle Browser, die HTML5 unterstützen, steht ein Drag & Drop Uploader zur Verfügung. Ältere Browser können Dateien mit dem Standarddialog hochladen.

Für das Gewinnspiel soll eine Grafik verwendet werden. Diese wird jetzt hier mit dem Drag & Drop Uploader hochgeladen. Hochgeladene Dateien können in Ordnern verwaltet werden. Das erhöht die Übersichtlichkeit bei mehreren Projekten.

6.) Bild in Facebook-App einfügen

Das hochgeladene Bild wird mit dem Bild-Baustein in die Facebook-App integriert. Hierbei können verschiedene Einstellungen festgelegt werden. Dem Bild kann beispielsweise ein Link zugeordnet werden. Das gesamte Bild ist dann klickbar.

Das Linkziel kann ebenso festgelegt werden wie die anzuzeigende Bildgröße.

7.) Bausteine mit Inhalten formatieren

Nachdem alle Inhalte die zukünftige Facebook-App eingefügt worden sind, können diese angeordnet und formatiert werden. So soll die Überschrift größer und auffälliger werden und der darunter platzierte Text größer und damit besser lesbar werden. Diese grundlegenden Formtierungen lassen sich bequem im Editor vornehmen. Hierzu muss der Baustein wieder zur Bearbeitung aufgerufen und geändert werden.

Fortgeschrittene Formatierungen, welche nicht mit vom Editor angeboten werden, lassen sich direkt im CSS-Sheet vornehmen. Damit ist es möglich, jedes CI auch für die Facebook-App anzuwenden.

8.) Formular für Gewinnspiel erstellen

Der Formularbaustein ist ein mächtiges Werkzeug. Neben einem einfach zu erstellendem Kontaktformular kann auf Klick das Formular als Gewinspiel angelegt werden. Wird das ausgewählt, stehen Teilnahmebedingungen und Teilen-Einstellungen zur Verfügung. Die Kommunikationsparameter sind frei einstellbar.

Daten, die durch das Gewinnspiel-Formular erhalten werden, werden nicht bei Facebook gespeichert sondern auf unseren Servern in Deutschland. Erhaltene Daten lassen sich zudem bequem als Excel-Datei downloaden und im Anschluß daran. löschen.

9.) NoBorder Formatierungsoption anwenden

Ein kleiner Tipp für Fortgeschrittene: unsere Bausteine haben nach dem Einfügen einen Rahmen. Dieser Rahmen wird häufig nicht gewünscht. Um den Rahmen einfach zu entfernen, gehen Sie vor wie folgt: Im Baustein die Einstellungen aufrufen und in das Feld CSS-Klasse "noborder" eintragen. Der Rahmen wird entfernt.

An dieser Stelle können beliebige CSS-Klassen aufgerufen werden. Wo diese zu erstellen und zu speichern sind, ist im letzten Schritt der Tour beschrieben.

10.) Live-Vorschau der erstellten App

Es wird Zeit, sich die erstellte Facebook-App anzusehen, wie sie später auf der Seite aussehen wird. Ein Klick auf "Live-Vorschau" zeigt das exakte Bild. Auch sind die meisten Funktionen nutz- und testbar. Das Gewinnspielformular ist bereits jetzt voll einsatzfähig.

Die Vorschau sollte als Testumgebung genutzt werden um spätere Fehler oder grafische Ungenauigkeiten auszuschließen.

11.) Headerbild der Facebookseite einblenden

Über Facebook-Apps wird bei Aufruf in Facebook das Headerbild der Facebook-Seite angezeigt. Um eine harmonische Darstellung erzielen zu können, kann bei fanpageGENERATOR das Headerbild der Facebook-Seite bereits im Vorschaumodus angezeigt werden.

Bei Klick auf den Button "Vorschau-Seite" werden alle Seiten angeboten, bei denen Sie Administrationsrechte haben. Bei Auswahl der Seite wird das zugehörige Headerbild über Ihrer erstellten Facebook-App angezeigt.

12.) Facebook-App auf Facebook-Seite installieren

Nach Fertigstellung der App soll diese auf einer Facebook-Seite zum Einsatz kommen. In der linken Spalte gibt es den Button "App installieren". Nach Klick werden alle Facebook Seiten angezeigt, bei denen der fanpageGENERATOR Anwender Administrationsrechte hat. Administrationsrechte der Facebook-Seite sind notwendig, um eine App auf Facebook installieren zu dürfen.

Ein Klick auf den Button "Auf diese Seite installieren", führt die Installation durch. Alle weiteren Einstellungen sind dann in Facebook direkt zu treffen. Änderungen an der Facebook-App im fanpageGENERATOR sind sofort live sichtbar.

13.) Installationsbestätigung der Facebook-Seite

Ist die Installation ohne Probleme verlaufen, sehen Sie die Rückmeldung von fanpageGENERATOR. Ab diesem Moment sehen Ihre Seitenbesucher die Facebook-App.

Sie können die App auf soviele Seiten installieren, wie Sie möchten. Die Anzahl der Seiten wird durch Ihr fanpageGENERATOR Paket bestimmt. Ab dem professional Paket, gibt es keine Begrenzung mehr.

14.) Erstellte Facebook-App auf Facebook-Seite nutzen

Sofort nach der Installation aus fanpageGENERATOR steht die App auf der Seite zur Verfügung. Der Name der facebook-App wird in der Seitennavigation angzeigt:

Eine weitere Nutzungsmöglichkeit eröffnet die Mobile-Option. Siehe nächster Schritt.

15.) "Make me Mobile" Option anwenden

Facebook Apps sollten mobil verfügbar sein. Wir machen es Ihnen leicht, eine mobile Facebook-Anwendung zu erstellen. Erstellen Sie einfach Ihre Facebook mit fanpageGENERATOR. Wenn sie fertig ist, klicken Sie auf den Button "Make me mobile!". Sie erhalten gegen eine separat aufgeführte Gebühr von uns Ihre mobile Facebook Anwendung. 

Die Preise der mobilen Anwendungen sind je nach Ihrem Paket und den damit verbundenen Möglichkeiten unterschiedlich hoch. Sie erhalten von uns eine mobile Anwendung die genau der erstellten Anwendung mit fanpageGENERATOR entspricht.

16.) Fortgeschrittene Formatierung mit CSS

Unternehmen haben in den meisten Fällen ein Corporate Design. Dies soll bei allen Aspekten des Außenauftrittes eingehalten werden. Für diesen Anwendungsfall eignet sich das frei editierbare CSS-Stylesheet. Hier kann nahezu jede Formatierung festgelegt und durch Klassen den Bausteinen zugewiesen werdenn. 

Jede erstellte Facebook-App hat ein eigenes Stylesheet. Wichtige Klassen haben wir bereits für Sie bearbeitbar gemacht. Weitere Klassen können Sie selbst erstellen und hinzufügen.