Facebook Tabs sind beliebige Internetseiten, die man via Facebook-Anwendung in die eigene Facebook-Seite integrieren kann.
Ein solcher Inhalt kann auch aus dem CMS TYPO3 kommen und mit dem CMS befüllt werden.
Die Erstellung eines solchen Tabs ist einfach, aber irgendwie auch doch nicht. Andauernd ändert die Benutzerführung in Facebook und eine Anleitung im Web, so auch diese ist, vielleicht morgen schon wieder ungültig.
Ich halte mich kurz und verweise nur auf Punkte, bei denen ich wirklich lange suchen musste und die nicht wirklich offensichtlich sind.
Voraussetzungen
- persönlicher Facebook-Account + eingeloggt sein in Facebook
- Facebbook-Developper-Account (setzt 1. voraus)
- Webseite, sprich Inhalt für den Tab
- https-Verschlüsselung dieser Webseite
Anwendung für Tab erstellen
- Gehe auf http://www.facebook.com/developers/
- Erstelle eine neue Anwendung
(die Facebbook-Hilfestellungen sollten mehr oder weniger verständlich sein, wenn auch sprachlich Deutsch und Englisch bunt gemischt ;-). - Erfasse eine Anwendung des Typs “Seitenreiter” (siehe Screenshot)
Anwendung in Facebook-Seite einbinden
Jetzt kommt der Part, der entweder nicht dokumentiert ist, oder zumindest für mich als Lesefaulpelz nicht ohne weiteres auffindbar war:
- Kopiere die App ID (siehe Screenshot oben)
- Füge sie in den folgen Link anstelle von YOUR_APP_ID ein:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=http://www.facebook.com/ und rufe die URL auf - Bist du in Facebook eingeloggt, wirst du nun gefragt, auf welcher Seite du die Tab-Anwendung einbinden möchtest.
- Gewünschte FB-Seite auswählen und “schwupp” der Tab ist dort dann eingebunden.
Beispiel, wie HEKS Inhalte ihrer TYPO3-Website als Tab in ihrer Facebook-Seite eingebunden hat.
Wir beantworten Ihre Fragen zu Social Media
snowflake berät Sie in vielen weiteren kleinen und grossen Fragen rund um Social Media.
Danke Thomas für dein Feedback!
HEKS: Der Hilfe-Schenken Tab ist korrekt, den Inhalt generiert HEKS selber. Der Tab könnte noch eine Grafik vertragen.
Beispiel 2: Der horizontale Scrollbalken muss weg, ja und die Höhe ist inhaltsabhängig. HEKS ist informiert.
Das die Integration von “statischen Seiten” nichts bringt, da muss ich dir widersprechen. Was du letztlich mit TYPO3 für einen Seiteninhalt generierst, da bist du ja völlig frei. Es kann ein Formular sein, eine Spendenapplikation, ein Game was immer du willst.
Hi Sergej
Alle Links funktionierten. Die Anleitung richtet sich an User, die bereits eine gewisse Erfahrung haben im Umgang mit Facebook.
Gruss Mathias
Hrm… ich werde gebeten, eine Secure URL anzugeben, wenn Sandbox deaktiviert ist.
Aktiviere ich sie, können offenbar nur Developer drauf zugreifen.
Deaktiviere ich sie, besteht FB auf eine Secure URL. Da ich auf eine einfache Seite auf meinem Webserver verlinke, geht dort https nicht.
und nun?
P.S.: Danke für die tolle Anleitung!
Ergänzung… Ich habe jetzt unter “Secuere URL” eine einfache http Adresse eingegeben. Nun habe ich einen Tab, der auf http://www.meineURL.de/fb-impress.html verweist.
fb-impress.html ist eine einfach HTML-Datei.
Leider wird die nicht angezeigt.
Offenbar geht es nur, wenn die Site auch mit https läuft. D.h. SSL-Zertifikat kaufen und die Site entsprechend einrichten.
Hi Ralph
– https ist offenbar Voraussetzung. Siehe obige Feedbacks.
– Hast du die APP-ID im folgenden Link eingesetzt?
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=http://www.facebook.com/
z.B. gemäss:
https://www.facebook.com/dialog/pagetab?app_id=316611341688954&display=popup&next=http://www.facebook.com/
– Ein FB Tab lässt sich nur auf einer Gruppenseite einbinden, nicht aber auf einer persönlichen Seite wie es aussieht.
hier steht immer es ist kein Tab mehr frei
Ich habe eine Seite nach der Anleitung erstellt.
Ich sehe den Tab, aber beim klick auf den Tab sehe ich keinen Inhalt.
Die Seite sind in http.
Geht dies nur über https oder muss noch etwas anderes gemacht werden?
Unter Prüfstatus steht Vorschau / Absenden
Geht nur mit zusätzlichem https-Link.
wenn ich auf eine Anwendung (z.Bsp. that’s subaru) klicke, welche wir programmiert und eingefügt haben, verlinkt diese nicht mehr weiter bzw, es kommt eine Fehlermeldung.
Im Developper ist aber nichts verändert worden.
Wir haben die Anwendung auch schon entfernt und wieder neu installiert.
Jetzt schon vielen Dank für Ihr Feedback
Freundliche Grüsse
Jan Wernli
Dies müsste ich genauer anschauen. Bzw. mehr Details kennen. So kann ich das nicht beantworten.
Welche Fan-Page, Welcher Inhalt? Welche Fehlermeldung?
Vielen Dank für diese tolle Anleitung!
Ich nutze die Facebook Reiter immer um ein Impressum für meine jeweiligen Projekte zu erstellen. Ohne diese Anleitung hätte ich mich sicherlich nie daran getraut.
@alle: In vielen Kommentaren habe ich gelesen, dass eine Verlinkung auf http://… nicht funktioniert. Es funktioniert nur mit Seiten, deren Hoster https-Protokolle anbietet. Wenn ich das richtg gelesen habe, bietet wohl facebook einen kostenlosen (?) Hostingservice an, der das leistet. Hat jemand das schon genutzt und Erfahrungen damit? Das würde mich (und viele andere bestimmt auch) interessieren!
LG
Maria
Vielen Dank für dein Feedback und deine Ergänzung!
Wenn ich dem Link folge, erhalten ich eine Fehlerseite….?
Wenn der Link aus der Anleitung Punkt 2. gemeint ist, dann liegt das daran, dass man im Link den Abschnitt “YOUR_APP_ID” je ersetzen muss, damit es funktioniert. Die anderen Links funktionieren eigentlich (?).
Vielen Dank für die Anleitung. Hat soweit auch alles geklappt. Ich habe 3 Tabs programmiert (Soundcloud, Youtube-Kanal und Beatport). Alle haben eine https adresse. von den 3 geht aber nur der Link zu Beatport. Bei Soundcloud kommt zwar die WWW aber mit einer “sorry, wir konnten dich nicht verbinden” nachricht. Beim Youtube-Kanal kommt nix. ich lasse die Tabs noch kurze Zeit oben, wenn jemand schauen will.
https://www.facebook.com/malunstune
Vielen Dank und liebe Grüsse
Die Tabs sind nun nicht mehr sichtbar (?). Kann gut sein, dass das iFrame nicht einfach alles “frisst”.
Kuck mal wie sie das mit Youtube gemacht hat: https://www.facebook.com/hobas/app_212104595551052
Hallo!
Tolles Tutorial, hat bei mir auch prima funktioniert. Leider erscheint die Seite in der FB Anwendung aber nicht korrekt. Irgendeine Idee warum? https://www.facebook.com/hobas/app_220427614786424
Der Tab ist nun nicht mehr sichtbar (?). Kann gut sein, dass das iFrame nicht einfach alles “frisst”.
habe bisher immer so meine facebook seiten erweitert, nun gibts es diese app nicht mehr…. danke facebook. ihr affen
hallo und danke für die super ausführung zu den tabs (seitenreiter). ich versuchte tabs auf meiner fanpage einzurichten. aber irgendwie scheint dies mit der anzeige des inhalts nicht richt zu klappen (insbesonder nicht bei soundcloud, twitter, mixcloud). wie kann ich meinen inhalt anzeigen lassen? danke um ein feedback.
lieber gruss
alan
Ich denke das gewisse Funktionen unterbunden sind. Ohne Beispiellink und genaue Fehlerbeschreibung kann ich dir nicht weiterhelfen
Pingback: Wie Sie Ihre Facebook Tabs individualisieren
Hallo,
ich habe versucht, meinen Blogspot-Blog
http://gemmure.blogspot.de/
mit der oben vorgestellten Methode auf meiner Facebook Fanpage einzubinden
(https://www.facebook.com/pages/Perlen-Schl%C3%B6sschen/241238722748062).
Hat soweit geklappt, doch beim Draufklicken erscheint “Method Not Allowed Error 405″.
Was mache ich falsch?
Danke, Bettina
Ich kann den Fehler nicht nachvollziehen? Meinst du den Tab “Mein DaWanda Shop”? Wo hast du drauf geklickt?
Nachdem ich die App-ID in den Link eingefügt habe, erscheint mir eine Seite mit der Fehlermeldung “Diese Anwendung unterstützt die Einbindung in dein Profil nicht.” Woran kann das liegen?
hat wunderbar geklappt vielen Dank. Gibt es evtl. auch eine Möglichkeit die App (Website) an das Format bei FB anzupassen. Ich habe leider nichts gefunden und meine Seite “schwimmt” irgendwie, weil sie viel zu groß angezeigt wird.
Vielen Dank schon mal für eine Antwort.
LG