Tutorial: Weitere Tabs zu Facebook-Fanpage hinzufügen (ganz ohne FBML)

Anzeige

FacebookUPDATE: Seit Ende 2011 hat sich der Einbau der Tabs in die eigene Facebook-Fanpage teilweise verändert. Die zusätzlich notwendigen Schritte habe ich in den bestehenden Text eingearbeitet und ROT markiert.

Facebook-Fanseiten sind inzwischen unter vielen Bloggern sehr beliebt. Allerdings stelle ich immer wieder fest, dass viele die Möglichkeiten der Facebook-Fanpages nicht ansatzweise ausnutzen. Die meisten veröffentlichen auf der Fanseite nur ihre aktuellen Blog-Artikel. Dabei ist es beispielsweise mit einfachen Mitteln möglich, in der Sidebar der Facebook-Fansite zusätzliche Tabs zu integrieren, um beispielsweise eine „Über mich“-Unterseite auf der Facebook-Fanseite zu erstellen oder andere Informationen bereitzustellen, die bei den Lesern der Fanpage auf Facebook Interesse wecken, euren eigentlichen Blog zu besuchen.

Wie gesagt, die Erstellung eines solchen Tabs ist eigentlich recht einfach möglich, wenn man einmal weiß, wie es geht. Denn jeder, der mal mit Facebook zu tun hatte weiß natürlich auch, dass die Einstellungen bei Facebook mitunter etwas versteckt und verwirrend angeordnet sind. Aus diesem Grund habe ich mich dazu entschlossen, euch heute eine Schritt-für-Schritt Anleitung zu präsentieren, wie man mehrere weitere Tabs zu seiner Facebook-Fanseite hinzufügen kann.

I. Vorarbeit: Erstellung von HTML- oder PHP-Dateien

Hierbei wird ganz bewusst auf den Einsatz von FBML-Tools verzichtet, da FBML ein „Auslaufmodell“ ist, welches von Facebook Stück für Stück zurückgefahren und letztlich deaktiviert wird. Stattdessen wird auch von Facebook selbst inzwischen empfohlen, bei Facebook-Tabs auf iframes zu setzen.

Zunächst müsst ihr euch also eine HTML- oder PHP-Datei erstellen und mit dem Inhalt füllen, den ihr später auf eurer Facebook-Fanseite im separaten Tab präsentieren wollt. Hierbei solltet ihr beachten, dass Facebook später dem iframe eine maximale Breite von 510 810 Pixeln sowie eine maximale Höhe von 800 Pixeln zugesteht. Verwendet ihr beispielsweise größere Grafiken oder DIV-Blöcke mit größeren Abmessungen, werden zwar auch diese dargestellt, allerdings erscheinen in dem Fall hässliche Scrollbalken, die sich natürlich negativ auf die Optik auswirken können. Gerade was die Scrollbalken angeht, kann es somit nicht schaden, von der maximalen Breite noch mal ein paar Pixel als Puffer abzuziehen, die ggf. für den seitlichen Scrollbalken anfallen. Mit ca. 790-800 Pixeln Breite seit ihr auf der sicheren Seite.

Wenn ihr die HTML- oder PHP-Dateien nach euren Vorstellungen erstellt habt, müsst ihr sie auf euren Webspace hochladen und euch die Adresse zu den Dateien merken, aufschreiben oder was auch immer. Jedenfalls benötigen wir später die exakte Web-Adresse zur entsprechenden HTML- oder PHP-Datei noch.

Sind diese Vorarbeiten erledigt, können wir nun die übrigen Einstellungen und Einbindungen direkt bei Facebook vornehmen.

II. App auf Facebook erstellen

Facebook Developers - Create New AppZunächst führt unser Weg auf die Entwickler-Seite von Facebook. Dort können wir nun selbst neue Apps erstellen. Genau das müssen wir auch tun, denn jeder Tab, den wir auf unserer Fansite einbinden wollen, wird über eine eigens dafür erstellte App realisiert. Daher klicken wir zunächst rechts oben auf den Button „Create New App“.

Im nun folgenden Dialog geben wir der App einen aussagekräftigen Namen. Der Name ist nur für interne Zwecke wichtig, ihr solltet aber trotzdem einen aussagekräftigen Namen vergeben, damit ihr bei mehreren Apps, die ihr vielleicht später für weitere Tabs erstellen werdet, nicht den Überblick verliert. Wer will, kann auch noch eine Sprache auswählen.

Nachdem man mit einem Häkchen den „Terms of use“ zugestimmt und auf „Weiter“ geklickt hat, muss man ggf. noch ein Captcha lösen und hat den ersten Schritt zum weiteren Tab auf der eigenen Facebook-Fanseite erfolgreich hinter sich gebracht. Achtung, hin und wieder kann es einige Sekunden dauern, bis die App erfolgreich erstellt ist, also nicht gleich in Panik verfallen, wenn der Bildschirm kurz nicht zu reagieren scheint.

III. Facebook-App richtig einstellen

Die gerade erstellte App muss nun richtig eingestellt werden, um später auf unserer Facebook-Fansite den Tab darzustellen.

facebook-app-erstellen_1

Viel muss man auf der Standard-Übersicht nicht einstellen. Unter Punkt 1 kann man mit einem Klick auf „Edit Icon“ eine Grafik hochladen, die dann automatisch auf 16×16 Pixel heruntergerechnet wird. Diese wird später neben dem Tab auf der Facebook-Fansite dargestellt.

Hier könnt ihr beispielsweise euer Favicon verwenden, falls ihr eines habt. Die übrigen Einstellungen könnt ihr vernachlässigen, da es sich hierbei um Infos handelt, die nur von Interesse wären, wenn ihr beispielsweise Spiele- oder Anwendungs-Apps erstellen würdet, die später öffentlich gemacht werden würden. In unserem Fall entwickeln wir jedoch „nur“ eine App, um einen Tab auf der Facebook-Fanseite darzustellen. Daher können wir die leeren Felder ruhig leer lassen.

Ausnahme: Beim Reiter „Website“ muss neuerdings zwingend eine Adresse angegeben werden, damit später der Einbau des Tabs funktionieren kann. Ihr könnt der Einfachheit halber einfach die Domain eurer Webseite angeben, also z.B. http://www.meinedomain.de
Merkt euch aber genau, welche Adresse ihr hier angegeben habt, ihr braucht diese Angabe später noch zwingend!

Nun klicken wir unten auf den mit Punkt 2 gekennzeichneten Bereich „I want to build a custom tab for Facebook Pages“.

IV. Facebook-App Details für Tab richtig konfigurieren

facebook-app-erstellen_2

Hier gebt ihr nun den Tab-Namen ein, also die Bezeichnung, die später auch tatsächlich für den Tab auf eurer Facebook-Fanseite genutzt werden wird. Bei Page-Tab URL gebt ihr die Adresse zu eurer erstellten HTML- oder PHP-Datei an, die ihr eingangs erstellt habt, und die dann in eurem iframe auf der Facebook-Fansite dargestellt wird. Wer einen Server mit SSL-Unterstützung hat, kann auch unter „Secure Page-Tab URL“ noch die entsprechende HTTPS-Adresse angeben. Diese HTTPS-Adresse wird inzwischen von Facebook aus Gründen der Sicherheit zwingend gefordert. Wer kein Geld für ein SSL-Zertifikat ausgeben möchte, erfährt hier eine kostenlose Möglichkeit für Speicherplatz mit SSL-Unterstützung für eure Facebook Fanpage.

Ein Klick auf „Änderungen speichern“ und schon sind alle Einstellungen vorgenommen. Nun ist es nur noch ein winzig kleiner, aber auch durchaus versteckter Weg zur Anzeige des Tabs auf eurer Facebook-Fanpage.

V. Tab auf Facebook-Fanseite freischalten

In der linken Spalte seht ihr eine Liste mit „related Links“.

facebook-app-erstellen_3

Unter anderem befindet sich dort der Punkt „View App Profile Page“. Ein Klick hierauf bringt uns zur sog. Profil-Seite der App. Auch dort wandert unser Blick wieder auf die linke Spalte.

facebook-app-erstellen_4

Ein Klick auf „Zu meiner Seite hinzufügen“ bringt uns wieder einen Schritt näher an unser Ziel heran.

Achtung: Seit Ende 2011 gibt es den Link „View App Profil Page“ nicht mehr, da Facebook diesen Bereich umarbeitet. Um den Tab dennoch auf der eigenen Facebook-Fanpage einzubauen, ist nun ein wenig zusätzlicher Handarbeit nötig.

Kopiert euch hierzu den folgenden Link als Muster:

https://www.facebook.com/dialog/pagetab?app_id=MEINE_APPID&display=popup&next=MEINE_URL

Für MEINE_APPID gebt ihr stattdessen die ID eurer App ein. Die könnt ihr zum Beispiel an der Stelle nachlesen, die ihr oben auf meinem ersten Screenshot unter Punkt III. sehen könnt. Kopiert euch eure App-ID und fügt sie an der entsprechenden Stelle in den Musterlink ein.

Zudem müsst ihr nun MEINE_URL ersetzten durch die Website-URL, die ihr bei III. unter „Website“ eingegeben habt und euch merken solltet. Hat eure App die ID 1234567890 und ihr habt die Adresse „http://meinedomain.de“ als Website angegeben, würde euer Link nun beispielsweise so aussehen:

https://www.facebook.com/dialog/pagetab?app_id=1234567890&display=popup&next=http://meinedomain.de

Kopiert den fertigen Link nun in die Adresszeile eures Browsers und ruft die Adresse auf. Nun sollte das Popup-Fenster erscheinen, welches früher auf einfacherem Weg über entsprechende Links erreichbar war.

Wir haben es jetzt fast geschafft und sind nur noch einen kleinen Schritt von unserem eigenen Tab auf unserer Facebook-Fanseite entfernt, welcher im folgenden Fenster auf uns wartet.

facebook-app-erstellen_5

Hier wählt ihr einfach die Seite aus, auf der der neue Tab erscheinen soll und klickt auf den Button „Der Seite hinzufügen“. Das war es!

VI. Wissenswertes

Wenn ihr nun einen Blick auf eure Fanseite werft, werdet ihr den entsprechenden Tab sehen. Ein Klick darauf und im Inhalts-Bereich der Facebook-Fanpage wird eure HTML- oder PHP-Datei als iframe angezeigt. Wenn ihr mehrere Tabs auf diese Weise erstellt habt, könnt ihr die Reihenfolge ändern, indem ihr bei eurer Fanseite unterhalb des Tabs auf „Bearbeiten“ klickt.

Wollt ihr hingegen beispielsweise den Namen des Tabs, sein Icon oder den Link zur HTML- oder PHP-Datei ändern, geht ihr einfach wieder auf die Entwickler-Seite, wählt die jeweilige App aus der linken Spalte aus und klickt dann rechts oben auf „Edit Settings“.

Ich hoffe, dieses Tutorial wird künftig dem ein oder anderen von euch helfen, seine Facebook-Fanseite ein wenig weiter auszubauen und neben den Links auf aktuelle Artikel noch weitere interessante Inhalte anzubieten.

Habt ihr selbst eine Fanpage bei Facebook? Wolltet ihr vielleicht sogar schon mal einen weiteren Tab hinzufügen und wusstet nur nicht, wie ihr das anstellen könnt? Welche Inhalte würdet (oder werdet) ihr auf einer Facebook-Fanseite mit einem separaten Tab darstellen?


Anzeige