Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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. ";
}
?>
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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 32 Kommentare

  1. Lars
    schrieb am 04.12.2012 um 09: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ß

    Antworten
    • Jonas Hellwig
      schrieb am 04.12.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.

      Antworten
      • Lars
        schrieb am 04.12.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
        schrieb am 04.12.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?!

  2. FancyBeast
    schrieb am 12.10.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.

    Antworten
    • Jonas Hellwig
      schrieb am 12.10.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

      Antworten
  3. Tosta
    schrieb am 30.08.2012 um 14:59 Uhr:

    Hallo Jonas,

    diese Anleitung war mir eine gute Hilfe. Vielen Dank!

    Antworten
    • Jonas Hellwig
      schrieb am 30.08.2012 um 17:12 Uhr:

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

      Antworten
  4. Michael
    schrieb am 04.07.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!

    Antworten
  5. Chris
    schrieb am 02.05.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?

    Antworten
  6. Marcus
    schrieb am 16.02.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 …

    Antworten
  7. Patrick
    schrieb am 03.01.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?

    Antworten
  8. Marcel
    schrieb am 28.12.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 :-)

    Antworten
  9. Marcel
    schrieb am 28.12.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?

    Antworten
  10. Andreas
    schrieb am 14.10.2011 um 19:45 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 14.10.2011 um 21:42 Uhr:

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

      Antworten
  11. Lars
    schrieb am 21.09.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.

    Antworten
    • Jonas Hellwig
      schrieb am 21.09.2011 um 12:54 Uhr:

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

      Antworten
  12. Andre
    schrieb am 18.08.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é

    Antworten
  13. Ünal Aydin
    schrieb am 11.08.2011 um 02: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

    Antworten
  14. Face
    schrieb am 28.07.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?

    Antworten
    • IS
      schrieb am 24.07.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

      Antworten
  15. Lucien
    schrieb am 12.05.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

    Antworten
  16. Torben kania
    schrieb am 09.05.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

    Antworten
  17. Raffael
    schrieb am 25.04.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ß!

    Antworten
  18. Lukas
    schrieb am 21.04.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

    Antworten
  19. Andreas
    schrieb am 21.04.2011 um 08: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

    Antworten
    • Jonas Hellwig
      schrieb am 22.04.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.

      Antworten
  20. Andreas
    schrieb am 21.04.2011 um 08: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

    Antworten
  21. Adrian
    schrieb am 04.04.2011 um 09:36 Uhr:

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

    Grüsse aus der Schweiz
    Adrian

    Antworten
  22. Christoph
    schrieb am 31.03.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! :)

    Antworten
  23. Digitale Notizen - Facebook iFrames und Fan-Gating
    schrieb am 31.03.2011 um 16:48 Uhr:

    […] 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 » […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →