Fan only Content selbst programmieren

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:

  1. Verifizierter Facebook Account – Kreditkarte funktioniert immer
  2. Webspace mit PHP

Die Schritte:

  1. Facebook App anlegen, wie in unserem Gastbeitrag beschrieben
  2. Auf der Übersichtsseite unter http://facebook.com/developers die Anwendung auswählen und “Einstellungen bearbeiten” auf den Link “Fortgeschritten” klicken
  3. Die Option “OAuth 2.0 für Canvasseiten” aktivieren und abspeichern
  4. 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.
  5. 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!
      
          Inhalt für Nicht-Fans!
    
  6. App-ID und App-Secret einsetzen.
  7. Inhalte für Fans und Nicht-Fans anpassen.
  8. 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?


63 Kommentare

  1. Peter

    Danke dafür. Werde ich mir heuteAbend mal anschauen.

    Antworten
  2. 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??

    Antworten
  3. 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.

    Antworten
  4. 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.
    }

    Antworten
  5. Andi

    Hat es einen bestimmten Grund, dass ihr eine eigene Funktion zum Entschlüsseln des Requests verwendet und nicht $facebook->getSignedRequest()?

    Antworten
  6. limbo

    Ist ein User nicht eingeloggt, sieht er aber weder den Fan-Content noch den Non-Fan Content.

    Kann man das irgendwie umgehen?

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

    Antworten
  8. limbo

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

    Antworten
  9. Daniel

    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?

    Antworten
  10. Lukas

    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?

    Antworten
  11. Andi

    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?

    Antworten
  12. 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…

    Antworten
  13. 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

    Antworten
  14. 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.
    Vielen Dank an euch für das Tutorial :) Es funktioniert prima :)

    Antworten
  15. Vielen vielen Dank!
    Ohne dieser Anleitung hätte ich die App wohl nicht hinbekommen!

    Antworten
  16. Matthias

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

    Antworten
  17. 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 :)

    Antworten
  18. Stefan

    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

    Antworten
  19. @Stefan

    genau den Fehler hab ich auch immer und kann den bisher nicht ausmerzen, hast du da mittlerweile eien Lösung gefunden?

    Antworten
  20. Fehler gefunden, scheint nur mit PHP 5 zu laufen, doch jetzt kämpfe ich mit session_start() :P

    Antworten
  21. Auch erledigt, mein Gott bin ich ungeduldig :> Alles super, danke für den Code :)

    Antworten
  22. Johannes Dunst

    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

    Antworten
  23. steven

    @ 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

    Antworten
  24. Sven

    Bei mir steht da jetzt:
    Warning: session_start() [function.session-start]: Cannot send session cookie – headers already sent by …

    Was muss ich ändern?

    Antworten
  25. Habe das gleiche Problem wie Sven, irgendwie funktioniert euer Code oben nicht mehr so wie er sollte :(

    Antworten
  26. Tobi

    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”;

    Antworten
  27. Tice

    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”;

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

    Antworten
  29. Steven

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

    Antworten
  30. Susi

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

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

    Antworten
  32. Pascal

    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

    Antworten
  33. Thomas

    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?

    Antworten
  34. Jack

    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.

    Antworten
  35. 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?

    Antworten
  36. Komme leider auch nicht weiter. Gibt es noch eine alternative Anleitung? Die index.php wird bei mir nicht angezeigt.

    Antworten
  37. 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

    Antworten
  38. Wlaad

    Bei mir wird Test angezeigt, jedoch, wenn ich ein Bild einbinden will, bleibt die Seite leer – jemand eine Lösung?

    Antworten
  39. 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.

    Antworten
  40. Stefan

    Leider finde ich die Option ““OAuth 2.0 für Canvasseiten” nicht auf der Seite “Fortgeschritten”

    Antworten
  41. onkeltobi

    Enhanced Auth Dialog Ist der neue 2.0 Dialog

    Antworten
  42. Sven

    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…

    Antworten
  43. Mariodev

    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?

    Antworten
  44. Bist Du sicher, dass dein Server https unterstützt und du den richtigen Link auf Facebook eingetragen hast? Sonst läuft es nicht

    Antworten
  45. Danny

    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?

    Antworten
  46. Ingo

    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

    Antworten
  47. Danny

    Hey Ingo,

    es läuft gut. Kannst mir deine Kontaktdaten hier lassen, falls du Hilfe brauchst.

    Antworten
  48. Ingo

    @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

    Antworten
  49. Ingo

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

    Antworten
  50. Marcel

    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?

    Antworten
  51. Jasper

    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?

    Antworten
  52. Danny

    Ja Jasper. Gib mir deine Email-Adresse, dann debugge ich es dir.

    Antworten

Diskutiere mit uns!