Facebook Tabs erstellen und einbinden

08. Juni 2012 von Mathias Nöthiger Veröffentlicht unter Online Marketing/Social Media Verschlagwortet mit , ,

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.

Facebook-TabDie 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

  1. persönlicher Facebook-Account + eingeloggt sein in Facebook
  2. Facebbook-Developper-Account (setzt 1. voraus)
  3. Webseite, sprich Inhalt für den Tab
  4. https-Verschlüsselung dieser Webseite

 Anwendung für Tab erstellen

  1. Gehe auf http://www.facebook.com/developers/
  2. Erstelle eine neue Anwendung
    (die Facebbook-Hilfestellungen sollten mehr oder weniger verständlich sein, wenn auch sprachlich Deutsch und Englisch bunt gemischt ;-).
  3. 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:

  1. Kopiere die App ID (siehe Screenshot oben)
  2. 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
  3. Bist du in Facebook eingeloggt, wirst du nun gefragt, auf welcher Seite du die Tab-Anwendung einbinden möchtest.
  4. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

41 Gedanken zu “Facebook Tabs erstellen und einbinden”

  1. 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.

    Kommentiere ↓

  3. 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!

    Kommentiere ↓

    • Offenbar geht es nur, wenn die Site auch mit https läuft. D.h. SSL-Zertifikat kaufen und die Site entsprechend einrichten.

  4. 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.

    Kommentiere ↓

  6. 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

    Kommentiere ↓

  7. 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

    Kommentiere ↓

    • Dies müsste ich genauer anschauen. Bzw. mehr Details kennen. So kann ich das nicht beantworten.

      Welche Fan-Page, Welcher Inhalt? Welche Fehlermeldung?

  8. 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

    Kommentiere ↓

    • 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 (?).

  10. 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

    Kommentiere ↓

  13. 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

    Kommentiere ↓

  14. Pingback: Wie Sie Ihre Facebook Tabs individualisieren

  16. 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?

    Kommentiere ↓

    • 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

  17. Hallo Matthias,

    … danke fuer die tolle Anleitung, auch mit aelteren Screenshots (der Post ist ja auch schon ne Weile her 😉

    Meine selbst erstellte FB-APP (unter developers.facebook.com) wird auf Firmen-FB-Seite NUR angezeigt, wenn ist angemeldet ist.

    Im Detail:
    Alles hat gut funktioniert, einschliesslich das Hinzufuegen der eigenen APP in eine von mir (als Admin) betreuten Firmen-FB-Seiten.

    ABER – Man kann die APP (links in der Chronik) NUR sehen, wenn man angemeldet ist.

    Was muss man tun, um die APP auch unangemeldeten Users sichtbar zu machen.

    Hasst Du einen Ansatz, woran das liegen kann?
    Vielen Dank fuer die Hilfe!
    GMike

    Kommentiere ↓

  19. Hallo, vielleicht kannst du mir die Frage beantworten.

    Kann man einen neuen Reiter oder Tab bei einer Facebook Gruppe selber hinzufügen ….

    danke

    Kommentiere ↓

  20. Hallo,
    habe den Tab wie beschrieben hinzugefügt (https). leider befindet sich nach klick auf tab kein Inhalt darin.
    gibt es dafür eine Erklärung?
    Vielen Dank.

    Kommentiere ↓

    • Hallo Bernhard, das könnte diverse Ursachen haben. Kannst du mir den Link zur Facebook-Seite und zur Seite, die du weiterleiten möchtest geben? Allenfalls finden wir so heraus warum es nicht klappt. Liebe Grüsse Micky

  21. Hallo,
    ich habe zwar eine App-ID erstellen können, aber ich komme nirgendwohin, was dem Screenshot ähnlich ist. Wo finde ich das jetzt, wie komme ich dahin, d.h. die Maske auf dem Screenshot?

    Kommentiere ↓

  22. Hallo,
    ich habe es so gemacht und der Tab ist auch auf unserer Seite nun sichtbar. Leider verlinkt er nicht auf die URL, die ich eingefügt habe…an was kann das liegen?
    Danke für eine kurze Hilfe.

    Kommentiere ↓