Einbinden von iframes in eine Facebook Fan Page

Transkript

1 Eine kostenlose Ergänzung zum Buch: Facebook Fan Pages von Boris Pfeiffer 2011, Smiling Cat Publishing GmbH Einbinden von iframes in eine Facebook Fan Page Facebook hat mit der Einführung der neuen Fan Pages die Neuerstellung von individuellen Reitern komplett umgestellt. Wo man früher umständlich mit FBML (der Facebook Markup Language) hantieren musste, kann man heute fast jede beliebige externe Webseite einfach über einen sogenannten iframe einbinden. Ein iframe ist nichts anderes, als ein unsichtbarer Rahmen oder auch Container, in dem eine fremde Webseite angezeigt wird. Solche iframes werden zum Beispiel sehr gerne eingesetzt, um Werbung auf einer Webseite einzublenden, da sie im Gegensatz zu einer festen Einbindung von Inhalten einen entscheidenden Vorteil mitbringen. Wenn die Seite, die den Inhalt des iframes liefert einen Defekt hat, so bleibt nur der iframe leer die Hauptseite ist davon unbetroffen und kann auch nicht durch Scriptfehler oder andere Fehlermeldungen der im iframe angezeigten Inhalte am Laden gehindert werden. Daraus folgt aber auch, dass der iframe ohne weitere Hilfsmittel nicht mit dem Rest der Seite kommunizieren kann. Einfache Facebook Komandos, wie man diese von FBML gewohnt war (zum Beispiel die Abfrage, ob ein Besucher schon ein Fan ist oder nicht), erfordern jetzt wesentlich mehr Programmieraufwand und werden auch in diesem Kapitel nicht behandelt.

2 Voraussetzungen für den Einsatz von iframes: 1) Eine Facebook Fan Page im neuen Layout 2) Eine eigene Webseite, die eingebunden werden soll idealerweise liegt diese Seite im für Facebook Einbindung optimalen Format vor (520 Pixel breit) 3) Ein verifiziertes Facebook Konto. Falls diese Voraussetzungen noch nicht erfüllt sind, einfach diese Schritte befolgen: Seite aufs neue Layout umstellen: Zunächst muss man sich bei Facebook anmelden und dann diese URL aufrufen: pages/status/ Dort sieht man eine Liste aller betreuten Seiten und kann die Umstellung mit einem Mausklick erledigen. Eigene Webseite aufbauen An sich gibt es für den Aufbau der Seite keine Einschränkungen. Allerdings kann Facebook diese Voraussetzungen wie immer ohne große Ankündigung ändern. Einzige sinnvolle Voraussetzung ist die Programmierung einer Seite mit maximal 520 Pixeln Breite, damit der Besucher nicht scrollen muss. Wer noch keine Seite hat, sollte sich die Homepage Builder Angebote der großen Hoster wie 1&1 oder Strato ansschauen. Facebook Konto verifizieren

3 Es gibt 2 Möglichkeiten das Facebook Konto zu verifizieren. Entweder über Eingabe der Handynummer oder über die Eingabe der Kreditkarten Daten. Leider funktioniert die Handy Methode oft nur sehr unzuverlässig, so dass man fast gezwungen ist, die Kreditkarten Methode zu wählen. Da man für den Kauf von Werbung auf Facebook auch eine Kreditkarte hinterlegen muss, empfehle ich diese Methode zu wählen. Die Bestätigung des Kontos erfolgt über diese Seiten: Via Handy: php Via Kreditkarte: Nach Abschluß dieser vorbereitenden Schritte kann mit der Einbindung eines iframe Tabs begonnen werden. Ein iframe Tab ist für Facebook nichts weiter, als eine eigene Facebook Anwendung. Um einen iframe Tab auf der Seite einzubinden, muss man eine eigene Facebook Anwendung erstellen, die nur eine einzige Aufgabe erfüllt das Aufrufen Ihrer für den iframe Tab erstellten Internet Seite. Lassen Sie sich nicht von den vielen Einstellmöglichkeiten für Facebook Anwendungen abschrecken. Tragen Sie einfach nur die Werte ein, die im Folgenden erklärt werden. Wechseln Sie zunächst auf die Entwickler Seite bei Fa-

4 cebook: Klicken Sie dort auf den Link + Erstelle eine neue Anwendung Geben Sie nun Ihrer Anwendung einen sinnvollen Namen. Im folgenden Beispiel binde ich der Einfachheit halber meinen Blog ein (auch wenn dieser nicht für einen iframe Tab optimiert ist, aber sehr gut als Beispiel dafür dient, dass man jede beliebige Seite auf die Fan Page einbinden kann). Stimmen Sie den AGB von Facebook zu und klicken Sie auf Anwendung erstellen Sie gelangen nur in den Info Bereich der Anwendung.

5 Auf Wunsch können Sie eine Beschreibung hinzufügen. Diese ist aber nicht zwingend notwendig. Geben Sie lediglich eine Kontaktadresse an und klicken Sie dann auf der linken Seite auf den Menüpunkt Website Hier geben Sie nur die URL der Seite an, die Sie einbinden wollen. In unserem Beispiel also Klicken Sie nun auf der linken Seite auf den Punkt Facebook Integration Unter Canvas Page tragen Sie einen beliebigen Namen ein ohne Sonder- oder Leerzeichen. Der Canvas ist die Seite, die der Benutzer angezeigt bekommt, wenn er

6 Ihre Facebook Anwendung aufruft. Lassen Sie die anderen Felder so eingestellt wie auf dem oben gezeigten Bildschirmfoto und scrollen Sie ganz nach unten zum Bereich Seiten-Reiter. Hier nehmen Sie die Einstellungen für den Seiten Reiter auf der Fan Page vor. Geben Sie dem Reiter einen Namen (möglichst kurz).

7 Bei URL des Reiters tragen sie die genaue Adresse der Webseite ein, die auf der Fan Page angezeigt werden soll. Dabei ist Folgendes zu beachten: Die URL darf sich nicht von der im Menüpunkt Website eingetragenen URL unterscheiden. Tragen Sie also nicht bei Website die URL und hier ein. Weiterhin müssen Sie hier an die URL den Namen der aufzurufenden Webpage angeben. In unserem Beispiel möchte ich die Homepage aufrufen. Der Dateiname der Homepage ist bei index.php. Oftmals wird auch index.html oder index.htm verwendet. Ganz wichtig ist der / hinter dem Dateinamen. Wenn Sie den Slash / nicht mit angeben, wird Ihre Seite nicht aufgerufen werden. Klicken Sie nun auf Änderungen speichern. Sie können dieses PDF kostenlos auf: herunterladen.

8 Sie wechseln nun automatisch auf die Statusseite Ihrer gerade erstellten Facebook Anwendung. Klicken Sie hier auf der rechten Seite auf den Menüpunkt Anwendungs-Profilseite

9 Die Anwendungsprofilseite sieht aus, wie eine nicht fertiggestellte Fan Page (was sie im Endeffekt auch ist). Hier müssen Sie allerdings keinerlei Einstellungen vornehmen. Klicken Sie einfach auf der linken Seite unten auf den Punkt: Zu meiner Seite hinzufügen. Bitte verwechseln Sie diesen Link nicht mit zu den Favoriten meiner Seite hinzufügen. Im folgenden Menü bekommen Sie eine Auswahl der von Ihnen erstellten Seiten und können sich aussuchen, zu welcher Seite Sie den iframe Tab hinzufügen wollen. Wechseln Sie abschließend zu Ihrer Fan Page und Sie werden im linken Menü Ihren neuen Reiter sehen. Klicken Sie darauf und Ihr iframe wird auf Ihrer Fan Page angezeigt.