How-To: Facebook IFrame Landing Page Anwendung erstellen

Heute möchte ich euch zeigen, wie einfach man eine Facebook Landing Page mit PHP, HTML/CSS und Javascript erstellen kann. Wir mutieren zwar nicht zum Social Media Blog, diese Anleitung ist aber bestimmt sehr nützlich für einige von euch!

Hintergrund

Doch was versteht man eigentlich unter einer Facebook Landing Page? Genau genommen meint man damit einen speziellen Reiter einer Fanseite, die neuen Besuchern angezeigt werden. Man kann aber auch spezielle Landing Pages für Aktionen oder Wettbewerbe nutzen.

Normalerweise hat eine Fanseite die Standard-Reiter Pinnwand, Fotos und  vielleicht noch Veranstaltungen. Weitere können durch Facebook Applikationen aus dem öffentlichen Verzeichnis hinzugefügt werden. Besonders beliebt ist die Anwendung Static FBML, mit der man bis anhin sehr viele Landing Pages umgesetzt hat. Mit ihr kann man gewöhnliches HTML in Kombination mit speziellen Facebook-Tags für Landing Pages verwenden. In der Nutzung ist man aber sehr eingeschränkt, beispielsweise bei Javascript.

In einigen Tagen, genauer gesagt am 11. März, wird es nicht mehr möglich sein, Static FBML auf seiner Fanpage zu nutzen. Stattdessen sollen eigene Applikationen – in IFrames – genutzt werden. Diese haben viele Vorteile: Man kann nun problemlos Javascript und somit auch Google Analytics einsetzen, ist im Design nicht mehr beschränkt und kann seine Seiten noch besser in Facebook integrieren.

Erste Schritte

Als Erstes muss man die Facebook Developer Applikation installieren, danach kann man seine erste Anwendung erstellen. Als Erstes gibt man den Namen ein und akzeptiert die AGB von Facebook. Der Name darf übrigens nicht an eine Facebook-eigene Anwendung wie Diskussionen oder Veranstaltungen angelehnt sein.

Da der Name öffentlich ist, sollte man etwas Sinnvolles wählen, wie z.B. WordPress Magazin oder dercooleblog.com. Danach kommt man zur eigentlichen Einstellungs-Seite der Anwendung, wo es allerhand einzustellen gibt.

Wichtig ist auf dieser ersten Einstellungsseite, dass man ein Logo (75x75px) sowie ein Icon (16x16px) hochlädt. Am besten eignen sich GIF-Bilder mit transparentem Hintergrund. Auch die Sprache schaltet man vorsichtshalber lieber auf Deutsch um, ich konnte allerdings beim Einrichten keinen Unterschied zu Englisch feststellen. Diese Einstellung dürfte wohl nur wichtig sein, wenn man seine Anwendung ins offizielle Verzeichnis stellen möchte. In unserem Fall bleibt die Anwendung jedoch privat.

Das nächste und letzte Register hat den Namen Facebook-Einbindung. Hier stellen wir ein, welche Seite im IFrame eingebunden werden soll. Zudem wird hier die Anwendungs-ID und der Anwendungs-Geheimcode angegeben, welche wir später für die Authentifizierung benötigen.

Ansonsten muss man folgendes anpassen:

• Canvas-URL – Die URL zur Applikation auf dem eigenen Server, ohne jedoch eine explizite Datei anzugeben. Beispiel: http://example.com/wp-content/facebook/
• URL des Reiters – Hier kommt dann die Datei, meistens index.php
• Canvas-Typ / Reiter-Typ – IFrame
• Name des Reiters – Kurz und bündig, maximal 16 Zeichen

Jetzt kann man die Änderungen speichern, wodurch man auf die Übersichtsseite gelangt. Dort klickt man auf die Anwendungs-Profilseite und anschliessend auf Zu meiner Seite hinzufügen. Im folgenden Menü wählt man dann die gewünschte Fanseite aus.

Allerdings wird die Anwendung noch nicht standardmässig allen Nutzern angezeigt. Dazu muss man noch die entsprechende Fanseite bearbeiten und unter dem Punkt Genehmigungen verwalten den Standard-Reiter für Nicht-Fans definieren.

Der Code

Jetzt können wir uns nun der eigentlichen Applikation widmen. Dazu erstellt man im Programm seiner Wahl eine PHP Datei mit einfachem HTML-Grundgerüst – dazu reicht beispielsweise schon Dreamweaver. Als Nächstes bindet man das PHP-SDK, bestehend aus einer einzigen Datei, von Facebook ein, welches man bei GitHub herunterladen kann. Dort gibt es auch ein entsprechendes Beispiel zur Nutzung:

<?php
require './facebook.php';

$facebook = new Facebook(array(   'appId'  =-> 'YOUR APP ID',
  'secret' => 'YOUR API SECRET',
  'cookie' => true, // enable optional cookie support
));

$session = $facebook->getSession();
$me = null;
if ($session) {
	try {
		$uid = $facebook->getUser();
		$me = $facebook->api('/me');
	} catch (FacebookApiException $e) {
		error_log($e);
	}
}
?>

Damit initialisieren wir die Klasse und laden die aktuelle Session. So erhalten wir nämlich bereits einige Basics über den aktuellen Besucher, ob er eingeloggt ist oder nicht und ob er bereits Fan der Seite ist. Da wir jedoch weitere Features wie den Like-Button und die Möglichkeit, Freunde einzuladen, nutzen wollen, benötigen wir die Daten auch in Javascript. Dazu laden wir zusätzlich noch die JS-SDK direkt nach dem öffnenden <body>-Tag:

<div id="fb-root"></div>
<script>
	(function() {
		var e = document.createElement('script');
		e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

Jetzt muss man – gleich im Anschluss – nur noch alle Javascript-Funktionen initialisieren, die Session-Daten haben wir dabei schon aus dem PHP-Teil.

<script>
	window.fbAsyncInit = function() {
		FB.init({
			appId   : '<?php echo $facebook->getAppId(); ?>',
			session : <?php echo json_encode($session); ?>,
			status  : true,
			cookie  : true,
			xfbml   : true
		});
	}
</script>

Danach kommt das eigentliche Layout, wo man sich nach Lust und Laune austoben kann. Zum Beispiel kann die Landing Page an Facebook angelehnt oder so kunterbunt wie die Website sein. Einzige Limitierung ist die Breite von 520 Pixel. Die Höhe sollte variabel sein, wie wir das vorhin in den Einstellungen definiert haben. Dazu bedarf es allerdings noch einer Zeile Code…

Auto-Resize

Wir haben in den Anwendungs-Einstellungen angegeben, dass die IFrame-Grösse automatisch angepasst werden soll, schliesslich will man ja keine Scrollbalken, welche das mit 520 Pixel schon schmale Layout je nach Browser nochmals um einige Pixel reduzieren würden. Zusätzlich zu dieser Einstellung muss man aber noch in der selben window.fbAsyncInit Funktion folgende Zeile einfügen:

FB.Canvas.setAutoResize();

Hat man allerdings ein jQuery-Slider oder -Accordion, so verändert sich ja immer die Grösse des IFrames. FB.Canvas.setAutoResize() ist deshalb nur für die Initialisierung des Tabs sinnvoll. Anschließende Vergrösserungen sollten besser manuell mit FB.Canvas.setSize() durchgeführt werden. Ein Beispiel:

$('#xyz').click(function () {
	$('#xyzdiv').hide();
	var newHeight = $(document).height() + 170;
	FB.Canvas.setSize({ width: 520, height: newHeight });
	$('#newtext').slideDown(500, function () {
	});
});

Events

Facebooks Javascript-SDK erlaubt es, sich in bestimmte Events einzuklinken. Auf diesem Weg kann man die Applikation bei Login/Logout oder bei einem Gefällt mir neu laden. Mit Hilfe des GET-Parameters app_data kann man beim Reload bestimmte Werte an die Applikation übergeben, z.B. um eine Nachricht für den neuen Fan anzuzeigen.

Folgende Schnipsel kommen ebenfalls in die Init-Funktion:

// Gewöhnlicher Reload nach Login, um Nutzer-Daten zu erhalten
FB.Event.subscribe('auth.login', function() {
	window.location.reload();
});

// Location anpassen, für Mitgabe von app_data Parameter
FB.Event.subscribe('edge.create', function (response) {
	setTimeout(function () {
		window.parent.location.href = 'http://www.facebook.com/meinefanpage&sk=app_123456&app_data=neuerfan';
	}, 1000);
});

Teilen

Ein weiterer Vorteil einer eigenen Anwendung gegenüber Static FBML ist die Möglichkeit, dass man dem User Dialoge anzeigen kann. So lassen sich unter anderem Nachrichten an seine Pinnwand posten, wie dieses Beispiel zeigt:

$('#share').click(function () {
	FB.ui({
		method: 'feed',
		name: 'Werde Fan von XY',
		message: 'Klicke Gefällt mir! Diese Nachricht kann man übrigens ändern!',
		caption: 'Die beste Seite',
		description: 'Werde Fan auf Facebook und unterstütze damit XY!',
		link: 'http://www.facebook.com/meinefanpage&sk=app_123456',
		picture: 'http://example.com/wp-content/facebook/images/100x100px.png' // Auch ein Bild kann angezeigt werden, 100x100 Pixel
	});
});

Hier kommt für den Element-Selektor $('#share') jQuery zum Einsatz. Dieser ganze Code-Block sollte am besten in einem $(document).ready(function () { ... }); untergebracht werden, damit sichergestellt ist, dass die Facebook-SDK vollständig geladen ist. Am Ende sieht das dann ungefähr so aus:

Fazit

Schlussendlich könnte die Landing Page so aussehen wie die des WordPress Magazins, auch wenn unsere noch etwas minimalistisch daherkommt. An dieser Stelle seid ihr gefragt! Erstellt eure eigene Landing Page anhand dieses Beispiels und liest weiterführende Dokumentationen von Facebook:

• Signed Request
• Social Plugins (Gefällt mir Buttons, etc.)
• Graph API
• Javascript SDK Übersicht
• Facebook OAuth Implementierung