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.

<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
FB.init({
    appId:'10021984 191180', 
    cookie:false,
    status:false, 
    xfbml:true
});
</script>
<div id="fb-root"></div>

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

<div id="like_button"><fb:like href="http://www.facebook.com/Powerflasher" layout="button_count" show_faces="false" width="85"></fb:like></div>
 
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(response) {
	top.location.href='http://www.facebook.com/Powerflasher?sk=app_10021984 191180';
});
</script>

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.

<style type="text/css">
#like_button {
	width: 85px;
	overflow: hidden;
}
</style>

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

Über den Autor:

Gastautor: Dieser Beitrag wurde von einem Gastautor erstellt (siehe Verweis im Beitrag). Wir sind laufend auf der Suche nach neuen Gastautoren die ihre Expertise in einem Themengebiet bei uns diskutieren und veröffentlichen wollen. Wenn du auch Lust hast bei uns im Blog einen Beitrag zu veröffentlichen kannst du dich einfach bei uns melden. Mehr...

Ingo Herber says:
April 21st, 2011 at 11:31

Sehr interessant. Werde ich mal testen.
Schade, dass eine Freundesliste zum einladen per iframe wohl nicht mehr funktioniert. Bsp: http://www.facebook.com/FCKoeln?sk=app_4949752878
Info: Das Ausblenden des Counters funktioniert hier nicht korrekt. Unter Windows7, IE 9 und Firefox 4 werden die ersten Pixel des Counters noch angezeigt.

Christian Margreiter (via facebook) says:
April 21st, 2011 at 12:36

bringt sich ja nix, die inhalte sehe ich trotzdem

Andi Schrotti says:
April 21st, 2011 at 12:55

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

Anja Windmüller (via facebook) says:
April 21st, 2011 at 13:34

Mh, der Artikel existiert hinter dem geposteten Link irgendwie nicht

Matthias says:
April 21st, 2011 at 14:20

Irgendwie klingt Fangate so nach Skandal. ^^

Zamisli Harun (via facebook) says:
April 21st, 2011 at 16:43

danke, das ist super!

Patrick Brunmayr (via facebook) says:
April 21st, 2011 at 19:53

Was man nicht für tollen Namen für alltägliche Probleme erfinden kann

mila says:
April 27th, 2011 at 23:00

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?

H.Wild says:
April 28th, 2011 at 13:19

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!

Andi says:
Mai 19th, 2011 at 11:43

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

Jürgen says:
Mai 26th, 2011 at 16:27

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

Roland says:
Juli 27th, 2011 at 10:18

Hallo!
Was muss ich hier eingeben:
$current_page = $like_page . “?sk=app_XXXXXXX
Danke

Rappi says:
August 9th, 2011 at 10:09

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!

Unsere Fanseite in neuem Design | dozeo Blog says:
August 12th, 2011 at 10:11

[...] php-basierte Fanseite haben wir auf Basis einer Vorlage erstellt, die der Blog allfacebook.de freundlicherweise zum Download anbietet. Vielen Dank [...]

Thomas says:
August 23rd, 2011 at 15:52

Habe dasselbe Problem wie Rappi, wäre demjeniger sehr verbunden der weiterhelfen kann.

Nina says:
September 13th, 2011 at 11:46

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

Laura says:
Oktober 21st, 2011 at 13:03

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?