So gehts: Fan-Gate bzw. Fan-only iFrame Apps
Fan only Content selbst programmieren
Mit dem Aus von Static-FBML und der Einführung von iFrame Apps hat Facebook es Seitenbetreibern etwas schwieriger gemacht eigenen Unterseiten anzulegen. Gerade der FBML Tag <fb:visible-to-connection> mit dem sich Inhalte nur für Fans beziehungsweise Nicht-Fans anzeigen ließen war bei vielen Seitenbetreibern beliebt, da sich hiermit ein sogenanntes Fan-Gate anlegen ließ. So konnte eine Exklusivität für Fans erzeugt werden, welche Nicht-Fans dazu veranlassen konnte zu Fans zu werden. Viele Unternehmen werden sich deshalb nun überlegen, ob Sie die Entwicklung jetzt nicht an eine Agentur abgeben oder eine Drittanbieter App zur Realisierung von Fanpage-Tabs verwenden. Während die erste Option Geld kostet, ist die zweite Option meist mit einem “sponsored by” Label versehen.
Wer aber eine halbe Stunde Zeit hat und sich nicht vor der Bedienung eines Texteditors scheut, kann sich auch selbst an die “Programmierung” wagen. Programmierung steht hier in Anführungszeichen, da es sich in erster Linie um Copy-Paste Arbeit handelt.
Legen wir also los.
Vorraussetzung:
- Verifizierter Facebook Account – Kreditkarte funktioniert immer
- Webspace mit PHP
Die Schritte:
- Facebook App anlegen, wie in unserem Gastbeitrag beschrieben
- Auf der Übersichtsseite unter http://facebook.com/developers die Anwendung auswählen und “Einstellungen bearbeiten” auf den Link “Fortgeschritten” klicken
- Die Option “OAuth 2.0 für Canvasseiten” aktivieren und abspeichern
- Die PHP API (facebook.php) bei GitHub runterladen und auf den eigenen Server in das bei Facebook hinterlegte Verzeichnis legen. An der Datei müssen keine Änderungen durchgeführt werden.
- Folgenden Quelltext in die Datei index.php einfügen:
$app_id, 'secret' => $app_secret, 'cookie' => true )); $signed_request = $facebook->getSignedRequest(); function parsePageSignedRequest() { if (isset($_REQUEST['signed_request'])) { $encoded_sig = null; $payload = null; list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2); $sig = base64_decode(strtr($encoded_sig, '-_', '+/')); $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true)); return $data; } return false; } if($signed_request = parsePageSignedRequest()) { if($signed_request->page->liked) { ?> Inhalt für Fans! <!--?php } else { ?--> Inhalt für Nicht-Fans! <!--?php } } ?-->
- App-ID und App-Secret einsetzen.
- Inhalte für Fans und Nicht-Fans anpassen.
- Fertig
Der Aufbau der HTML Datei ist im Quelltext nur als Beispiel zu sehen und muss / kann entsprechend angepasst werden. Wer sich die Umsetzung nicht zutraut, sollte mit diesem Tutorial am Besten zu einem (PHP-) Programmierer seines Vertrauens gehen. Der bekommt das auf jedem Fall hin.
Nutzt ihr schon ein Fan-Gate? Wie sind eure Erfahrungen damit?
Über den Autor:
Jens Wiese: Jens hat Online Medien (B.Sc.) und Digitale Medien (M.Sc.) an der Hochschule Furtwangen studiert. Jens berät als Freelancer große internationale Unternehmen, die auf Facebook aktiv sind, entwickelt neue Applikationen, organisiert Workshops und entwirft individuell passende Strategien. Zudem hat er das Bio-Verzeichnis Biodukte.de gegründet.
- Facebook Tabs im News Feed richtig verlinken und für mobile Nutzer zur Verfügung stellen
- Tutorial: Erstellen eines iFrame Tabs für die Facebook Timeline inklusive Fan-Gate und Share Button
- Timeline für Unternehmen: Fan-Gate ja, Welcome-Tab nein, Landing-Tab ja
- fmc 2012: Timeline Pages für Entwickler – Neue Fan Gate Methode erforderlich
- Breaking change: Fan-Abfrage in Anwendungen nicht mehr möglich (nach altem Standard)
April 14th, 2011 at 10:47
Danke dafür. Werde ich mir heuteAbend mal anschauen.
April 14th, 2011 at 12:01
Theoretisch müsste es doch jetzt auch möglich sein, auf meiner eigenen Seite spezielle Inhalte für Fans und Nicht-Fans anzeigen zu lassen. Oder irre ich mich??
April 14th, 2011 at 12:16
Der Vorteil bei den iFrames ist ja, dass man hier endlich mal die Möglichkeit hat, Inhalte tatsächlich zu verstecken. Bei dem FBML Tag wurden die Inhalte ja nur auf hidden gesetzt und waren nicht wirklich weg.
April 14th, 2011 at 12:53
Da ist übrigens ziemlich viel unnützer Code enthalten. Das hier reicht vollkommen:
require_once ‘facebook.php’;
$fb = new Facebook(array(
‘appId’ => ’109639582447147′,
‘secret’ => ‘af855124…d7a559e0′,
));
$signedRequest = $fb->getSignedRequest();
if ($signedRequest['page']['liked']) {
// Benutzer ist ein Fan.
} else {
// Benutzer ist KEIN Fan.
}
April 14th, 2011 at 12:54
Hat es einen bestimmten Grund, dass ihr eine eigene Funktion zum Entschlüsseln des Requests verwendet und nicht $facebook->getSignedRequest()?
April 14th, 2011 at 13:26
Ist ein User nicht eingeloggt, sieht er aber weder den Fan-Content noch den Non-Fan Content.
Kann man das irgendwie umgehen?
April 14th, 2011 at 14:04
Bis ich das alles mal raus hatte bin ich fast ausgerastet vor verzweiflung. Aber so ist es jetzt viel angenehmer zu abeiten
April 14th, 2011 at 15:37
@limbo
Kann ich mit irgendwie nicht so ganz vorstellen. Ich kann es aber nicht testen gerade. Sicher, dass das nicht damit zu tun hat, dass die die Einstellung für https aktiviert ist?
April 14th, 2011 at 15:39
oh, habe das gerade getestet und es scheint zu funktionieren..
kurz nach der “einführung” von frames, war der frame-inhalt nur für eingeloggte fb-user sichtbar… war man nicht eingeloggt, wurde der inhalt des frames einfach ncicht geladen..
funktioniert nun aber, super =)
April 14th, 2011 at 16:23
wieso krieg ich nur Zwei Komentare angezeigt ?
April 14th, 2011 at 20:10
Hallo – top Anleitung.
Bekomme allerdings immer folgende Fehlermeldung wenn ich mir die App auf dem Developer-Panel heraus ansehen will.
“To make sure users can view your app over a secure browser connection (https), please visit the developer console to update your Secure Tab URL.”
In meinem Profil ist https deaktiviert. Bin aber immer eingelogt mit https. Jemand einen Tipp?
April 15th, 2011 at 10:59
Hallo, ich versuch dass jetzt schon einige zeit, weis aber nicht wo der fehler liegen könnte.
Wenn ich die Iframe aufrufe wird die seite
src/facebook.php at master from facebook/php-sdk – GitHub
aufgerufen?
April 15th, 2011 at 11:59
Wenn man mit Userdaten arbeitet gibts ein kleines Problem: nachdem der User der App die Berechtigung erteilt hat auf die allgemeinen Daten zuzugreifen, wird nach wie vor auf den ‘alten’ signed_request (ohne user_id) zugegriffen.
Wenn der User die Page erneut aufruft, ist diese vorhanden.
Meine Frage: ist es möglich, sich den signed_request neu zu holen nachdem der User die Berechtigung erteilt hat, oder muss ich die uid vom FB.login-response auslesen und manuell übergeben?
April 15th, 2011 at 17:23
Netter Beitrag! Vielleicht haben wir Facebook nur nicht verstanden, ich kann hier aber nur die Aussagen unserer Kunden aus dem “Automativen Sektor” wiedergeben: “Selbstverständlich sind uns die positiven Nebeneffekte des “Like Buttons” und der damit ansteigenden Fan-Anzahl bewusst, doch käme es einer Eintrittsgebühr in den Showroom, in unser Ladengeschäft gleich. Ausserdem wollen wir echte Fans und keine Erzwungenen – ein gesetztes “Like” kann ganz schnell wieder zu einem “Un-Like” gemacht werden nach dem man die “versteckten” Inhalte eingesehen hat. Vielleicht kann mich hier jemand eines “Besseren” belehren…
April 15th, 2011 at 17:28
Netter Beitrag, aber vielleicht haben wir Facebook nicht verstanden, auch wenn uns das sog. Like-Gate ja schon lange bekannt ist…
Ich kann hier nur einen kurzen O-Ton eines unserer Social-Media-Kunden aus dem automativen Sektor wiedergeben: “Ein Like-Gate kommt für uns nicht in Frage, das kämme einer Eintrittsgebühr in unsere Geschäftsräume, in unserem Showroom gleich! Ferner kann man ein erzwungenes Like nach Einsicht unkompliziert wieder in ein Un-Like verwandeln. Erzwungene Fans können kein realistisches Bild eines Unternehmens, einer Marke oder einer Dienstleistug wiedergeben, auch wenn uns der positive Nebeneffekt vieler Fans innerhalb von Facebook bewusst ist…
Vielleicht könnt ihr mir hier Eure Ansichten darüber mitteilen….
Danke
April 18th, 2011 at 13:38
Ich bin sehr glücklich endlich was passendes gefunden zu haben. Die alte Version mit den FBML-Seiten kannte ich und habe ich sehr oft angewendet. Aber mit der Einführung der iFrame-Seiten war ich jetzt vollständig aufgeschmissen.
Es funktioniert prima 
Vielen Dank an euch für das Tutorial
April 19th, 2011 at 15:46
Vielen vielen Dank!
Ohne dieser Anleitung hätte ich die App wohl nicht hinbekommen!
April 21st, 2011 at 09:51
[...] Bereits letze Woche hatten wir einen Beitrag zum Fan-Gate in iFrame Anwendungen. Jetzt haben uns die Powerflasher ein Update zu diesem Beitrag geschrieben. [...]
Mai 3rd, 2011 at 12:00
BEimir Stopt es in der Zeile 21 if($signed_request = parsePageSignedRequest()) {
Er zeigt mir also immer nix an.
Nehme ich die verkürzte Version von Michael (aus den Kommentaren) zeigt er mir immer an, dass ich es nicht geliked habe. Was nicht der Fall ist.
Ich bin verifiziert und habe die App richtig angelegt. Was stimmt nicht???
Danke
Mai 16th, 2011 at 21:16
Danke für das Tutorial. Werde es morgen gleich mal ausprobieren. Gibt es Aussichten wie sich iFrame weiterentwickelt, gibt es schon was neues in Aussicht und was wird aus FBML? Fragen über Fragen
Juni 1st, 2011 at 09:14
[...] Fan nicht mehr den Welcome Tab anschauen, statt dessen wird man sofort zur Pinnwand weitergeleitet. Für diesen Case müsst ihr den Code nur hinter einem Fan-Gate verstecken. Den wirklichen Sinn dieser Umleitung haben wir zwar noch nicht gefunden, aber funktionieren tut [...]
Juni 6th, 2011 at 11:48
SUper Anleitung, aber folgendes PRoblem,
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/www/nch382/html/dlrgfacebook/facebook.php on line 35
Was ist passiert, alle Dateien liegen in einem Ordner, Anwendungs-ID und Geheimcode sind eingetragen.
eingetragene URL -> http://www.stef4n.de/dlrgfacebook/
Meldung auf FB: Seiten-Domain: http://www.stef4n.de/dlrgfacebook/ is not a valid domain
Danke für die Hilfe
Juni 6th, 2011 at 12:37
[...] nicht Fan einer Seite ist bekommt beim Besuch der Seite einen anderen Inhalt angezeigt als ein Fan. Wie man ein solches Fan-Gate installiert haben wir bereits letzte Woche gezeigt und werden wir in Kürze auch noch einmal in einer optimierten Version hier im Blog [...]
Juni 10th, 2011 at 16:16
@Stefan
genau den Fehler hab ich auch immer und kann den bisher nicht ausmerzen, hast du da mittlerweile eien Lösung gefunden?
Juni 10th, 2011 at 17:23
Fehler gefunden, scheint nur mit PHP 5 zu laufen, doch jetzt kämpfe ich mit session_start()
Juni 12th, 2011 at 18:07
Auch erledigt, mein Gott bin ich ungeduldig :> Alles super, danke für den Code
Juni 15th, 2011 at 09:26
Eine spitzen App, jedoch wäre für mich folgendes sehr interessant:
Wenn ich mich auf die Seite klicke und kein Fan bin, dann sollte ich direkt auf die Seiten dieser App kommen, damit der User aufgefordert wird, Fan zu werden.
Wenn ich jedoch schon Fan bin, sollte ich direkt zur Pinnwand gelangen.
Ist das zu realisieren?
Grüße,
Jojo
Juni 24th, 2011 at 23:19
@ Stefano:
ich habe auch das gleiche problem:
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /…/FB/facebook.php on line 35
hast du ein work around dafür? ich komme hier nicht weiter..
1000 danke und besten gruß,
steven
Juni 27th, 2011 at 15:04
[...] [...]
Juni 30th, 2011 at 22:34
[...] [...]
Juli 2nd, 2011 at 15:52
Bei mir steht da jetzt:
Warning: session_start() [function.session-start]: Cannot send session cookie – headers already sent by …
Was muss ich ändern?
Juli 11th, 2011 at 10:06
Habe das gleiche Problem wie Sven, irgendwie funktioniert euer Code oben nicht mehr so wie er sollte
Juli 13th, 2011 at 16:13
Hallöchen, ich habe auch das Problem, das ich keine Daten mehr ausgegeben bekomme, der code bei mir:
$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$like_status = $signed_request["page"]["liked"];
$country = $signed_request["user"]["country"];
$locale = $signed_request["user"]["locale"];
echo “page id = $page_id”;
echo “page admin = $page_admin”;
echo “like status = $like_status”;
echo “country = $country”;
echo “locale = $locale”;
Juli 15th, 2011 at 15:04
Liegts vielleicht an den falsch gesetzten Zoll-Zeichen? Variable muss duch außerhalt sein:
echo “page id =”.$page_id;
statt echo “page id = $page_id”;
Juli 17th, 2011 at 17:23
@Stefan @Stefano @Steven
Ich hatte genau den gleichen Fehler.
Die Lösung: in der .htaccess eintragen, dass php-Dateien als PHP5 geparst werden sollen:
AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php
Juli 18th, 2011 at 08:42
So, endlich gelöst. Für alle, welche den Session-Error kriegen, in der facebook.php Zeile 37 ein @ vor die Funktion setzen, siehe hier:
http://forum.developers.facebook.net/viewtopic.php?id=101058
Juli 20th, 2011 at 13:50
@Mike
danke! ich hatte es glücklicherweise schon woanders gelesen, war aber genau der fehler..
jetzt nur noch die https geschichte lösen irgendwann, dann ist alles klar…
Juli 25th, 2011 at 23:13
Ich scheitere schon gleich hier ” Auf der Übersichtsseite unter http://facebook.com/developers die Anwendung auswählen und “Einstellungen bearbeiten” auf den Link “Fortgeschritten” klicken”
Ich finde keinen Link “Fortgeschritten”???
Juli 26th, 2011 at 09:14
@Susi
Die Option gibt es so nicht mehr, jetzt kannst du deine App einfach bearbeiten und da Links die entpsrechenden Dinge unter “On Facebook” eintragen.
August 11th, 2011 at 08:54
Hallo zusammen, ich habe ein Problem mit dem Fangate. Bei mir wird rein garnichts angezeigt.
Habe alles geamcht, wie beschrieben, aber es ist leider nichts zu sehen…
Könnt ihr mir weiterhelfen?
Grüße Pascal
August 18th, 2011 at 14:59
Wer WordPress oder Joomla hat, bekommt dies ganz einfach und schnell und kostenlos gelöst! Siehe http://www.jootab.com/de/fangate
August 22nd, 2011 at 15:38
Hallo,
kann es sein, dass die facebook.php nicht mehr in Ordnung ist?
Alle bislang erstellten Fangatings funktionieren nicht mehr. Liegt der Fehler bei mir oder an der facebook.php?
August 23rd, 2011 at 17:05
Hallo zusammen,
habe das Tutorial soweit befolgt, auch die Änderung in Zeile 37 vorgenommen. Leider habe ich dasselbe Problem wie Pascal, es wird nichts angezeigt. lediglich eine leere Seite. Lasse ich mir den Quelltext anzeigen, so ist dort nichts eingetragen.
Woran könnte das Problem liegen?
Über eine Antwort wäre ich sehr dankbar.
Oktober 5th, 2011 at 13:58
Hallo zusammen,
ich glaub ich habe das gleiche Problem wie Jack,
kurz zur Umgebung, ich habe
- PHP Version 5.2.6-1+lenny13
- Facebook PHP SDK 3.1.1
und das Script so wies oben steht mit der facebook.php im verzeichnis hochgeladen – trotzdem hab ich eine komplett leere Seite
Ich hoff ihr wisst was das Problem ist?
Oktober 5th, 2011 at 17:22
Komme leider auch nicht weiter. Gibt es noch eine alternative Anleitung? Die index.php wird bei mir nicht angezeigt.
Oktober 5th, 2011 at 20:09
Habe das Problem im ersten Schritt lösen können.
Durch hochladen der Datei .htaccess konnte php gestartet werden. Es erscheint aber nur die Seite für Fans nicht der Inhalt für Nicht-Fans
Oktober 9th, 2011 at 13:20
Bei mir wird Test angezeigt, jedoch, wenn ich ein Bild einbinden will, bleibt die Seite leer – jemand eine Lösung?
Oktober 21st, 2011 at 17:43
[...] Die Begriffe „Fan-Gating“ oder „Like-Gating“ haben sich bei Internet-Marketern eingebürgert als Bezeichnung für bestimmte Inhalts-Weichen auf Facebook. Genauer gesagt handelt es sich um bedingte Content-Anzeigen je nach Like-Status eines Besuchers. So ist es Marketern z. B. in selbst definierten iFrame-Reitern möglich, an diejenigen Besucher, die „like“ schon geklickt haben, andere Inhalte auszuliefern, als an Fremde. Wohl häufigster Anwendungsfall: Auf der Willkommensseite wird eine „Oben auf ‚Gefällt mir‘ klicken und Gutschein enthüllen“-Anweisung für Nicht-Fans gezeigt, die sich beim Klick auf „Like“ in den Gutscheincode wandelt, den exklusiv nur die Anhänger der Marke sehen sollen. (Dies haben wir bereits hier vorgestellt. Wie Sie heute eine solche Weiche erstellen können, lesen Sie z. B. auf AllFacebook.de.) [...]
November 7th, 2011 at 14:46
Super Lösung die ich selbst gerade ausprobiere. Arbeitet denn diese Lösung ohne SSL? Insbesondere in Chrome bekomme ich enorme Probleme ohne einen SSL Zertifizierten Server.
November 7th, 2011 at 19:51
Leider finde ich die Option ““OAuth 2.0 für Canvasseiten” nicht auf der Seite “Fortgeschritten”
November 8th, 2011 at 09:53
Enhanced Auth Dialog Ist der neue 2.0 Dialog
November 15th, 2011 at 18:14
Hallo, ich habe ebenfalls das Problem, dass kein Inhalt abgebildet wird. Siehe Pascal oder Andreas Edler.
Konnte das Problem von jemandem behoben werden?
SSL wurde eingebunden und Hosting läuft unter PHP5…
November 15th, 2011 at 19:30
Also wenn ich direkt zur Anwendung gehe wird bei mir der Text angezeigt aber wenn ich bei der PAGE auf den Reiter klicke bleibt es weiss
kann mir wer helfen?
November 16th, 2011 at 10:22
Bist Du sicher, dass dein Server https unterstützt und du den richtigen Link auf Facebook eingetragen hast? Sonst läuft es nicht
Dezember 1st, 2011 at 13:06
Hallo!
Ich habe seit ein paar Tagen folgendes Problem: Die Fangates gehen per HTTPS perfekt, per HTTP wird jedoch gar nichts angezeigt. Habe nun schon 100 mal alle Einstellungen getestet – da ist kein Fehler bzw. hat sich nichts verändert. Habt ihr ähnliche Probleme?
Dezember 7th, 2011 at 12:18
Dankeschön
Dezember 9th, 2011 at 19:05
hi zusammen,
das ganze kann gar nicht mehr so recht funktionieren. wenn man sich die werte von [$signed_request] mal ausgeben lässt, erscheint:
Array
(
[algorithm] => HMAC-SHA256
[issued_at] => XXXXXXXXXXX Array
(
[country] => de
[locale] => de_DE
[age] => Array
(
[min] => 21
)
)
)
da aber im array ein wert zu [page] gesucht wird, schlägt das fehl, weil es diesen im request nicht gibt…
schon ne lösung vorhanden?
vG ingo
Dezember 9th, 2011 at 19:09
Hey Ingo,
es läuft gut. Kannst mir deine Kontaktdaten hier lassen, falls du Hilfe brauchst.
Dezember 9th, 2011 at 20:39
@Danny
danke für die angebotene Hilfe. Kannst mich jederzeit kontaktieren unter megacarty[AT]googlemail.com…
Wie gesagt, hab alles nach Anleitung gemacht, aber wenn der Status (like-Status) abgefragt werden soll schlägt das fehl, weil der Array-Parameter nicht vorhanden ist…
vG ingo
Dezember 9th, 2011 at 20:54
Kommando zurück
Hab mir bei fb für die app noch nen token erzeugen lassen mit den relevanten daten…bingo…nun funzt das astrein
trozdem danke, auch für die tolle anleitung
Dezember 12th, 2011 at 12:20
Hallo,
nicht Fans kommen beim Besuch einer von mir gestalteten Fanpage auf einen “Welcome” Reiter. Dieser hat den oben genannten Code eingebaut und das funktioniert soweit auch gut.
Klickt der User nun aber auf “Gefällt mir”, bleibt er nicht auf dem Reiter, sondern wird auf die Pinnwand gelotzt. Er soll aber nach dem “Gefällt mir” klicken auf dem “Welcome” Reiter bleiben, damit ihm sofort der Inhalt für Fans angezeigt wird.
Nur bei Admins der Seite klappt es, dass man auf dem Reiter bleibt – neue Fans, werden auf die Pinnwand gelotzt.
Gibt es da eine Lösung für?
Januar 13th, 2012 at 11:32
Scheint irgendwie nicht mehr zu funktionieren diese Lösung?
Die Option “OAuth 2.0 für Canvasseiten” gibt es auch nichtmehr in den Einstellungen.. kennt jemand eine Lösung?
Januar 13th, 2012 at 15:59
Ja Jasper. Gib mir deine Email-Adresse, dann debugge ich es dir.