[Aktualisiert] Facebook Tab erstellen mit Webseiten-Weiterleitung

[Aktualisiert am 08. Januar 2017] Webseiten-Weiterleitung im Reiter funktioniert nicht mehr

Die Einbindung einer Webseiten-Weiterleitung als Reiter auf Facebook-Seiten ist leider nicht mehr möglich. Wenn du die weiter unten von mir beschriebene externe App eingebunden hast, dann funktioniert diese nun nicht mehr.

Du kannst die App wie folgt löschen:

  1. Klicke auf deiner Facebook-Seite auf Einstellungen
  2. Dann auf Apps
  3. Klicke „x“ um die App zu löschen.

2Bisher gibt es noch keine Alternative, wie man eine Webseiten-Weiterleitung in eine Facebook-Seite integrieren kann.

 

 

Den Facebook Tab einrichten

  1. Gehe zu https://apps.facebook.com/static_html_plus
  2. Klicke „Add Static HTML to your page“ (der blaue große Button)
  3. Wähle die Facebook-Seite aus
  4. Klicke „Seitenreiter hinzufügen
  5. Klicke „Edit Tab“ (grüner Button)
  6. Füge das folgende Script in die index.php ein und achte darauf http://DOMAIN.com mit deiner Webseite zu ersetzen: Code für Webseitenweiterleitung – Facebook Reiter
  7. Klicke „Save & Publish“ → Fast fertig!
  8. Teste ob die Weiterleitung funktioniert, indem du deine Facebook-Seite öffnest. Am besten gehst du dafür mit einem anderen Profil als deinem auf deine Facebook-Seite und klickst darauf. Mit deinem eigenen Profil wirst du nur die Admin-Vorschau bekommen. Klicke „View on Facebook“ um die Facebook-Seite in einem neuen Browser-Tab zu öffnen.

So sieht die Bearbeitungsoberfläche aus:

html facebook tab

Vorschau: Bearbeitungsoberfläche von static html

Optional: „Enable on mobile devices“ ist die kostenpflichtige Version dieses Tabs mit der man diesen auch über das Handy aufrufen kann. In der kostenlosen Version ist das nicht möglich.

Den Tab-Namen bearbeiten

Facebook Tab-Namen bearbeiten:reiter auf Facebook

  1. Auf deiner Facebook-Seite „Reiter verwalten“ klicken
  2. Optional: hier kannst du die Reiter sortieren. Die ersten 3 Reiter sind im Hauptmenü unter deinem Titelbild sichtbar, wenn die Namen nicht zu lang sind. Der 1. Reiter „Info“ ist immer vorne.
  3. Reiter hinzufügen oder entfernen
  4. Klicke „Einstellungen bearbeiten“ bei der App dessen Namen du ändern möchtestFacebook Tab Einstellungen
  5. Füge deinen Namen bei „Custom Tab Name:“ ein
  6. klicke „Speichern


Richtig cool wird es, wenn du Sonderzeichen einfügst im Namen wie auf meiner Seite www.facebook.com/KatrinHillcom;-)

 

Facebook Tab-Symbol bearbeiten:

  1. Klicke bei „Eigenes Symbol“ Symbol auf „Ändern“
  2. Ein neues Fenster öffnet sich und du kannst auf dem Bild auf „Bearbeiten“ klicken
  3. Klicke „Datei auswählen“ und lade dein eigenes Bild hoch mit den Maßen 111 x 74 Pixel
  4. Das Bild ist automatisch gespeichert
  5. Prüfe dein Ergebnis auf der Facebook-Seite. Das Bild siehst du derzeit weiter unten links auf der Facebook-Seite.

Das Tab-Symbol erstellen kannst du mit einem Programm wie Photoshop oder du nutzt das kostenlose Online-Grafik-Tool www.canva.com. Ganz rechts oben siehst du nach der Anmeldung „Use custom dimensions“ wo du 111 x 74 Pixel eintragen kannst. Eine Anleitung für das Tool findest du hier.

Eine 2. Weiterleitung einrichten

  1. Gehe zu https://dashboard.statichtmlapp.com
  2. Wähle deine Facebook-Seite
  3. Klicke „Add new tab“ (oranger Button)
  4. Füge den Reiter-Namen einFacebook-Reiter erstellen
  5. Klicke „Add tab now
  6. Klicke „Go to tab
  7. Du wirst auf deine Facebook-Seite weitergeleitet
  8. Klicke „Set up Tab
  9. Folge der 1. Anleitung ab Schritt 6

Du kannst beliebig viele Reiter einfügen.

Webseite einbinden statt weiterleiten

Nachteile

Wie du in der Vorschau unten siehst, hat man in der kostenlosen Version ein großes, unschönes Banner. Daher empfehle ich – mit dieser Variante eher die Weiterleitung. Weiterhin zieht sich die Einbindung meist nicht die Fotos der Webseite, so dass es eher unschön aussieht.

  1. Gehe zu https://dashboard.statichtmlapp.com
  2. Wähle deine Facebook-Seite
  3. Klicke „Add new tab“ (oranger Button)
  4. Füge den Reiter-Namen ein
  5. Klicke „Add tab now
  6. Klicke „Go to tab
  7. Du wirst auf deine Facebook-Seite weitergeleitet
  8. Klicke „Set up Tab
  9. Klicke „Embed your website
  10. Klicke „Use website App
  11. Füge die URL ein und aktualisiere die Ansicht

einbindenWelche Reiter fügst du hinzu? Verlinke sie gerne im Kommentar!

email

47 Kommentare
  1. Maria says:

    Hi,
    ich habe einen neuen Tab erstellt, aber Facebook erlaubt die Weiterleitung nicht mehr.
    Gibt es eine andere Lösung oder wie kann ich den neuen Welcom-Tab wieder löschen?
    Grüße

    Antworten
  2. Claudia says:

    Hallo,
    ich kann gar keine Tabs mehr bearbeiten oder erstellen, wollte die Notizen aktivieren… nix geht? Woran kann das liegen, Neustart ist schon erfolgt 😉

    Antworten
    • Heike says:

      Hallo Stefan,

      vielen Dank für den Link. Schauen wir uns gerne mal an!

      Liebe Grüße,
      Heike
      (Team Katrin Hill)

      Antworten
  3. Raf says:

    Hallo,
    wie kann ich den Tab „Willkommen“ auf „Startseite“ umlegen/-leiten..!?
    Vielen Dank im Voraus

    LG Ralf

    Antworten
    • Heike says:

      Hallo Ralf,

      welchen Tab meinst du mit „Willkommen“? Kannst du mal einen Link schicken?

      Liebe Grüße,
      Heike
      (Team Katrin Hill)

      Antworten
        • Katrin
          Katrin says:

          Hallo Maria, ich könnte mir vorstellen, weil dieser Link https hat – also SSL verschlüsselt ist? Ist dein Blog SSL verschlüsselt? Bei mir hat es trotz Verschlüsselung nicht geklappt. Eine andere Erklärung hätte ich in diesem Fall aber nicht. LG nach Kenia! Katrin

          Antworten
          • Maria says:

            Hallo Katrin,
            Das kenne ich nicht mit dem SSL – habe aber kontrolliert und der Blog ist nicht verschlüsselt.
            Doch habe ich es jetzt gefunden wie man es machen kann. Es gibt einen neuen Link und mit dem geht es…
            http://codepen.io/thunderpenny/pen/gpOEWV?editors=100
            Habe 3 neue Apps eingefügt und die funktionieren 🙂
            Wünsche dir noch viel Freude bei der „Arbeit“. Sonnige Grüsse – Maria

      • Maria says:

        Hallo Katrin,
        ich habe noch einen Nachtrag zu meinem Kommentar – der Spendenbutton wurde mit einem „script src“ gemacht und die anderen mit der Url vom Blog. Hoffe das sagt dir was, weil ich nämlich nicht die grosse PC Kennerin bin. Vielleicht liegt es an diesen verschiedenen Daten… LG Maria

        Antworten
  4. Eileen Piechot says:

    Hallo,
    ich habe einen neuen Tab erstellt, aber Facebook erlaubt die Weiterleitung nicht mehr.
    Gibt es eine andere Lösung oder wie kann ich den neuen Welcom-Tab wieder löschen?
    Grüße
    Eileen

    Antworten
    • Eileen Piechot says:

      Hallo nochmals,
      ich konnte den Tab löschen. Gibt es eine andere Möglichkeit Tabs zu erstellen oder hat fb das komplett unterdrückt?
      Ihre Anleitung hat ansonsten hervorragend funktioniert.
      Grüße
      Eileen

      Antworten
      • Katrin
        Katrin says:

        Hallo Eileen, ich habe noch keine andere Lösung gefunden. Woobox.com bietet es in der kostenlosen Version an, allerdings hat es bei meinem Text nicht funktioniert. LG Katrin

        Antworten
        • Eileen Piechot says:

          Hallo Katrin,
          ganz herzlichen Dank für Ihre Antwort. Wenn sich in diese Richtung was tut, können Sie mir Bescheid geben?
          Das wäre super.
          Grüße
          Eileen 🙂

          Antworten
          • Heike says:

            Liebe Eileen,

            bekommst du Katrins Newsletter und folgst du ihr auf Facebook?
            Darüber bekommst du Neuigkeiten direkt mit 😉

            Liebe Grüße,
            Heike
            (Team Katrin Hill)

  5. Daniel says:

    Hallo Frau Hill,

    vielen Dank für die Anleitung! Hat wunderbar funktioniert.
    Allerdings nur für einen neuen Tab.
    Einen weiteren konnte ich nicht anlegen, selbst wenn ich die „App Static HTML… [Second Tab]“ oder weitere aus der Reihe nutzen will, komme ich immer beim identischen Fehler an:
    Bei „Tab zur Seite hinzufügen“ steht geschrieben: „Alle Facebook-Seiten, deren Administrator du bist oder auf denen der Tab für diese App bereits installiert war.“

    Haben Sie einen Rat?
    Was mache ich falsch?
    Danke! 🙂

    Antworten
    • Heike says:

      Liebe Christine,

      schau mal in deinen Einstellungen unter Seite bearbeiten oder auf deiner Startseite links ganz unten in der Navigation.
      Wenn du es immer noch nicht findest, dann schicke mir gerne einen Screenshot und den Link zu deiner Facebook-Seite an mail@katrinhill.com. Dann kann ich mir das mal näher anschauen.

      Herzliche Grüße,
      Heike Kotthoff
      (Support katrinhill.com)

      Antworten
  6. Hausperger says:

    Liebe Katrin, vielen lieben Dank. Wie krieg ich denn mehr YouTube Videos auf einen Reiter? Ich kann nur immer ein Video reinstellen. Vielen lieben Dank 🙂

    Antworten
  7. Natalie says:

    Hallo,
    ich habe Schritt 1-5 gemacht und musste die Seite dann schließen. Wie komme ich jetzt wieder zu Schritt 6? Von vorne machen funktioniert nicht.

    Viele Grüße
    Natalie

    Antworten
    • Katrin
      Katrin says:

      Hallo Natalie,
      ist der Reiter schon deiner Seite hinzugefügt worden? Dann kannst du ihn einfach editieren. Unter „Einstellungen“ und dann „Seite bearbeiten“ sollte der Reiter einsehbar sein. LG Katrin

      Antworten
  8. Silvia says:

    Liebe Katrin,
    ich habe entsprechend deiner Anleitung schon einmal erfolgreiche einen Reiter installiert. Jetzt wollte ich einen mit Webseiten-Weiterleitung hinzufügen, aber die App bietet mir immer wieder nur die Chor-Seite zur Auswahl an, obwohl ich mit meiner Seite https://www.facebook.com/PurnimaSystemEnergethik/ reingehen. Hier siehst du, wie das in der App aussieht: https://www.facebook.com/photo.php?fbid=10209159734888713&set=p.10209159734888713&type=3&theater Hast du einen Rat für mich?

    Antworten
  9. sandra says:

    Liebe Katrin
    Vielen Dank für diese tolle und einfache Erklärung. Kann ich den die bestehenden Tabs auch ändern? Da hab ich irgendwie keine Lösch oder Änderfunktion.

    Liebe Grüsse
    Sandra

    Antworten
  10. Damaris says:

    Danke auch für die Anleitung, das war extrem hilfreich. Allerdings habe ich ein Problem, nämlich wenn man auf die Apps klickt und auf die entsprechende Seite weitergeleitet wird, und dann wieder zurück zur FB Seite möchte geht das immer im Kreis, sprich man landet immer bei der App. Was kann ich dagegen tun?

    Antworten
    • Katrin
      Katrin says:

      Damaris, du könntest statt einer Weiterleitung die Seite in einem neuen Fenster öffnen. Den Code dafür kenne ich allerdings nicht.

      Antworten
  11. Christine says:

    N’Abend 🙂
    Also bis zum ersten Tab hat’s super geklappt, ich habe gleich mal meinen neuen Spreadshirt-Shop https://shop.spreadshirt.de/paraknots verlinkt 😀
    Bei der zweiten Verlinkung möchte die App irgendwie meine Seite verwalten… da hab ich dann mal lieber schnell abgebrochen, das war mir nicht geheuer.
    Ist das normal?
    Liebe Grüße
    Christine

    Antworten
  12. Susi Bayer says:

    Hallo Katrin,
    vielen Dank für diese Tipps. Habe gleich mal ein paar Apps erstellt und mich noch ein zweites Mal zur Challenge angemeldet. Manche Dinge müssen reifen und dringen erst beim zweiten Mal durch 😉
    Ich freue mich darauf und auf das Ergebnis!
    Viele liebe Grüße
    Susi

    Antworten
  13. Katharina says:

    Sehr gute Anleitung, allerdings hat sich ein kleiner Fehler eingeschlichen: Bei ‚http://DOMAIN.com‘ müssen keine Anführungszeichen gesetzt werden, sondern vorne und hinten Hochkomma. Also ‚http://domain.com‘.
    Viele Grüße
    Katharina

    Antworten

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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

CommentLuv badge