So gehts: Fangating mit eigenem „Gefällt mir“-Button.

So gehts: Fangating mit eigenem „Gefällt mir“-Button.


– Gastbeitrag – Bereits letze Woche hatten wir einen Beitrag zum Fan-Gate in iFrame Anwendungen. Jetzt haben uns die Powerflasher ein Update zu diesem Beitrag geschrieben.

„Klicke oben auf ‚gefällt mir’ um den Inhalt dieser Seite zu sehen“, so lautet die Aufforderung auf vielen Seiten, die via Fan-Gating Exklusivität für Fans erzeugen.

Facebook bietet mit der Einführung von iFrame Apps Seitenbetreibern längst die Möglichkeit den Button in das eigene Layout einzubetten und damit Nutzern eine elegante Möglichkeit sich als Fan zu bekennen. Ein gutes Praxisbeispiel bietet Nike Football – Superfly Özil.

Wer eine halbe Stunde Zeit und einen Texteditor zur Hand hat kann sich selbst an die Programmierung wagen oder gleich das Beispiel herunterladen.

Vorraussetzung:

  • Verifizierter Facebook Account
  • Webspace mit z.B. PHP
  • Facebook App mit aktiviertem OAuth 2.0
  • Das Facebook PHP SDK

Schritt 1: Fangating mit PHP einrichten.

require_once 'facebook/facebook.php';
$facebook = new Facebook(array(
'appId' => '10021984 191180',
'secret' => 'prslehfocecefeiwdktistorhraßeet'
));
$signedRequest = $facebook->getSignedRequest();
if ($signedRequest['page']['liked']) {
// Benutzer ist ein Fan.
} else {
// Benutzer ist kein Fan.
}

Schritt 2: Javascript Facebook Connect laden und initialisieren.



Schritt 3: Like Button via XFBML rendern und Reload Handler hinzufügen.

Schritt 4 (Optional): Like Count per CSS ausblenden.
Wer möchte kann noch die Anzahl der „Likes“ per CSS ausblenden und den Button etwas schmaler machen. Die Breite von 85px ist für die deutsche Version passend. Sollte man mehrsprachig arbeiten, so muss die Breite pro Sprache geprüft und gegebenenfalls angepasst werden.

 

Über die Autoren.

Powerflasher

Fabian Nöthe ist Creative Director und Creative Technologist bei Powerflasher und hat Ende 2009 das Powerflasher Büro in Hamburg eröffnet. Alexander Funke ist Senior Software Developer bei Powerflasher und hat sich unter anderem auf Facebook Applikationen mit Ruby on Rails spezialisiert. Die Powerflasher GmbH ist spezialisiert auf die Bereiche Multimedia, Human Interface Design und Application Development.

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone

Es gibt 18 Kommentare

Deinen hinzufügen
  1. 3
    Andi Schrotti

    @Ingo Herber: Der (Multi-)Friend-Selector funktioniert nach wie vor. Auch wenns ein wenig umständlich ist das Ding einzubauen. Ich habe es gerade letzte Woche in einem Projekt eingebaut. Sehr hilfreich war dazu folgendes Beispiel: http://stackoverflow.com/questions/820421/can-i-use-facebooks-fbfriend-selector-in-an-iframe

    Der einzige Nachteil: bei mir wird der ‚Einladen‘-Dialog abgeschnitten, da er breiter ist als das iframe. Hoffentlich gibts dazu bald mal nen Fix seitens facebook.

  2. 9
    mila

    Wie geht ihr mit dem Fehler um: Parse error: syntax error, unexpected T_NEW
    Der wird bei mir von der facebook.php verursacht! Wisst ihr was man da machen kann?

  3. 10
    H.Wild

    Kann mir jemand sagen wie ich ein FanGate für das Fotoalbum hinbekomme?

    Also wie kann ich nach meinem FanGate auf meine Fotos verlinke ohne den Reiter zu wechseln?

    Danke!

  4. 11
    Andi

    @H.Wild: du könntest natürlich die fotoalben in deiner app selbst auslesen. macht aber meiner meinung nach nicht viel sinn, weil du damit bereits vorhandene funktionalität nachbildest. ev. einfach per top.location.href auf den foto-tab leiten?

  5. 12
    Jürgen

    Die Weiterleitung funktioniert leider nur, wenn man direkt auf dem Facebook Profil ist. Wenn man aber Einladungen an seine Freunde verschickt, dann funktioniert zwar der like-Button, aber die Weiterleitung streikt

  6. 14
    Rappi

    Hallo.
    Hab das hier gerade gefunden und sofort ausprobiert.
    Leider wird nicht erkannt, das man bereits auf Like geklickt hat :-( Es kommt also immer die Meldung „Sie sind kein Fan. ….“

    Jemand eine Idee woran es liegen kann? Habe das Beispiel oben dongeloaded und so übernommen…

    LG
    Rappi

    @Roland hinter sk= einfach wall oder info einsetzen. das sind die Seiten auf deiner Likepage!

  7. 17
    Nina

    Hallo,
    ich habe einen Fangate nach dieser Anleitung entwickelt, und es funktioniert im Sandbox-Modus und solange die Seite nicht live geht auch einwandfrei.
    Sobald ich aber Die Anwengung im Livemodus laufen lasse, funktioniert die Weiterleitung nicht mehr. Ich möchte eigentlich auf meiner „Willkommen“ Seite bleiben und den Inhalt für’s Fan sein anzeigen, werde aber stattdessen auf die Pinnwand geleitet.
    Wie gesagt, wenn ich das als Admin der Seite ausprobiere, funktioniert es aber perfekt. Irgendeine Idee woran das liegen könnte?

    Danke schonmal, Nina

  8. 18
    Laura

    Hi, Danke für diesen Artikel! Genau das was ich gesucht habe!
    Kann man denn auch eine beliebige Grafik dafür verwenden ? Oder muss es die „Gefällt mir“ Grafik von Facbeook sein?

+ Hinterlasse einen Kommentar