Facebook Fanpage: iframe Tab Tutorial inklusive Code-Beispiel

Nils how-to 32 Comments

Am 11. Februar 2011 hat Facebook den Fanpages ein neues Layout verpasst und gleichzeitig die Möglichkeit geschaffen, die manuellen Reiter für Fanseiten nun auch per iframe einzubinden. Mehr noch: Facebook wird die bisherige Möglichkeit, diese Fanpage Tabs per Static FMBL zu erstellen, ab Mitte März abschalten (zumindest für das Neuanlegen der Tabs, bestehende FMBL-Reiter bleiben natürlich erhalten). Dennoch sollte jeder Betreiber einer Fanpage prüfen, ob nicht ein Wechsel von Static FBML zu iframe angebracht ist. Welche Vor- und Nachteile das bringt, hat facebookmarketing.de ausführlich dargelegt.

UPDATE 01.03.12: Timeline für Pages:

Schon seit einiger Zeit hat Facebook Änderungen an den Schnittstellen zur Erstellung von Facebook Apps und Page Tabs vorgenommen. Zudem gibt es seit 29. Februar 2012 die neue Timeline-Ansicht auch für Pages. Dadurch ändert sich die Seitenbreite der Fanpage-Reiter von 520 Pixel auf maximal 810 Pixel, ich habe dies im hier verfügbaren Code für die Fanpage-Tabs entsprechend angepasst.

Da ich schon einmal eine Anleitung hier im Blog geschrieben habe, wie man die damaligen Static FBML-Tabs anlegt, ist es nur logisch, dass nun ein Tutorial zum Erstellen von iframe-Tabs für Facebook Fanpages folgt. Auch hier gilt wieder, dass es nicht nur – wie bei unzähligen anderen Anleitungen, How-tos oder Tutorials zum Thema iframe Fanpage Tab – dabei bleibt, wie man den Tab bei Facebook im Developer-Bereich als App anlegt. Es soll vor allem am Ende auch ein sinnvoller Beispiel-Code herauskommen, den jeder als Template für eigene iframe-Tabs verwenden kann.

Erstellen einer iframe-Fanpage

Schritt 1: Der CSS-Code für die Facebook Fanpage

Wie schon bei den Static FBML-Tabs kommt für das Design der iframe-Tabs natürlich wieder CSS zum Einsatz. Man könnte zwar auch auf reines html setzen, beispielsweise wenn man nur ganz wenige Infos darstellen möchte oder gar nur ein Bild anzeigen will. Wir wollen aber vor allem im Fanpage-Reiter ein mehrspaltiges CSS-Layout schaffen, so dass dieser Schritt unabdingbar ist. Hat man schon einen FBML-Reiter programmiert, so kann das dort verwendete CSS leicht weiter verwendet werden. Andernfalls erstellt man sich ein komplett neues Layout. Wenn man sich mit CSS nicht so gut auskennt, ist der einfachste Weg für die grobe Erstellung des gewünschten Layouts ein CSS-Layout-Generator.

Ganz wichtig ist die Seitenbreite. Facebook ermöglicht hier maximal 520 Pixel. Diese gibt man im CSS am besten der body-Klasse mit. Ich habe mich für das Beispiel für ein einfaches Layout, bestehend aus Header, linker Content-Spalte, rechter Sidebar und Footer entschieden. So hat man eine Menge Gestaltungsmöglichkeiten und kann Informationen unterbringen.

2. Schritt: Der eigentliche html-Code

Auch dafür kann man von eventuell vorhandenem FBML-Reitern viel übernehmen. Im Unterschied dazu benötigt man allerdings bei den iframe-Tabs ein vollständiges html-Dokument, komplett mit head und body-Tags. In diesem html-Dokument wird dann durch Ansprache der eben erstellten CSS-Stile mittels diverser DIV-Container das Layout angelegt. Und man braucht natürlich im html die Referenz auf die CSS-Datei. Wer einen CSS-Generator verwendet, für den wird die Erstellung der html-Datei im Normalfall direkt mit erledigt, so dass auch html-Neulinge damit zurecht kommen sollten.

Ich empfehle http://csslayoutgenerator.com/ für das Erstellen von CSS- und html-Layout.

3. Schritt: Die Inhalte einfügen

Natürlich nützt uns eine leere CSS-html-Kombination nicht viel, es müssen auch Inhalte rein. In meinem FBML-Tutorial hatte ich seinerzeit neben normalen Texten auch ein Navigationsmenü mit diversen Reitern sowie per fb-random wechselnde Inhaltsbereiche. Letztere wechselnde Inhaltsbereiche waren aber dazu gedacht, zwischen Fan und Nicht-Fan umzuschalten. Um eben Usern, die schon Fan geworden sind nicht nochmals diese Aufforderung anzuzeigen. Darauf kann man nun getrost verzichten, da im iframe-Tab die Facebook Likebox eingebunden werden kann. Diese wechselt automatisch von Nicht-Fan zu Fan.

Außerdem habe ich im Code beispielhaft ein Youtube-Widget eingebunden. Letztlich kann man im iframe so ziemlich alles machen, was html oder JavaScript hergeben. Da sind im Gegensatz zu den bisherigen FBML-Tabs sehr wenige Grenzen gesetzt.

Ich denke, mit dem hier bereitgestellten Grundgerüst lässt sich die Seite relativ leicht füllen. Ich gehe daher nicht weiter auf sonstige Möglichkeiten ein. Wer wissen mag, wie man eine Seite in html anlegt, möge sich beim W3C oder sonstwo im Web kundig machen, das hat dann nichts mehr mit Facebook zu tun.

Jetzt kann man die fertig erstellte CSS. und html-Datei auf den eigenen Server hochladen. Wichtig ist, dass man sich den Dateinamen der html-Datei merkt, dieser wird gleich benötigt.

4. Schritt: die eigentliche Facebook-App anlegen

Jeder iframe-Reiter ist bei Facebook eine eigene App. Zunächst einmal braucht man also Zugang zum Developer-Center bei Facebook. Der lässt sich aber kinderleicht anlegen. Dann erstellt man eine neue App. Der App-Name kann dabei nach eigenem Gusto gewählt werden. Hat man das Captcha überwunden, landet man auf folgendem Screen:

Startscreen einer Facebook-App

Dort hat man die Möglichkeit, der App ein eigenes Logo zu geben. Das ist sinnvoll, denn dieses Logo wird auf der Fanpage dann nebem dem Link zum Reiter angezeigt. Hat man das gemacht, wechselt man in diesem Bildschirm auf den Punkt “Facebook Integration”. Dort wird die eigentliche Einstellung vorgenommen, am Ende muss sie wie folgt aussehen:

Schritt 2 des App-Anlegens, hier wird die Html-Datei angegeben

Wichtig ist hier die Canvas-URL, das ist der Pfad, wo die Dateien auf dem eigenen Server liegen. Ebenso muss natürlich “iframe” als Canvas Type ausgewählt sein. “Auto-Resize” bei der iframe-Size ist ein weiterer wichtiger Punkt, auf den ich gleich noch eingehe. Er verhindert im Zusammenspiel mit einem Schnippsel Javascript, dass hässliche Scrollbars angezeigt werden. Unten wird dann noch der Tab Name, also der Name, der dann beim Reiter stehen soll angegeben sowie der eigentliche html-Dateiname. Die Tab-URL setzt sich also zusammen aus http://apps.facebook.com[http://www.pfad-zu-den-dateien.de/]html-dateiname.html . Dann abspeichern und fertig. Nun sollte man sich noch die ApplicationID notieren, die wird gleich noch gebraucht.

5. Schritt: angelegte App zur Fanpage hinzufügen

Dazu muss man nur die App aufrufen (entweder nach dem Namen suchen oder bei den eigenen Apps auswählen) und dort dann auf “Application Profile Page” klicken. Es öffnet sich die Canvas-Page der App, auf der dann links “Add to My Page” ausgewählt werden kann um die App zur eigenen Fanpage hinzuzufügen.

Problem: Höhe des Tabs

Facebook erlaubt den iframe-Tabs nur eine bestimmte maximale Höhe. Danach werden in der Standard-Einstellung automatisch unschöne Scrollbars angezeigt. Es ist aber möglich, das zu verhindern, indem man ein bisschen JavaScript einsetzt. Darauf möchte ich hier etwas genauer eingehen, da ich eine Weile gebraucht habe, bis das bei mir funktioniert hat. Zunächst einmal muss dafür beim Anlegen der App in Facebook die Option “Auto-Resize”, wie oben beschrieben, ausgewählt werden. Im Code selber muss im html im head-Bereich des Dokumentes folgende Funktion aufgerufen werden:

Funktion zum Verhindern von Scrollbalken

Im body-Bereich wird dann ein JavaScript von Facebook geladen, welches in Verbindung mit der App-ID und obiger head-Funktion die Höhe des Contents variabel gestaltet, so dass keine Scrollbars mehr erscheinen. Man muss diese Funktionen nicht verstehen. Wichtig ist nur, dass man hier seine vorher notierte App-ID angibt.

Funktion zum Verhindern von Scrollbalken, zweiter Teil.

Ich finde, Facebook hat mit den neuen iframe-Tabs eine Vielzahl an neuen Möglichkeiten geschaffen. Den fertigen Code gibt es zum direkten Download hier:

Facebook Iframe Tab (CSS-Template)

Facebook Iframe Tab (HTML-Template)

Ich weise darauf hin, dass ich keinerlei Support geben kann. Am Rande sei aber noch bemerkt, dass es durch die iframe-Einbindung nun aber auch möglich ist, direkt Code-Beispiele von anderen Fanpages zu ziehen. Dazu einfach den Quellcode auf Facebook anzeigen.

Auf unserer Fanpage von teltarif.de lässt sich im Reiter “über uns” ein schönes Beispiel einer iframe-Einbindung, wie hier beschrieben, finden.

Comments 32

  1. Pingback: Tutorial: Facebook-Fanpage mit Static FBML - himynameisnils

  2. Martin

    Hallo danke für den schönen Beitrag :)

    Eine Frage habe ich allerdings.

    Wie kann ich das ganze mit dem Iframe so machen, dass Leute denen meine Seite gefällt, einen anderen inhalt angezeigt bekommen, als die denen es nicht gefällt?

    1. Post
      Author
      Nils

      Hallo Martin,

      das ist etwas komplizierter als bisher bei den FBML-Tabs, wo man diesen Umschalter zwischen Fan und Non-Fan einfach per FBML erzielen konnte. Bei den iframe-Tabs geht das Fangating am ehesten über PHP-Weichen. Eine Beschreibung dazu findet sich beispielsweise hier: Fangating-Anleitung

      ciao

  3. Maria

    Hallo Nils,
    hast du eine Ahnung, wie man eine Fangating-Seite erstellen kann ohne auf PHP zurückzugreifen? Ich habe schon gelesen, dass es auch mit Javascript funktionieren soll (siehe hier Punkt 3 http://allfacebook.de/features/facebook-fan-pages-was-bringen-die-neuen-iframe-tabs-in-der-praxis), aber nirgends finde ich eine Anleitung. Auf Drittanbieter will/kann ich zum Erstellen von iframe-Seiten auch nicht zurückgreifen.
    So langsam verzweifel ich daran.
    LG

    1. Post
      Author
      Nils

      Es gibt tatsächlich einen Weg, Fangating mit JavaScript umzusetzen. Das Zauberwort heißt dabei jQuery, welches letztlich verwendet wird, um einzelne divs im Code unsichtbar werden zu lassen. Ein schönes Beispiel, wie das aussehen kann findet sich hier http://www.facebook.com/trustedshops.fr. Lässt man sich dort den Quelltext vom iframe anzeigen, so ist kann man unter anderem folgenden Code-Schnippsel finden, der das letztlich umsetzt (jeweils verpackt in ein JavaScript-Befehl):

      FB.Event.subscribe('edge.create', function(response) {
      jQuery("#fans").show();
      jQuery("#like").hide();
      jQuery("#no-fan").hide();
      });

      Zusammen mit den ebenfalls im Quellcode ersichtlichen divs “fans”, “like” sowie “no-fan” erzielt das eben einen Switch zwischen Fan und Nonfan auf dem iframe-Tab. Die angesprochene Facebook Funktion “FB.Event.subscribe” mit ihrem Status “edge.create” ist wiederum hier erklärt. Sie gibt in diesem Fall also zu jQuery-Eingaben frei, sobald der User den Like-Button klickt.

  4. Florian

    Hallo Nils, danke für das tolle Tutorial und die Download Links, die haben mir echt weiter geholfen! Ein Problem hab ich jedoch, ich hätte gerne unten in der Box 5 oder mehr und in den einzelnen Boxen sollen die letzten Artikel aus der jeweiligen Kategorie angezeigt werden. Hast du eine Idee wie man das lösen könnte? Gruß Florian

    1. Post
      Author
      Nils

      @Florian: ich glaube ich verstehe Deine Fragen nicht ganz. Mit “unten in der Box 5 oder mehr” meinst Du die Reiter? Das ist leicht, Du fügst einfach für jeden Reiter, den Du zusätzlich brauchst einen weiteren Eintrag (einfach einen anderen Reiter kopieren) ins html ein. Natürlich entsprechend benennen (#box5, #box6 etc.).

      Was Du mit dem anderen Part Deiner Frage meinst, weiß ich nicht.

  5. MArtin

    Hi Nils,
    noch einmal vielen Dank für das tolle Tutorial! Eine frage noch, wie bekommt man denn sprechende urls wie bei teltarif hin? LG, Martin

    1. Post
      Author
  6. Norman

    Hallo Nils,

    eine Frage zum Fangating. Ich würde das gern mit dem jQuery umsetzen wollen. Leider gibt es im trustedshops.fr nur einen iframe ohne die Option Fan/kein Fan. Ich hätte mir gern den Quellcode einmal angesehen als Idee für die eigene Umsetztung :(

    Hast Du eine Idee bzw. weißt noch wie es umgesetzt war?

    Besten Gruß
    Norman

  7. Post
    Author
  8. Juri

    Hi, ich bekam wieder zeit und nerv und noch ne insel zeit, um mit fanpages anzufangen, dies und das und auch ueber meinen webspace code html/css ueber app nach fanpage rein – es funktioniert. die tage noch fangating schauen, hatte ich bisher nicht gemacht und weiter basteln basteln (bastelmodus insgesamt). zuletzt hatte ich mit fbml geschaut und gemacht und so… brauch ich ja jetzt nicht *hmpf* *g*..

    da kommt mir gerade ne frage, ich poste sie mal hier, ich hoffe, sie ist nicht zu einfach oder deplaziert:
    gehe ich recht in der annahme, dass diese “tabs” wie sie vorher als “reiter” in profilen oben machbar waren.. so gar nicht mehr exisitieren und auch abgeschafft wurden?

    danke und kommt gut in die woche
    juri

    p.s. ich hab teltarif die fanpage aufgerufen als nicht-liker, kann es sein, dass die seite noch nicht auf die maximale breite von 520 angepasst ist?

    1. Post
      Author
      Nils

      Ja, das stimmt die “Reiter” sind seit der Umstellung auf iframe nicht mehr vorhanden. Natürlich lassen sich diese in ein ungefähres Look&Feel nachbauen, richtig original wird das dann aber nicht aussehen, befürchte ich.

  9. Juri

    p.p.s.: sprich, bisheriges look-and-feel (ca. stand sommer 2010) kann ich wenn ichs will nur selber “coden” dass es entsprechend so aussieht mit den “reitern” oben (die blauen dinger, war glaub ich vor ner umstellung der user-profile bei facebook).

    ach so, angenehm einfach geschrieben, der artikel, in dessen kommentar ich mich gerade befinde :) hat mir zum “erinnnern” kurzfristig und schnell via google “geholfen”.

  10. clintwood

    Also, ansonsten halte ich mich nicht für so blöd, aber beim “nachempfinden” der Anleitung werden bei mir nach wie vor häßliche Scrollbalken angezeigt. Ich habe testhalber die Downloaddateien eingesetzt, aber die Scrollbalken werde ich nicht los … Was könnte ich falsch gemacht haben?

    1. Post
      Author
  11. Sebastian

    hey,

    sehr gute Darstellung :-) Großes Lob!

    Falles es jemandem doch zu kompliziert sein sollte kann er hier mit 3 Klicks seiner Facebook Seite einen Tab hinzufügen!
    facebook.com/247GRAD

    viele Grüße aus Koblenz,
    Sebastian

    1. Post
      Author
  12. Frank

    Also irgendwie ist das doch mal wieder OberMist. Können die Leute von Facebook nicht mal ein paar Monate eine gewisse Kontinuität ihrer Seiten belassen? Trotz Deines coolen Tutorials ist es echt nicht einfach, sich auf den neuen Seiten und der neuen Anordnung durchzufinden.

  13. sabrina

    Hallo :)

    Ich habe bereits eine fanseite angelegt, blicke aber bei dem css & co überhaupt nicht durch :/
    Gibt es auch iwelche anbieter welche kostenlos fertige scripts, bzw vorlagen zur verfügung stellen? Oder seiten wo man nur noch seine eigenen bilder und texte einfügen muss und einen fertigen code bekommt?

    Würde mich rießig über hilfe freuen!

    glg Sabrina

    1. Post
      Author
      Nils Merker

      Hallo Sabrina,

      ja, solche vorgefertigten Facebook-Templates gibt es. Schau mal bei
      247 Grad oder
      Facebookpagetemplates.

      Ansonsten gibt es im Web aber auch unzählige Templates für normale Webseiten, diese sollten in der Regel auch für Facebook funktionieren, sofern sie sich flexibel in der Breite anpassen lassen. Einfache CSS-Layouts erstellt man bestenfalls, zumindest wenn man nicht weiß wie man es selber coden soll, mit einem CSS-Layout-Generator, wie diesem hier.

  14. Post
    Author
  15. Roman

    Hiho Nils !

    Das war genau die Information die ich gesucht habe, denn es hat mich gewundert das es Apps gibt die viel höher als die angegebenen 800px sind.
    Mit den 520px (510px mit Scrollbalken) konnte ich mich ja noch abfinden und ein dementsprechendes Theme erstellen, aber die 800px hätten mein Vorhaben schon sehr eingeschränkt.

    Hab das jetzt mal in meine Seite eingebaut und es funktioniert tadellos…vielen Dank dafür !

    Gruß & Horns up
    Roman

    PS:
    Hoffe nur das Facebook nicht auf die Idee kommt dieses “Hintertürchen” mal zu schließen :-)

  16. diamandi

    Hi Nils,
    vielen Dank für dieses Tutorial.
    Wir sind gerade dabei eine Fanpage aufzubauen und können Deine Tipps gut gebrauchen.
    Herzliche Grüße aus Berlin :-)

    1. Post
      Author
  17. Markus

    Super, vielen Dank für die Anleitung. Klappt aber so nicht mehr… Facebook hat seit kurzen wohl die Schnittstelle geändert. Sieht anders aus als bei dir beschrieben.
    Hier wurde ich aber fündig http://gesichtet.net/2011/09/tutorial-weitere-tabs-zu-facebook-fanpage-hinzufuegen-ganz-ohne-fbml/#comment-38256

    (falls du den querverweis erlaubst, sonst einfach bitte löschen. Könnt aber vielleicht interessant sein für leute wie mich die Nachts an Facebook verzweifeln…)

  18. Sacha

    Hallo Nils,
    ersteinmal danke für das Tutorial. Ich versuche es gerade auf meiner Fan-Seite umzusetzen. Nur leider bleiben bei mir die Scroll-Balken bestehen, trotz des Codes. Auch mit der Musterseite erhalten ich die Balken. Hat sich bei Facebook etwas geändert, oder kann es sein das ich etwas übersehe?
    Lieben Gruss
    Sacha

  19. Matthias

    Hallo Nils

    Ich habe mir das hier durchgelesen und nun endlich meine seite gestallten könne, nur irgendwie schneidet es mir immer unten ein stück weg.
    habe die scripte auch wie hier beschrieben eingebaut.
    was kann ich dagegen tun??

    mfg matze

  20. Pingback: Facebook Timeline für Pages: Fanpage Tab erstellen | nilsmerker.de

Hinterlasse eine Antwort

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