Fan-Gating für Facebook iFrame-Tabs: Inhalte nur für Fans (Fan-Gate, Like-Gate)

facebook-developer

Bei den mittlerweile veralteten FBML-Tabs von Facebook war alles noch so einfach. Ein kleines FBML-Snippet genügte und schon konnte man Inhalte spezifisch für Fans und Nicht-Fans ausgeben. Der große Nachteil war allerdings, dass die Inhalte nur ausgeblendet wurden und daher aufwändig mit CSS versteckt werden mussten. Fortgeschrittene Besucher konnten darüber hinaus im Source-Code die ausgeblendeten Inhalte trotzdem finden. Für Gewinnspiele oder Gutscheine war diese Technik daher wenig geeignet.
Mit den von Facebook neu eingeführten iFrame-Tabs haben Developer nun bessere Möglichkeiten die Besucher anzusprechen und zum jeweiligen Fanpage-Ziel zu leiten. Diese Technik nennt sich Fan-Gating.
In diesem Artikel zeige ich Euch wie einfach Ihr Inhalte entsprechend des Fan-Status ausgeben könnt.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Was sind die Vorraussetzungen?

Um das hier gezeigte Beispiel umsetzen zu können müsst Ihr bereits einen iFrame-Tab eingerichtet haben. Wie das geht habe ich bereits in einem früheren Artikel beschrieben.

Darüber hinaus muss der Server auf dem die Inhalte des iFrame-Tabs abgelegt wurden über PHP5 verfügen.

Dateien vorbereiten

Ihr benötigt für dieses Beispiel später drei verschiedene PHP-Dateien. Eine index.php, eine facebook.php und eine base_facebook.php.
Die index.php stellt die Inhalte Eures iFrame-Tabs dar, die facebook.php sowie base_facebook.php laden wird von Facebook herunter. Diese Dateien sind Bestandteil des Facebook Software Developer Kits (SDK) und geben Informationen über den Besucher in einer Variable aus. Diese Dateien müssen von Euch nicht verändert werden. Soviel zum Hintergrund.

Facebook SDK herunterladen

Ladet euch zunächst unter https://github.com/facebook/php-sdk/zipball/master das Zip-Archiv von Facebook herunter. Innerhalb dieses Archivs findet Ihr die Dateien facebook.php und base_facebook.php.

index.php einrichten

Erstellt nun eine Datei namens index.php und fügt folgenden Code ein. Anschließend könnt Ihr alle drei Dateien in das entsprechende Verzeichnis auf dem Server hochladen.

<?php 
 require 'facebook.php';
 $app_id = "DEINE APP ID";
 $app_secret = "DEINE SECRET APP ID";
 $facebook = new Facebook(array(
 'appId' => $app_id,
 'secret' => $app_secret,
 'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$page_fan = $signed_request["page"]["liked"];
$user_country = $signed_request["user"]["country"];
$user_locale= $signed_request["user"]["locale"];

if ($page_fan) {
 echo "Diesen Inhalt siehst du nur weil du ein Fan bist. Danke! ";
}

else {
 echo "Bitte klicke auf 'gefällt mir' um den hier versteckten Inhalt anzuzeigen. ";
}
?>
Facebook iFrame Tab Upload Directory

Achtet darauf, dass alle drei Dateien im gleichen Verzeichnis liegen und die Einstellungen innerhalb Eurer Facebook-App korrekt sind. Solltet Ihr zuvor also beispielsweise eine index.html verwendet haben so muss diese Angabe jetzt natürlich angepasst werden. Die App-Einstellungen findet Ihr unter: facebook.com/developers/apps.php

In der zweiten Zeile wird die zuvor heruntergeladene facebook.php benötigt. In Zeile drei und vier dieses Beispiels müsst Ihr Eure spezifischen APP-IDs verwenden. Beide Angaben findet Ihr unter dem oben genannten Link.

In den Zeilen 12-16 seht Ihr welche Daten abgefragt werden können. Neben dem Fan-Status ist dies beispielsweise auch das Land oder die Seiten-ID.
In diesem Beispiel verwenden wir die Variable $page_fan und geben in den Zeilen 18-24 entsprechend die Inhalte aus.

Download: Fan-Gating / Like-Gating Code

Ich habe ein Download-Paket zusammengestellt das alle aktuell (nach der Umstellung auf die Timeline) benötigten Dateien beinhaltet. In meinen Tests funktioniert es einwandfrei mit folgenden beiden Dateien.

Demo Fangate-Likegate

via: hyperarts.com