Fan-Gating für Facebook iFrame-Tabs: Inhalte nur für Fans (Fan-Gate, Like-Gate)
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.
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. ";
}
?>
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.
via: hyperarts.com
Hallo zusammen,
ich bin diese und mehreren Anleitungen nach gegangen, für die Erstellung einer Fangate Seite.
Leider komme ich immer zu dem Problem, dass er die index.php im Facebook Tab nicht lesen kann. (eine index.html wird Problemlos gelesen)
Im Firefox will er Sie runterladen und im Safari zeigt er mir den php code an.
Hat da jemand eine Lösung für?
Lieben Gruß
Was passiert denn wenn du die Datei manuell direkt über den Browser aufrust? Lädt er die .php-Datei dann auch herunter? Dann liegt es wahrscheinlich am Server, der erkennt die Datei nicht als PHP.
Danke für die schnelle Antwort.
Manuell im Browser will er sie leider auch herunterladen.
Hochgeladen habe ich es bei Dropbox, da müsste PHP ja funktionieren.
Ich würde vermuten die Dropbox erzwingt den Download (Force Download) von Dateien die im Browser dargestellt werden könnten. Sicher bin ich mir aber nicht, vielleicht weiß jmd Rat?!
Kann man so eine versteckte Seite auch auserhalb von FaceBook einbinden?
Also sprich auf einer eigenen webseite, so das der Kunde erst Fan werden muss um dann einnen inhalt zu sehen.
Hier noch ein Beispiel was ich meine,
bloß mit Gefällt mir so das er Fan der Facebook Fan Seite wird!
http://www.digitale-infoprodukte.de/geschaeftskonzepte/35-entscheidende-schritte-zum-groessten-zahltag-ihres-lebens/
Danke für euche Hilfe, ich freue mich jetzt schon.
Ein Fangate / Likegate außerhalb von Facebook ist soweit ich weiß nicht möglich. Die Lösung die auf deiner Beispiel-Seite genutzt wird ist aber auch etwas anderes. Hier wird ein Inhalt sichtbar, sobald der Link geteilt wurde Stichwort „Pay with a Tweet / Share / Like“. Das ist technisch möglich und es existieren Plugins und Script-Lösungen. Hier ein Beispiel für eine Lösung in WordPress. Das Plugin ist aber kostenpflichtig. Man kann es natürlich auch selbst coden. Hier noch ein Online-Dienst: viralcoin.com
Hallo Jonas,
diese Anleitung war mir eine gute Hilfe. Vielen Dank!
Das freut mich! Vielen Dank für dein Feedback.
Hallo,
super erklärt und aufgebaut.
Leider funktioniert das bei mir nicht. Es läuft PHP5 am Server, hab auch nur das Starterkit verwendet und lediglich die app_ids verändert.
Trotzdem kommt immer die Fehlermeldung:
Parse error: syntax error, unexpected T_NEW in /home/su000171/www/ssl/maschine_test/facebook.php on line 20
Was könnte denn das sein bzw. was muss ich tun?
Danke für die Hilfe!
Hey,
vielen Dank Jonas für deine Anleitung.
Ich habe meine Facebook Tabs auf einen Dropbox Account wegen der https Adresse. Hat jemand Erfahrung damit!? Hab erst versucht, die index.php auf dem Dropbox Account abzulegen, aber ich glaube das macht er nicht bzw. er führt das Script nicht aus. Dann dachte ich mir, ich pack es in einen iFrame und lade den in eine index.html. Leider zeigt er mir immer den nicht Fan Inhalt an. Hat da jemand Erfahrungen gemacht?
Vielen Dank, hat super geholfen, endlich mal eine kurze und prägnante Anleitung, die auch sofort funktioniert. :-) Hatte vorher 2-3 andere Anleitungen auf, die alle Macken hatten …
Also vor einigen Wochen habe ich ein paar solcher „Apps“ mir gebaut, genau nach deiner Anleitung hier… sie funktionierten auch wunderbar… Aber jetzt funktioniert es plötzlich nicht mehr, weiß jemand, ob Facebook wieder mal irgendwas geupdatet bzw. geändert hat?
Ah passt schon … in der ZIP Datei von Github war noch eine fb_ca_chain_bundle.crt Datei … die war mit auf dem Server … wenn man die löscht, dann funktioniert es :-)
Danke für die Super Anleitung … funktioniert bei mir fast …
Nicht Fan und Fan Inhalt wird zwar korrekt angezeigt aber wenn ich auf „Gefällt mir“ klicke, werde ich sofort auf die Pinnwand geleitet.
Erst wenn ich dann auf den Welcome Reiter gehe, sehe ich den Faninhalt.
Woran kann das liegen?
Kann man auch auf der normalen Website so überprüfen ob der User „Fan ist“ oder nicht?
@Andreas: Als ich es damals probiert habe ging es nicht. Zumindest nicht mit dem hier abgebildeten Code.
@André: Vermutlich hat Facebook das SDK nochmal überarbeitet. Ich hatte das gleiche Problem.
Die facebook.php includet die base_facebook.php in Zeile 18.
Folglich muss die base_facebook.php (ist ebenfalls im SDK-Paket enthalten) mit auf den Server. Bevorzugt ins gleiche Verzeichnis, in das Du auch die facebook.php gepackt hast.
@Lars: Danke für den Hinweis. Ich habe den Artikel oben entsprechend angepasst.
Hi!
Ich hab die facebook.php und meine Index mit dem code von oben in einem Verzeichnis liegen. Wenn ich jetzt die index.php aufrufe erhalte ich folgenden Fehler:
Warning: require_once(base_facebook.php) [function.require-once]: failed to open stream: No such file or directory in /mnt/web4/22/49/51509949/htdocs/weis-communications/mizuno/gewinne/facebook.php on line 18
Fatal error: require_once() [function.require]: Failed opening required ‚base_facebook.php‘ (include_path=‘.:/opt/RZphp5/includes‘) in /mnt/web4/22/49/51509949/htdocs/weis-communications/mizuno/gewinne/facebook.php on line 18
Ihr habt doch auch keine base_facebook.php mit auf dem Server oder?
Die unterscheidung ob Fan oder Nicht-Fan ist doch mit der Fanseite im zusammenhang oder? Also ich möchte, dass der User die Seite nur sehen darf wenn er Fan der Seite ist.
andré
Hallo Jonas, ich danke dir, dass du dieses Wissen mit uns teilst. Die Facebook-Doku ist echt besch…. Ich weiss es echt zu schätzen.
@Lucien: Das liegt wohl daran, dass du deine Joomla-Seite nicht in ein Iframe eingebettet hast und das PHP-Script für das Fangating nicht in jeder deiner Unterseiten drin ist. Anders kann ich mir das nicht erklären.
@Face: Die ganzen Anwendungen haben eine eindeutige URL z.b. …?sk=app_12345678901234567 du kannst diese einfach verlinken. Du musst target=“_top“ in deine Links packen, damit die Seiten nicht im Iframe geladen werden.
Grüsse
Ünal
habe das gleiche problem wie Lucien, allerdings nutze ich eine anwendung in facebook pages wo ich auf weitere anwendungen verlinke. hat niemand ne lösung?
Mein Problem sieht änlich aus. Ich habe ein Kontaktformular als App, welches für sich selbst sauber funktioniert und sobald es ich es mit dem Fan-Gate hochlade und über Facebook ansehe, sehe ich als Fan oder Nicht-Fan den jeweils korrekten Bereich.
Sobald ich aber auf den Senden-/Teilnehmen-Button klicke, wird SOFORT ohne Abarbeiten des Dokuments der Nicht-Fan-Inhalt angezeigt.
Daran kämpfe ich seit vier Tagen herum und finde keine Lösung.
Wie hast du denn das Problem gelöst?
Beste Grüße
IS
Hallo,
ich habe mit Hilfe Deines Tutorials so weit alles super hinbekommen – vielen Dank! Echt klasse beschrieben.
Nun meine Frage:
Ich habe eine Joomla Seite, die ich in Facebook integriert habe. Via Fan-Gating sieht ein „noch-nicht-FAN“ eine Titelgrafik.
Nach dem Klick auf „Gefällt mir“ sieht der gleiche Besucher dann meine Jommla-Startseite. So weit klappt das Fan-Gating hervorragend!!!
Jetzt das PROBLEM: Sobald der Besucher eine weitere Unterseite meiner Joomla-Seite anklickt, sieht er wieder die „noch-nicht-FAN“ Titelgrafik! Es scheint, dass sich facebook für die Unterseiten nicht merkt, dass der Besucher bereits Fan ist.
Woran könnte das liegen?
Vielen Dank für eine Antwort!
Lucien
Hallo
if ($page_fan) {
echo „Diesen Inhalt siehst du nur weil du ein Fan bist. Danke! „;
}
Wie kann ich denn jetzt innerhalb dieser Variabel einen komplette Iframe ausgeben / anwenden ….
Also sowas in der Art …
Danke für deine Hilfe
Danke für das Tutorial!
Optimal wäre ja ein Fanpage-App, der man explizit in den Optionen sagen kann, welche URLs sie als Inhalt anzeigen soll, wenn man Fan ist oder nicht.
Kannst Du uns da auch einen Tip geben, wie man die App so erweitert, dass man die URLs der anzuzeigenden Seiten in den Profil-App-Settings selbst definieren kann?
Auch stark wäre, den Tab als non-public markieren zu können, sodass vorerst (in der Entwicklungsphase) nur die Admins die Seite sehen können.
Gruß!
Hallo, wirklich super beschreibung, und funktioniert einwandfrei.
Ich die Funktion aber jetzt gern in einer Typo3 Iframe verwenden, hast du da vlcht einen Tipp wie das am besten zu lösen ist?
auf jeden fall big thx
lgreeTz
lukas
Und: ist es richtig, anstellen von
if ($page_fan) {echo „TEXT NICHT FAN“;}
else { echo „TEXT FAN. „;}
if ($page_fan) {header(„Location: URL NICHT FAN“);}
else {header(„Location: URL FAN“);}
setzen?
Gruss – Andreas
@Andreas: Wenn du als Admin deiner eigenen Seite das Fan-Gating testest, so siehst du die Ansicht als wärest du KEIN Fan. Du musst also einen zweiten Account haben um es zu testen. Alternativ bist du Fan deiner eigenen Seite und schaust den Tab über dein privates Profil an.
Die Weiterleitung per PHP funktioniert innerhalb des Canvas-Elements von Facebook soweit ich weiß nicht. Siehe auch diesen Link hier.
Hallo Jonas
Danke für die tolle Anleitung … Nur: bei mir wird – ob Fan oder nicht Fan – derselbe Text respektive dieselbe Seite ausgegeben.
Kannst du helfen?
Danke + Gruss – Andreas
Finde Deinen Artikel super! Merci.
Funktioniert das Fan-Gating auch auf normalen Webseiten? Wenn ja, wie?
Grüsse aus der Schweiz
Adrian
Hey Jonas,
danke für dieses super Tutorial! Da ich gerade ein paar Facebook-Seiten auf iFrames umstelle und bei Facebook im Hilfebereich fast verzweifelt bin, ist es schön, eine solch einfache und verständliche Lösung zu finden.
Es sei vielleicht noch anzumerken, dass 1&1-Nutzer PHP5-Parsing aktivieren müssen, da ansonsten PHP4 verwendet wird, welches allerdings einen Fehler ausgibt. Mehr Infos hier: PHP5-Parsen bei 1&1
LG Christoph
P.S. Schickes Relaunch! Gefällt mir sehr! :)
[…] Der zweite Artikel, den ich erwähnen möchte behandelt das so genannte Fan-Gating auf Facebook, also die Frage, wie man Fans und Nicht-Fans einer Facebook-Page unterschiedliche Inhalte zeigt. Zum Blogeintrag » […]