kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

32 Kommentare

  1. Christoph

    Verfasst am 31. März 2011 um 22:03 Uhr.

    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! :)

  2. Adrian

    Verfasst am 4. April 2011 um 9:36 Uhr.

    Finde Deinen Artikel super! Merci.
    Funktioniert das Fan-Gating auch auf normalen Webseiten? Wenn ja, wie?

    Grüsse aus der Schweiz
    Adrian

  3. Andreas

    Verfasst am 21. April 2011 um 8:05 Uhr.

    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

  4. Andreas

    Verfasst am 21. April 2011 um 8:15 Uhr.

    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

    • Jonas Hellwig

      Verfasst am 22. April 2011 um 15:36 Uhr.

      @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.

  5. Lukas

    Verfasst am 21. April 2011 um 13:38 Uhr.

    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

  6. Raffael

    Verfasst am 25. April 2011 um 22:59 Uhr.

    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ß!

  7. Torben kania

    Verfasst am 9. Mai 2011 um 17:33 Uhr.

    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

  8. Lucien

    Verfasst am 12. Mai 2011 um 11:06 Uhr.

    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

  9. Face

    Verfasst am 28. Juli 2011 um 15:18 Uhr.

    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?

    • IS

      Verfasst am 24. Juli 2012 um 16:25 Uhr.

      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

  10. Ünal Aydin

    Verfasst am 11. August 2011 um 2:44 Uhr.

    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

  11. Andre

    Verfasst am 18. August 2011 um 16:29 Uhr.

    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é

  12. Lars

    Verfasst am 21. September 2011 um 11:59 Uhr.

    @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.

    • Jonas Hellwig

      Verfasst am 21. September 2011 um 12:54 Uhr.

      @Lars: Danke für den Hinweis. Ich habe den Artikel oben entsprechend angepasst.

  13. Andreas

    Verfasst am 14. Oktober 2011 um 19:45 Uhr.

    Kann man auch auf der normalen Website so überprüfen ob der User „Fan ist“ oder nicht?

    • Jonas Hellwig

      Verfasst am 14. Oktober 2011 um 21:42 Uhr.

      @Andreas: Als ich es damals probiert habe ging es nicht. Zumindest nicht mit dem hier abgebildeten Code.

  14. Marcel

    Verfasst am 28. Dezember 2011 um 13:18 Uhr.

    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?

  15. Marcel

    Verfasst am 28. Dezember 2011 um 13:20 Uhr.

    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 :-)

  16. Patrick

    Verfasst am 3. Januar 2012 um 19:09 Uhr.

    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?

  17. Marcus

    Verfasst am 16. Februar 2012 um 16:31 Uhr.

    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 …

  18. Chris

    Verfasst am 2. Mai 2012 um 16:49 Uhr.

    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?

  19. Michael

    Verfasst am 4. Juli 2012 um 16:48 Uhr.

    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!

  20. Tosta

    Verfasst am 30. August 2012 um 14:59 Uhr.

    Hallo Jonas,

    diese Anleitung war mir eine gute Hilfe. Vielen Dank!

    • Jonas Hellwig

      Verfasst am 30. August 2012 um 17:12 Uhr.

      Das freut mich! Vielen Dank für dein Feedback.

  21. FancyBeast

    Verfasst am 12. Oktober 2012 um 10:33 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 12. Oktober 2012 um 16:40 Uhr.

      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

  22. Lars

    Verfasst am 4. Dezember 2012 um 9:58 Uhr.

    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ß

    • Jonas Hellwig

      Verfasst am 4. Dezember 2012 um 10:37 Uhr.

      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.

      • Lars

        Verfasst am 4. Dezember 2012 um 11:27 Uhr.

        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.

      • Jonas Hellwig

        Verfasst am 4. Dezember 2012 um 12:28 Uhr.

        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?!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.