Tutorial: Facebook iFrame auf Seiten nutzen

Wie schon erwähnt, wird es in der nächsten Zeit nicht mehr möglich sein, Static FBML zu einer Facebook-Seite hinzuzufügen und als App zu nutzen. Facebook hat sich dazu entschlossen, diesen Dienst einzustellen und auf die iFrame-Technik umzuschwenken. Das bedeutet für Seiteninhaber zum einen zwar erneute Arbeit und Umstellung, zum anderen allerdings auch ein paar mehr Freiheiten und Übersichtlichkeit. Falls ihr eine eigene Fanpage habt oder betreut, zeige ich euch nun, wie ich zum Testen eine iFrame Anwendung erstellt und auf der Seite eingesetzt habe.

iFrame – Was das?

Nochmal kurz erklärt: In einem iFrame lädt man etwas in einen „eingebundenen Rahmen“. Hence, the name. Also eine HTML- oder PHP-Datei, die bei euch auf dem Server liegt, kann auf einer anderen Seite eingebunden werden. Man „guckt“ von Facebook aus in unserem Fall also durch’s Fenster auf eure Seite. Das bedeutet, dass ihr zuerst eine Website erstellen müsst, die eure Anwendung anzeigen soll. Das geht mit jedem HTML-Editor, oder ihr nutzt ein bereits vorhandenes CMS oder WordPress usw..

Per CSS solltet ihr festlegen, dass eure Anwendung maximal 520 Pixel breit sein darf. Mehr passt in den iFrame bei Facebook nämlich nicht rein. Ich überlasse jetzt die Erstellung der passenden HTML-Seite und dem dazugehörigen CSS euch und mache mit der Einbindung an sich bei Facebook weiter.

Eine Facebook App basteln

Zuerst muss man sich mit seinem persönlichen Profil als Developer anmelden. Dazu geht ihr auf http://facebook.com/developers und gebt der Anwendung mit „Zulassen“ die Genehmigung. Wenn ihr euch nun auf der Seite der Anwendung befindet, könnt ihr den Button oben rechts „Erstelle eine neue Anwendung“ nutzen.

Facbook iFrame App

Wichtiger Hinweis: Ich wurde nach meinem ersten Klick auf diesen Button mit Fehlermeldungen überhäuft, dass ich zuerst mein Konto verifizieren müsse. Anfangs hat das nicht geklappt (ich wollte es per Handy machen – schlimm genug, was Facebook da schon wieder an Daten haben will…). Dieser Link half mir dann aus der Patsche: https://www.facebook.com/confirmphone.php. Darüber erhielt ich eine SMS mit dem Bestätigungscode, den habe ich brav eingetippt und dann hat es geklappt. Beim Eingeben der Handynummer nur drauf achten, dass ihr die führende 0 weglasst! Bei allfacebook.de gibt’s nochmal die Verifizierungsinfos auf einen Blick.

Facbook iFrame App

Sofern es klappt und ihr eure neue Anwendung erstellen könnt, müsst ihr dieser zunächst einen Namen geben und den Geschäftsbedingungen von Facebook zustimmen. Danach folgt eine Sicherheitskontrolle per Captcha. Habt ihr bis hierhin alles richtig gemacht, kommt ihr zur Übersicht der Einstellung für eure App. Hier könnt ihr nun noch eine Beschreibung hinzufügen, ein eigenes Icon vergeben (welches dann übrigens auch auf der Fanseite angezeigt wird) und die Spracheinstellungen vornehmen.

Facebook-Einbindung

Der Reiter „Facebook-Einbindung“ ist wohl einer der wichtigsten bei den Einstellungen. Hier legt ihr die URL fest, die der iFrame laden soll. Dort gebt ihr den Pfad zur Seite ein, die ihr zuvor erstellt und hochgeladen habt. Weiter unten auf dieser Seite findet ihr den Abschnitt „Seiten-Reiter“. Hier gebt ihr den Namen der Anwendung in der Form, wie er auch auf der Seite später erscheinen soll, ein. Dazu habt ihr 16 Zeichen zur Verfügung. Den Reiter-Typ stellt ihr auf „IFrame“ – klar. Im Feld „URL des Reiters“ gebt ihr keine vollständige URL, sondern nur die erste Seite ein, die aufgerufen werden soll von der URL, die ihr bereits oben unter „Canvas-URL“ eingegeben habt. Ein Beispiel:

Facbook iFrame App

Nicht vergessen, die vorgenommenen Einstellungen auch mit dem Button „Änderungen speichern“ zu übernehmen! Ihr könnt später noch an den anderen Einstellungen nach Belieben herumschrauben. Dazu wählt ihr unter eurem Developers-Konto rechts oben aus der Box den Punkt „Meine Anwendungen anzeigen“ aus. Hier werden eure Apps aufgelistet und können verändert werden. Ich habe z.B. den „Sandkasten-Modus“ unter dem Tab „Erweitert“ aktiviert, um nur mir selbst eine Anmeldung zur Anwendung zu gestatten.

Wie kommt der iFrame jetzt auf meine Seite?

Von der Übersichtsseite eurer erstellten App aus gelangt ihr mit dem Link „Anwendungs-Profilseite“ zur Profilseite eurer Anwendung. Die sollte so aussehen, wie ihr es auch von anderen Anwendungen kennt. In der linken Spalte unter dem Profilfoto findet ihr in der Linkliste den Punkt „Zu meiner Seite hinzufügen“. Im sich öffnenden Dialogfenster könnt ihr nun die Seite auswählen, zu der die Anwendung hinzugefügt werden soll. Klickt dazu auf den Button „Einer Seite hinzufügen“. Fertig!

Ich sehe nichts!

Ja, ich auch nicht. Aber es ist da! Die oberen Schritte haben bei mir zum Erfolg geführt. Das Problem war, dass ich eine sichere Verbindung von Facebook nutze (https). Das scheint die Anzeige der App auf der Seite tatsächlich zu unterdrücken. Wenn ich die sichere Verbindung deaktiviere, sehe ich alles genau so, wie es sein soll. Klicke ich auf meiner Seite auf die Anwendung, erscheint der iFrame.
Allerdings möchte ich trotzdem die sichere Verbindung nutzen. Bleibt die Option, die iFrame-URL (Canvas) über einen sicheren Server, der ebenfalls die https-Verbindung hat, anzugeben. Eine andere Methode habe ich bis jetzt leider noch nicht gefunden. Falls jemand eine Lösung kennt, bitte kommentieren!

Ich werde beobachten, was sich in der nächsten Zeit tut und verschiedene iFrames gestalten und einbinden. Sobald ich mehr weiß, gebe ich Laut. Ich denke, hier muss Facebook aktiv werden.

Facebook-Seiten ab sofort mit iFrames

Facebook kündigte zwar an, dass Seiten ab dem 11. März 2011 kein Static FBML mehr als Anwendung hinzufügen können, bis heute geht das allerdings noch. Fakt ist, in den nächsten Tagen, Wochen oder wie auch immer die Entwickler bei Facebook gerade lustig sind wird die Unterstützung für Static FBML eingestellt. Das heißt im Klartext, dass die individuell gestalteten Tabs nicht mehr möglich sind. …Oder?

Static FBML no more

iFrames werden ab sofort unterstützt

Wonach die Entwickler und Seiten-Ersteller sich schon lange gesehnt haben, war die Einbindung von iFrames in ihre Fanseiten. Dies war von Facebook bisher verschmäht worden, sah man darin ein zu großes Sicherheitsrisiko. Mit neuer Technologie ausgestattet kann Facebook nun eine Prüfung an den iFrames vornehmen, um auf Nummer sicher zu gehen. Performancemäßig verbessert sich für Facebook mit den iFrames natürlich auch einiges, da die eingebundenen Inhalte auf dem Server des Seiteninhabers liegen müssen und nicht mehr bei Facebook selbst. Und für den Seitenadministrator ergeben sich einige neue Möglichkeiten, da beispielsweise JavaScript oder auch Youtube-Videos nun wie beim normalen HTML eingebunden werden können.

Da nun alle Seiten auch das neue Design aufgedrückt bekommen haben, wird es Zeit, sich von den bisherigen FBML-Anwendungen zu verabschieden und die iFrame App zu nutzen, bzw. sich eine eigene App zu basteln. In meinem morgigen Post werde ich euch in einem Tutorial erklären, wie man das am besten bewerkstelligt.

Endlich online – TobiasHerrmann.com

Seit heute ist es endlich vollbracht: Mein neues, überarbeitetes Design meines Online-Portfolios ist nach monatelanger Arbeit, wie man sieht, online gegangen. Was ursprünglich als Joomla-Website gedacht war, ist jetzt doch ganz und gar statisch verpackt und mit einigen jQuery-Spielereien aufgelockert worden.

Wichtig war mir vor allem auch die Verlinkung zu sämtlichen Portalen und sozialen Netzwerken, bei denen man mich seit einer Weile finden und gern hinzufügen kann. Über neue Twitter-Follower freue ich mich natürlich immer!

Das neue Design sollte größer wirken, als die bisherige graue Version. Es ist mehr Platz für Bilder – die sind bei mir auf jeden Fall das wichtigste. Wer meine Wohnung kennt, wird schnell die Ähnlichkeit zum Wohnzimmer bemerken. Auch das ist nicht ganz ohne Grund so passiert. Außerdem hab ich mein Facebook-Profil gleich entsprechend angepasst und eine kleine Banner-Promotion-Aktion gestartet.

Mehr Details dazu und eine bebilderte Relaunch-Analyse gibt’s nächste Woche!

Wenn der IE keine Bilder anzeigt

Heute trat bei mir zum ersten Mal das Problem auf, dass ich ein Bild für einen Kunden austauschen sollte, aber der Kunde angeblich nichts davon sah. Pfad hat gestimmt, im Backend konnte ich’s sehen, im Frontend auch – zumindest in modernen Browsern. Firefox, Safari und Opera zeigten das Bild an. Nur der Internet Explorer nicht.

CMYK funktioniert nicht im IE

Woran lag es also? Am Farbmodus. Mir wurde das neue Bild im CMYK-Format geschickt und so habe ich es auch ins Internet gesetzt. Der IE kann tatsächlich keine CMYK-Bilder anzeigen. Da hilft nur Umwandeln in RGB. Das habe ich mit Photoshop gemacht und schon ging alles wieder glatt. Das muss man aber auch erstmal wissen. 😉

Flaute bei Facebook

Facebook weniger privat

Irgendwie kommt es mir seit geraumer Zeit so vor, als würden meine Freunde (also die richtigen meine ich!) bei Facebook  keine Meldungen mehr von sich geben wollen. Vielleicht ist es eine Art Frühjahrsmüdigkeit. Oder es ist tatsächlich nix los. Bis auf permanente Einladungen zu irgendwelchen Partys in Dortmund oder Hamburg bleiben die Neuigkeiten weitestgehend uninteressant – und geschäftlich.

Ich zitiere mal eine Meldung, die letzte Woche von einem Kontakt gepostet wurde:

facebook wird ab jetzt nur noch fürs geschäftliche/hobby genutzt, daher werde ich die freundesliste extrem eingrenzen !!!!! leute die nicht verstehen das facebook beschissen ist und negatives dem positiven überwiegen , tuen mir leid !! wenn man ein standfestes leben hat sollte man seine zeit nicht in solchen foren verschwenden wenn es nur zeitvertreib ist!!!

Vielleicht findet sich irgendwo in diesen Zeilen ja die Begründung, weshalb die richtigen Freunde – also die, die man auch privat regelmäßig trifft oder aus der Grundschule kennt – nichts mehr im Facebook-Universum zu melden haben.

Zuviele Freunde und ständig diese Veränderungen

Mitlerweile habe ich um die 150 Freunde. 70% davon würde ich tatsächlich als Geschäftskontakte (Models, Fotografen, Agenturen etc.) einstufen, der Rest sind Familie und Freunde. Mag sein, dass es mir daher auch nur so vorkommt, dass ich keine Pinnwandmeldungen mehr mit persönlicher Note lese. Aber mir schreibt auch keiner mehr was auf die Pinnwand. Das finde ich schade.

Ich denke auch, dass dieses neue Facebook-Profil da eine wichtige Rolle spielt. Einige finden sich nun nicht mehr zurecht. Vor allem die, die eh nur einmal alle paar Wochen reinschauen. Die wollen jetzt nicht mehr schreiben. Und die, die ständig reingucken, sind es leid, weil sie es eben ständig machen. Das wird langweilig. So wie Studi-VZ oder MySpace. Ich merke selbst auch, dass ich viel weniger bei Facebook online bin als noch vor zwei, drei Monaten. Hängt natürlich auch mit dem ausbleibenden Echo zusammen, wenn man mal einen Gedanken auf die Pinnwand schreibt oder Fotos hochlädt. Ein Teufelskreis.

Wie sollte ich Facebook zukünftig nutzen?

Geschäftlich? Privat? Ein bisschen von beidem, würde ich sagen. Ich denke, dass man Facebook super für Akquise-Zwecke einsetzen kann und eine Verbindung mit Kollegen und interessanten Kontakten mit einem simplen Klick hergestellt ist. Das ist ein toller Vorteil der sozialen Netzwerke generell! Jedoch sollte man diese Freunde nicht mit ständigem Wehklagen über das Wetter oder die eigene Laune vergraulen. Ich mache mir tatsächlich Gedanken darüber, wer mitliest, wenn ich etwas poste und entscheide danach, ob und wie ich es veröffentliche. Listen sind eine Möglichkeit, die man zur Trennung (wer sieht was?) auch einsetzen sollte.

Ich hoffe, ich lese bald wieder mehr von meinen engsten Vertrauten. Immerhin nutzen die Facebook ja nur privat. Gedankenaustausch ahoi!