In diesem Beitrag wird erläutert, wie man Inhalte erstellt und auf einem Server bereitstellt, welche dann auf einer Facebook-Seite durch eine iFrame Anwendung in eigenen Tabs und Reitern angezeigt werden. Dieser Beitrag ist der erste von drei Teilen, welche sich mit dem Thema Fanseiten-Tabs mit einer iFrame Anwendung befassen. Die anderen Teile sind im folgenden verlinkt:
Einführung: Fanseiten-Tabs mit einer iFrame Anwendung erstellen
Teil 1/3: Erstellen von Inhalten, welche im iFrame in Tabs angezeigt werden
Teil 2/3: Einrichtung und Installation einer iFrame Anwendung
Teil 3/3: iFrame Anwendung zu einer Facebook-Seite hinzufügen
Wird in einem selbst definierten Reiter per iFrame Anwendung ein Inhalt angezeigt, so handelt es sich dabei eigentlich um eine eigenständige Webseite, welche dann mit einem iFrame eingebunden wird. Um einen solchen Inhalt zu erstellen, braucht es deshalb ein bestimmtes Know How an HTML und CSS. Wir wollen im folgenden als Beispiel zeigen, wie eine solche einfache Seite aussehen könnte.
Die HTML Datei (index.html):
Achtung: Das Schlusszeichen nach utf-8 wird von hier leider falsch dargestellt. Dieses muss – damit der Code funktioniert – ein normales Anführungs/Schlusszeichen sein wie alle andern auch.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<h1>Dies ist eine iFrame Anwendung</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<h2>Dies ist ein Untertitel</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</body>
</html>Dieses Beispiel beinhaltet ein einfaches XHTML 1.0 Gerüst. Durch ein link-Tag wird eine CSS-Datei verlinkt, welche der Webseite das gewünschte Aussehen verleiht. Das CSS-File liegt in diesem Beispiel im gleichen Verzeichnis wie unsere HTML-Datei (ansonsten müsste noch der Pfad entsprechend angepasst werden).
Die CSS-Datei (style.css):
body {
margin:0px;
padding:0px;
width:520px;
font-size:11px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
h1 {
background-color:#3b5998;
padding:10px;
color:#FFFFFF;
font-weight:normal;
font-size:16px;
}
h2 {
font-size:11px;
padding: 10px;
}
p {
margin: 0px 10px 10px 10px;
}Die Breite des Inhalts wird hier auf 520 Pixel gesetzt. Dies ist die Breite, welche normalerweise angezeigt werden kann, ohne dass horizontale Scrollbalken entstehen. Um die Seite etwas dem Facebook-Look anzupassen, wurde die gleiche Schriftfamilie wie in Facebook selber verwendet. Mit den h1 und h2 Tags werden die zwei Überschriften definiert, und mit dem p-Tag wird den Absätzen rundherum noch einen Abstand gegeben.
Die Files auf einen Webserver hochladen
Diese zwei Files (index.html und style.css) sind nichts anderes, als eine eigenständige Webseite. Damit sie von der Facebook Anwendung gefunden und eingebunden werden können, müssen sie nun auf einen Webserver geladen werden. Es muss also ein eigenständiger Webserver vorhanden sein, welcher durch eine URL erreicht werden kann. Um die Files hochzuladen, wird normalerweise ein FTP-Programm verwendet. Wenn die zwei Files hochgeladen sind, kann kontrolliert werden, ob der Inhalt auch wie gewünscht aussieht. Dazu wird einfach die entsprechende URL aufgerufen:
Diese Adresse und das Verzeichnis der hochgeladenen Website muss dann beim Erstellen der iFrame Anwendung angegeben (siehe Teil 2: Einrichtung und Installation der iFrame Anwendung)
Herzlichen Dank für Diese Anleitung!
Es hat sich ein kleiner fehler eingeschlichen… in der Zeile:
das letzte gänsefüsschen oben nach der „8“ ; das ist ein falsches… nach dem ich es ausgewechselt habe ging alles wunder bar mit ihrer vorlage!
Noch eine Frage,
kann man bei den I-Frame’s auch irgendwie machen dass gewissen inhalt nur User sehen, welche auf Gefällt mir geklickt haben?
Herzliche Grüsse,
Simon Jund
Vielen Dank für das Feedback, die Gänsefüsschen werd ich gleich noch ändern.
Zu deiner Frage… ich denke du suchst etwa das hier: Inhalte in iFrame Tabs nur für Fans sichtbar machen.
Grüsse Christoph
Danke für die super Anleitung.
Leider habe ich bei jeder bisher getesteten Variante das Problem, dass als Schriftart immer Times New Roman (o.ä.) gewählt wird und nicht die einheitliche Facebook Schriftart.
Hast du das Stylesheet eingebunden? Und wenn ja, funktionieren die sonstigen Anweisungen des Stylesheets (Schriftgrössen, Farben, etc.)? Die wichtige Anweisung für die Schriftart ist eigentlich die folgende:
font-family:”lucida grande”,tahoma,verdana,arial,sans-serif
Schau mal, ob es beim Kopieren die Anführungs- und Schlusszeichen nicht richtig umgewandelt hat (passiert bei mir auch wenn ich den Code kopiere und im Editor wieder einfüge)… versuch sonst in deinem Editor diese einmal zu löschen, und manuell wieder reinzuschreiben.
hallo habe alles befolgt die seite ist auch über den browser abrufbar aber ich bekomme immer wieder in facebook die fehlermeldung.
„The page cannot be displayed
The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.“
habe den webspace bei 1 und 1 kann es daran liegt.
über eine antwort würde ich mich sehr freuen. habe schon einige schlaflose nächte mit dem problem verbracht.
Hallo Sascha
Benutzt du die Facebook-Option für sicheres surfen (via https)? Ich glaube damit funktionieren die iFrame Tabs bis jetzt nicht.
Ein weiterer Versuch wäre mal, deine .html-Seite als .php-Seite abzuspeichern. Diesen Filename müsstest du dann in der Anwendung ebenfalls noch richtig anpassen. Manche Server funktionieren nur mit php-Files (natürlich muss der Server dann auch php unterstützen).