Die Facebook-Likebox

Möchte man eine Facebook-Likebox, einen Like-Button oder eine Fanbox in seine Seite integrieren und hat den Ehrgeiz, validen Code zu schreiben, sieht man sich vor einige Probleme gestellt und Facebook lässt einen da ziemlich allein. Zwar gibt es für alle Probleme Lösungen im Netz, jedoch sind die jeweils an verschiedenen Stellen zu finden (zumindest letzte Woche war es noch so). Darum will ich hier versuchen, den ganzen Prozess für Menschen mit ähnlich bescheidenen Fähigkeiten wie ich sie habe nachvollziehbar zu beschreiben und vor allem die hilfreichen Links an einer Stelle zu bündeln, so dass nach dem Finden dieser Seite kein weiteres Suchen nötig ist.

Vorbereitungen bei Facebook

Was Facebook zur Einrichtung einer Likebox beisteuert, steht hier:
http://developers.facebook.com/docs/reference/plugins/like-box/
Für die deutschsprachige Version ersetzt man im dort erhaltenen Code-Snippet http://connect.facebook.net/en_US/all.js#xfbml=1 durch http://connect.facebook.net/de_DE/all.js#xfbml=1.
Aber eines nach dem anderen.

Man beginnt zunächst damit, dass man auf der Start-Seite seines Facebook-Kontos auf "Seiten" und dort auf "Seite erstellen" klickt. Der Link zu dieser Seite enthält dann eine 15-stellige Zahl, die man als profile_id später braucht.

Dann erstellt man unter http://www.facebook.com/developers/apps.php eine Anwendung, wobei man eine 11-stellige Zahl erhält, die später bei fb:app_id und im JavaScript SDK unter 'YOUR APP ID' eingetragen wird. Wenn man den "Site URL" angibt, sollte man den Schrägstrich am Ende (Slash Forward) nicht vergessen.

DOCTYPE XHTML+RDFa

Facebook möchte, dass wir im <Head>-Bereich unserer Seite die Meta-Tags für das Open-Graph-Protokoll setzen. Vier Tags sind unbedingt erforderlich:

<meta property="og:title" content="Facebook-Likebox einfügen und gestalten" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.effenberg.de/likebox.htm" />
<meta property="og:image" content= "http://www.effenberg.de/photos/effenberg-facebook-sw.jpeg" />

Die anderen können wir nach Gusto hinzufügen oder weglassen.

Die Angabe von meta property führt aber zu einer Fehlermeldung des Validators, denn das gibt es nur bei RDFa, nicht bei HTML (auch wenn Bestrebungen dazu im Gange sind, das zu ändern) und auch nicht bei "normalem" XHTML. Deshalb wandeln wir den Code unserer Seite nun zunächst in XHTML um (falls die Seite nicht ohnehin in XHTML geschrieben wurde). Wer damit Schwierigkeiten hat, dem sei der fantastische kostenlose Editor PSPad empfohlen, der das mittels Tidy unter dem Menüpunkt HTML/Tidy/Tidy convert to XHTML problemlos erledigt. Anschliessend deklarieren wir unsere Seite als XHTML+RDFa 1.0, so dass der Anfang unserer Seite etwa so aussieht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0" xml:lang="de-DE" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

Die Angabe xmlns:fb="http://www.facebook.com/2008/fbml" könnten wir uns genauso gut sparen, aber dazu kommen wir gleich. Jetzt tragen wir erstmal die Open-Graph-Meta-Tags ein, wie oben beschrieben. Ausser den 4 unbedingt nötigen og-Tags brauchen wir noch 2 fb-Tags

<meta property="fb:app_id" content="ID der Anwendung" />

und

<meta property="fb:admins" content="ID Deines Facebook-Accounts" />

(wobei "og:site_name" und "og:description" auch nicht schaden können.)

Kein Schema auf http://www.facebook.com/2008/fbml

Wenn wir jetzt das von Facebook erhaltene XFBML-Snippet in unseren Code einfügen, sollte eigentlich alles in Ordnung sein, aber leider ist das nicht der Fall. Das fehlende Attribut type="text/javascript" können wir zwar händisch einfügen, aber es bleiben immer noch die Fehlermeldungen 'there is no attribute "profile_id"' usw., denn obwohl Facebook empfiehlt, als Quelle für das fb-Schema "http://www.facebook.com/2008/fbml" anzugeben, befindet sich dort...nichts.

Glücklicherweise hat Kevin Lieser eine Javascript-Lösung dazu veröffentlicht. Nachdem wir die .js-Datei herunter- und auf unseren Server geladen (und den Pfad gegebenenfalls angepasst) haben, nachdem das JavaScript SDK am Ende unserer Seite (vor </body>) eingefügt und das Facebook-Snippet (genauer gesagt der Teil zwischen <fb:like-box und /fb:like-box>) wie bei Kevin Lieser beschrieben auskommentiert wurde, sollte jetzt alles funktionieren und wir können endlich mit dem Validator des W3C und dem URL-Linter von Facebook testen, ob alles fehlerfrei arbeitet.

Die Gestaltung

Bleibt noch das Aussehen. Viele empfinden die Standard-Likebox ja als nicht besonders hypsch. Darum machen wir aus der Like-Box eine Fan-Box, wie bei Daddy-Design ausführlich beschrieben, und können dann das gesamte Layout in einer eigenen CSS-Datei gestalten. Obwohl es dort schon ganz groß steht, hier noch mal der Hinweis: Bei jeder Änderung der CSS-Datei muss die Zahl nach dem Fragezeichen am Ende der Zeile css="http://der-pfad-zu-deiner-fanbox-css-datei.css?1" erhöht werden, weil Facebook die Datei cached und die Änderung sonst nicht mitbekommt.

Wer selbst gern den im Facebook-Widget verwendeten CSS-Klassen nachspüren möchte, kann das mit Firefox und dem Plugin Firebug leicht verwirklichen.

Viel Spaß und viele Fans wünscht

Harald Effenberg

Zur HomepageImpressum / Disclaimer