Sie befinden sich hier:
» 
» 
21.05.2012

Facebook:
Fan-Gate für Timeline in HTML5 als Download

Über Sinn und Unsinn eines Fan-Gates kann man lange streiten. Mich hat die Technik im Hintergrund interessiert. Ergebnis ist die Basisfunktionalität eines Fan-Gates, welches durch individuelle Anpassungen auf jeder Fanpage verwendet werden kann. Dieses Fan-Gate funktioniert unter Timeline-Bedingungen. Es ist in HTML5 implementiert und der Code ist W3C-valide. Ein IE-Fallback wurde eingebaut, damit ältere Internet-Explorer die HTML5-Tags korrekt interpretieren.

Voraussetzung

  • Sie haben eine Applikation auf Facebook als iframe-Applikation erstellt.
  • Der entsprechende Inhalt des iframes liegt auf einem öffentlichen Webserver, möglichst über http und https ansprechbar.
  • PHP ist auf dem Webserver verfügbar.
  • Wie das Fan-Gate in Ihre Fanpage eingebunden wird, ist im Artikel Facebook-App als Page-Tab einbinden beschrieben.

Logik des Fan-Gates

  • Das Fan-Gate basiert auf der Auswertung des signed_request.
  • Darin enthalten ist u.a. die Information, ob man Fan oder noch kein Fan einer Fanpage ist.
  • Ist der Besucher noch kein Fan, wird der Seiteninhalt mit einem darüberliegenden Layer verdeckt.

Das Fan-Gate deckt folgende Situationen ab

  • Der Besucher hat sich noch nicht in Facebook angemeldet. ⇒ Er muss sich, falls er „gefällt mir“ drückt, im nachfolgenden Dialog anmelden. Danach hat er sofort Zugriff auf die Inhalte.
  • Der Besucher hat sich bereits in Facebook angemeldet, ist aber noch nicht Fan der Fanpage. ⇒ Über den Seiteninhalt wird ein halbtransparenter Layer gelegt. Der Besucher hat die Möglichkeit, den „gefällt mit“-Button zu drücken und somit Fan zu werden. In diesem Fall wird der halbtransparente Layer geschlossen und der Inhalt der Webseite ist frei zugänglich.
  • Der Besucher ist bereits Fan und bemerkt dadurch nichts von einem Fan-Gate. Er hat direkten Zugriff auf die Informationen.

Dieses Fan-Gate im praktische Einsatz

Um die Funktionsweise des Fan-Gates zu demonstrieren, habe ich es in meine Fanpage integriert. Gehen Sie auf die Fanpage Web-Tipps und folgen dem Page-Tab „Download Area“. Dort können Sie dieses Fan-Gate testen und bei gefallen auch als ZIP herunterladen. In dem ZIP befindet sich alle notwendigen Komponenten (incl. einer aktuellen jQuery-Version). Es steht Ihnen aber frei, z.B. eine andere jQuery-Version einzubinden. In den Scripten werden nur Basics verwendet, die selbst in der Version 1.0 schon enthalten sind.

Anpassung an die eigene Fanpage

  • index.php:
    Zu Beginn werden zwei Konstanten gesetzt. Dies ist der Secret_Code Ihrer Applikation und die Url Ihrer Fanpage. Die Position, an der der eigentliche Seiteninhalt eingefügt wird, ist durch einen gut sichtbaren Kommentar gekennzeichnet.
  • js/no-fan-min.js:
    Hier muss die AppId (Applikation-Id) angepasst werden.

Lizenzierung

Dieses Fan-Gate kann kostenlos verwendet werden.
http://www.kaempf-nk.de/webseitengestaltung/js/license.txt

Was tun, wenn es nicht funktionieren will?

Falls beim Einbau Schwierigkeiten auftreten oder Ihnen die notwendige Affinität zur Programmierung fehlt, können Sie mich gern kontaktieren.
Wenn es funktioniert, freue ich mich natürlich über ein positives Feedback.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

42