Inhalt
Dieser Artikel wurde auf den neuesten Stand der Technik gebracht und überarbeitet. Facebook bietet ja schon seit langem die Möglichkeit, über das Anlegen einer Facebook-App im Developer-Bereich von Facebook, individuelle Inhaltsseiten auf einer Facebook-Fanpage einzubinden.
Um eine solche Seite einzubinden, benötigt man zumindest grundlegende HTML- und CSS-Kenntnisse, wenn man statische Seiten in den geschäftlichen Auftritt von Facebook einfügen will oder man bindet Seiten einer WordPress-Installation ein. Auch das funktioniert.
Mittlerweile gibt es auch professionell gestaltete Facebook-Layouts bei den großen Themes- und Templates-Anbieter wie Themeforest und Templatemonster zu kaufen. Die eigenen Inhalte muss man dann nur noch eintragen, sein Logo einfügen und eventuell Farbanpassungen vornehmen. Auch hierfür sind zumindest Basis-HTML- und CSS-Kenntnisse vonnöten. Aber über diese verfügen ja recht viele User.
Voraussetzungen für das Erstellen von externen Inhalten für die Facebook-Seite
Für die Inhalte ist natürlich ein externer Speicherplatz notwendig, wo Sie die Inhalte abspeichern und dann in Facebook einbinden. Wenn Sie schon einen Internetauftritt haben, ist es ohnehin kein Problem, einen Unterordner in Ihrem Webspace (Beispiel: www.ihredomain.de/unterordner) anzulegen und dort die Dateien darin abzulegen.
Außerdem benötigen Sie für Ihre Domain ein SSL-Zertifikat, das Sie bei Ihrem Hoster oder einem sonstigen Anbieter käuflich erwerben müssen. Ansonsten funktioniert das Einbinden von externen Inhalten auf Ihrer Facebook-Fanpage mittels App nicht.
Eigenes Erstellen vs. Baukasten-Anwendungen
Natürlich gibt es im Web viele kostenpflichtige Services wie Fanpage-Generator, mit deren Baukasten-Anwendungen Sie ganz einfach Seiten in Ihre Fanpage einstellen können. Der Vorteil von dieser Vorgehensweise, die ich hier erläutere, ist die, dass Sie sich einmal von Drittanbietern unabhängig machen, denn Ihre Dateien bleiben bei Ihnen.
Was passiert, wenn der von Ihnen genutzte Service plötzlich nicht mehr existiert? Letztendlich bedeutet dies, dass Ihre angelegten Seiten verloren sind und Sie wieder von vorne beginnen müssen. Außerdem verlangen diese Anwendungen von Drittanbietern einen Zugriff auf Ihre persönlichen Daten und Ihre Freundesliste sowie die Erlaubnis, in Ihrem Namen zu posten, was ich generell nicht gut finde.
Aber letztendlich kann ja jeder selbst entscheiden, ob er persönliche Daten freigeben will oder nicht. Ich will die Services nicht schlechtmachen, schließlich ermöglichen sie vielen Interessenten, schnell und einfach Inhaltsseiten in ihren Facebook-Auftritt zu integrieren. Dennoch ziehe ich die hier erläuterte Variante vor, auch wenn sie vielleicht aufwändiger ist.
In diesem Artikel will ich auf die einzelnen Schritte eingehen, die Sie ausführen müssen, um eine individuelle Facebook-Fanseite zu erstellen.
1. Erstellen der Facebook-Anwendung
Ich gehe bei diesem Tutorial davon aus, dass Sie schon eine Facebook-Fanpage besitzen, denn ich beschreibe nur die Schritte für die Erstellung einer Facebook-App, um eigene Inhaltsreiter in die Facebook-Seite einzubinden, wie sie auch auf meiner Facebook-Seite von Geld-online-Blog zu sehen sind:
Facebook-Fanpage von Geld-online-Blog mit den drei individuellen Inhaltsseiten Newsletter-Geschenk, Blog-Inhalt und Impressum als Reiter in der Informationsleiste
Um diesen ersten Schritt auszuführen, rufen Sie folgende Adresse auf: https://developers.facebook.com/apps. Ganz oben rechts finden Sie den Button „+Neue Anwendung erstellen“. Diesen klicken Sie an.
Danach wird ein Fenster mit dem Titel „Neue App erstellen“ geöffnet.
Vergeben Sie hier im Feld Anwendungsname den Titel Ihrer anzulegenden Inhaltsseite. Ich habe als Beispiel den Titel „Impressum Mein Blog“ eingefügt. Wenn Sie eine Newsletterseite einbinden wollen, tragen Sie Newsletter (Meine Website) ein.
Falls Sie mehrere Facebook-Fanpages verwalten und diesen individuelle Inhaltsseiten vergeben wollen, sollten Sie in dem Anwendungsnamen auch den Website-Namen eintragen, damit Sie später in Ihren Anwendungen nicht die Übersicht verlieren und so immer wissen, zu welcher Facebookseite die jeweilige Anwendung gehört.
Das Feld App Namespace können Sie leer lassen und unter App Category können Sie ein zu Ihrer Facebookseite passendes Thema auswählen. Aber Sie müssen auch hier nicht unbedingt etwas auswählen. Klicken Sie dann auf Weiter.
Danach erfolgt eine Sicherheitskontrolle: Geben Sie den Captcha-Code ein und klicken wieder auf Weiter.
2. Konfiguration der Anwendung
Nun geht es weiter mit den Einstellungen der Anwendung. In dem neuen Fenster muss nicht viel ausgefüllt werden.
Deaktivieren Sie zuerst noch den Sandkasten-Modus, denn schließlich wollen Sie ja, dass alle User auf Facebook Ihre Inhaltsseite sehen können. Im Sandkasten- oder Testmodus kann nur der Admin die App testen.
Kopieren Sie sich auch die App-ID und die App-Secret heraus. Die Codes stehen ganz oben unter dem App-Titel.
Den Display Name hatten Sie ja schon bei „Neue App erstellen“ mit dem Anwendungsnamen angegeben. Sie brauchen also nur den Bereich unter Seitenreiter auszufüllen.
Unter Page Tab Name legen Sie den Namen fest, der unterhalb des Seitenreiters auf Ihrer Facebook-Seite angezeigt wird.
Die Seitenreiter-Adresse ist die URL, wo Ihre HTML-Inhaltsseite liegt. Am besten legen Sie dafür auf Ihrem Webspace einen Unterordner an. Ich habe oben einfach ein generisches Beispiel eingetragen. Die gleiche Seitenreiter-Adresse tragen Sie darunter in das Feld Sichere Seitenreiter-Adresse, nur dass sie mit https anstatt mit http anfängt.
Bei Bild für Seitenreiter laden Sie über den Bearbeiten-Link noch eine Grafik in der Größe 111×74 Pixel für den Reiter hoch. Auf dieses Bildchen können Sie den Titel der Seite wie hier im Beispiel „Impressum“ schreiben und die Grafik farblich nach Ihren CI-Farben anpassen. Die Grafik darf die Formate .gif, .jpg oder.png haben.
Als Page Tab Width lassen Sie den Normalwert 810 Pixel eingestellt.
Wenn Sie auf „Änderungen speichern“ klicken, ist die App erstellt und freigeschaltet.
Facebook gibt für die externe Fanseite eine bestimmte Größe vor. Die Breite der Seite liegt bei 810 Pixel und die Höhe bei 800 Pixel. Wird die Seitenhöhe aber mal diesen Wert überschreiten, dann sollten Sie untenstehenden JavaScript-Code in den Quelltext der Fanseite einfügen, weil ansonsten am rechten Seitenrand der Fanseite ein Scrollbalken eingeblendet wird, was nicht so gut aussieht.
Außerdem benötigt Ihre HTML-Seite die Facebook-App-ID. Daher geben Sie unten aufgeführten JavaScript-Schnipsel unterhalb des öffnenden Body-Tags ein und ersetzen den Mustertext IHRE APP-ID mit Ihrer App-ID. Achten Sie darauf, dass zwischen den Apostrophen und Ihrer ID keine Leerzeichen stehen.
3. Anwendung der Facebook-Seite hinzufügen
Nun komme ich zum letzten Schritt: Um Ihre neue Anwendung Ihrer Facebook-Seite zuzuweisen, ändern Sie folgenden Link https://www.facebook.com/dialog/pagetab?app_id=APP_ID_EINTRAGEN&display=popup&next=http://www.facebook.com
so um, dass Sie hinter app_id= Ihre App-ID eintragen (auch hier darauf achten, dass kein Leerzeichen vor und hinter der App-Nummer steht. Geben Sie diese URL in die Browserzeile ein und rufen Sie die Seite auf. Daraufhin können Sie wählen, zu welcher Seite Sie diese App hinzufügen wollen. Den Schritt schließen Sie mit einem Klick auf „Add Page Tab“ ab.
Wenn Sie nun Ihre Facebook-Seite aufrufen (manchmal muss man sie nochmals aktualisieren mit der F5-Taste), sollte der neue Reiter mit der eigenen Inhaltsseite angezeigt werden. Sie können den Reiter noch weiter nach vorne in der Informationsleiste schieben.
4. Spätere Änderungen
Sie können immer wieder Änderungen an Ihren Einstellungen vornehmen, wenn sich mal der Pfad zur Fanseite geändert haben sollte oder Sie weitere Aktualisierungen durchführen möchten. Sie kommen zu den Anwendungen über den Link https://developers.facebook.com/apps/ und können dort über Anwendung bearbeiten die gewünschten Änderungen erledigen.
Weitere Inhaltsseiten fügen Sie auf die gleiche Weise Ihrer Facebook-Fanpage hinzu. Jede einzelne Inhaltsseite ist eine App, die Sie im Developer-Bereich anlegen und für die Sie eine App-ID in Ihr HTML-Dokument einfügen müssen.
[…] 8. Individuelle Facebook-Fanseite erstellen – Tutorial […]
[…] Empfehlungs-Link zum Artikel:http://www.geld-online-blog.de/online-marketing/facebook/individuelle-facebook-fanseite-erstellen-tu… […]
Hallo,
Danke für das Tutorial, allerdings ist – evtl. hat fb mal wieder irgendwo was geändert – „Klicken Sie dort auf den Punkt Anwendungs-Profilseite.“ (nach Abspeichern der Daten in Facebook-Integration) nicht auffindbar.
Ich bekomme es einfach nicht hin, einer Fanseite die App zuzufügen. Auch auf der Fanseite selbst kann ich keine neuen Apps hinzufügen: Auf der Fanseite Klick auf „Seite bearbeiten -> Anwendungen“ führt nur zur Übersicht bereits installierter Anwendungen. Es können nur welche gelöscht, nicht jedoch hinzugefügt werden.
Wäre für einen Tipp dankbar!
Grüße,
Markus
Hallo Markus,
danke für Ihren Hinweis. Da hat Facebook tatsächlich wieder rumgepfuscht und den Ablauf verändert. Ich habe gerade selbst nochmal die App-Erstellung durchgespielt, und ich komme auch nicht mehr zu dem Link: Anwendungsprofilseite.
Ich bin jetzt so weit wie Sie und kriege die App auch nicht mehr zur Fanseite hinzu. Echt cool von FB. Da ich diese App auch noch für weitere Seiten benötige, schaue ich mich in den nächsten Tagen um, wie dieser Ablauf jetzt funktionieren sollte. Wenn ich die Lösung habe, werde ich sie hier in einem Kommentar veröffentlichen.
Sollten Sie schneller sein, würde ich mich freuen, wenn Sie die Lösung hier ebenfalls präsentieren.
Aber das ist mal wieder typisch FB.
Hallo Markus,
rein zufällig habe ich die Lösung gefunden, wie Sie die App auf Ihre Fanseite bekommen. Wenn Sie eine App bzw. Anwendung erstellt haben, dann haben Sie ja eine eigene Seite „Anwendungen“, wo Ihre ganzen erstellen Anwendungen aufgeführt sind. Rechts neben einer Anwendung finden Sie den Link: Bearbeiten. Klicken Sie da drauf und Sie kommen wieder in die Erstellungsseite der Anwendung. Da sehen Sie in der linken Spalte unter „Related Links“ eine kleine Linksammlung, auch den Link „View App Profile Page“. Dort klicken Sie drauf und es öffnet sich die Fanseite Ihrer Anwendung.
Und dort finden Sie nun in der linken Spalte den Link: zu meiner Seite hinzufügen. Wenn Sie da drauf klicken, öffnet sich eine Übersicht all Ihrer bisher angelegten Fanseiten. Einfach dann die Seite auswählen, zu der die App hinzugefügt werden soll. Das war’s dann. Ich hoffe, Sie kommen mit der Beschreibung zurecht. Wenn nicht, einfach nochmal melden.
Hallo Frau Braun,
vielen Dank für den Lösungsweg. Soweit absolut nachvollziehbar.
Was anscheinend noch wichtig ist: Beim Hinzufügen der Anwendung über „Zu meiner Seite hinzufügen“ nicht auf den blauen Text-Link zur Anwendung klicken sondern auf den Button „Einer Seite hinzufügen“.
Danke für Ihre Tipps!
Viele Grüße,
Markus
Hallo Frau Braun,
wie ich eine neue Anwendung und einen entsprechenden Reiter erstellen kann, haben Sie sehr gut erklärt. Das werde ich sofort ausprobieren. Ich habe nun eine etwas andere Frage: Ich bin gerade dabei, mir eine Fanseite bei Facebook einzurichten. Gleich zu Beginn sah ich, wenn ich auf „Anwendungen“ klickte, einige vorinstalliert, so z.B. Fotos, Videos, Links usw. Als ich am nächsten Tag weiterarbeiten wollte, ging beim Anklicken nur noch ein leeres, blau hinterlegtes Fenster auf. „Fotos“ zog ich gleich am ersten Tag nach links aussen, „Videos“ und „Links“ wollte ich dann am nächsten Tag bearbeiten, aber da waren sie aus meinen „Anwendungen“ verschwunden. Ich suche nun seit zwei Tagen nach Möglichkeiten, diese Anwendungen wieder zu bekommen, fand aber bisher im Netz nichts. Gerade bin ich dann auf Ihre Seite gestoßen und hoffe, dass Sie mir evtl. helfen können.
Liebe Grüße
Geli
Hallo Geli,
wahrscheinlich haben Sie die Anwendungen aus Ihrer Anwendungsübersicht gelöscht. Ich habe auf einer meiner Seiten probehalber die Anwendung „Links“ rausgelöscht. Als ich danach wieder auf die Anwendungsauflistung kam, war die Anwendung unten als empfohlen aufgeführt und ich konnte sie wieder aktivieren. Daher ist es echt komisch, dass sie bei Ihnen nicht mehr da sind. Allerdings konnte ich an der Pinnwand immer noch Links einfügen, auch als die Anwendung weg war. Schauen Sie am besten mal im Hilfebereich von Facebook nach. Den finden Sie, wenn Sie oben rechts auf Konto und im sich aufklappenden Menü auf Hilfebereich klicken. Vielleicht finden Sie dort ein paar Hinweise.
Hallo Susanne,
die „Hilfe“ habe ich schon x-mal aufgerufen, hilft aber nicht weiter. Schade dass man sich in solchen Fällen nicht direkt an Facebook wenden kann. Oder kann man das? Habe ich da was übersehen? Womöglich muss ich halt ohne diese Anwendungen weiterleben. Ich mach mich jetzt mal an das, was Sie oben beschrieben haben, vielleicht bin ich ja erfolgreich und bekomme es hin. Könnte wohl sein, dass ich mich diesbezüglich nochmal melde.
Liebe Grüße
Geli
Hallo Susanne,
ich habe es tatsächlich geschafft! Die Anwendung ist von Facebook übernommen worden, alles so weit ganz gut. Allerdings sollte ich die Länge verändern, und da habe ich Schwierigkeiten. Wo muss dieser o.g. Code eingefügt werden? Was ich bisher gemacht habe, isf folgendes: Die neue Anwendungsseite geöffnet, rechte Maustaste, und dann auf eine von zwei Möglichkeiten klicken: „aktueller Frame/Framequelltext anzeigen“ oder „Seitenquelltext anzeigen“? Und an welcher Stelle muss ich dann den obigen Code einfügen? Bin leider kein Programmierer, und wenn ich solche Schnipselseiten sehe, sehe ich nur schwarze kleine Ameisen auf weissem Grund…
Liebe Grüße
Geli
Hallo Geli,
fügen Sie den JavaScript-Code am besten vor dem schließenden Body-Tag ein (). So sieht der schließende Tag aus, siehe Klammer. Einfach den Code aus meinem Text kopieren und vor diesem Tag einfügen.
Hallo Susanne,
prima, dann versuche ich das mal so! Vielen Dank! Sie scheinen auch kein Wochenende zu haben? ;-)
Gibt es eigentlich auch eine Möglichkeit, eine solche Anwendung zu erstellen, OHNE eine bereits bestehende Webseite zu verlinken? Ich denke da z.B. an ein paar Bilder, die ich hochladen und darunter noch einen informativen Text schreiben möchte.
LG Geli
Hallo Geli,
Sie können hochgeladene Bilder in diese Anwendung einbinden, aber mit den entsprechenden HTML-Kenntnissen. :-) Die Bilder müssen auf einem Webspace liegen, also Bilder auf Facebook hochladen und dort einbinden, geht nicht.
Danke! Die Bilder würden zwar auf einem Webspace liegen, aber mir fehlen die HTML-Kenntnisse…. Man kann eben nicht alles haben, ist auch nicht so schlimm.
LG Geli
[…] Sie diesen Schritt zuerst durchführen. Wie Sie eine solche App erstellen, finden Sie im Artikel Individuelle Facebook-Fanseite erstellen. Erst danach verfügen Sie über die App-ID und das App […]
[…] Sie eine solche individuelle Fanpage erstellen können, müssen Sie eine entsprechende Anwendung auf Facebook einrichten. Eine Anleitung dazu finden Sie auf meinem […]
Hallo Allerseits,
ich bin da auch noch ein absoluter Laie. Aber vielen Dank für die Anleitung. Mal schauen, ob ich da jetzt besser durchkomme :)
Gruß
Peter
Vielen Dank für diesen hilfreichen Beitrag,
Ich möchte euch noch auf ein neues Tool aufmerksam machen mit dem ihr kostenlose Facebook Fans für eure Seite erhaltet.
Schaut mal auf http://www.face-guide.com vorbei.
[…] kann dies mithilfe einer Facebook-internen Anwendung tun. Vor gut einem Jahr habe ich dazu ein Tutorial […]
So muss ein sanfter Einstieg aussehen, purer Nutzen enthalten in diesem Beitrag, wow,
[…] ich schon mal in einem Beitrag gezeigt habe, wie das Anlegen einer Facebook-App funktioniert, will ich hier nicht die ganzen Schritte vorführen. Außerdem finden Sie im Dashboard […]