Monat: Mai 2010

Hier erhaltet ihr ein Update für unseren vorherigen Artikel „Facebook Markup Language in validem XHTML 1.1„. Nun gibt es eine wesentlich vereinfachte Technik. Außerdem wird nur noch eine JavaScript Datei benötigt.

Wir gehen wieder davon aus, dass ihr die Social-Plugins von Facebook schon erfolgreich eingerichtet habt. Weitere Informationen dazu findet ihr hier: Facebook Developers Soziale Plug-ins.

Da dies ein Update des vorherigen Artikels ist, bezieht sich diese Anleitung natürlich wieder auf die Social-Plugins die per FBML (Facebook Markup Language) eingebunden und mittels des JavaScript SDK gerendert werden.

Update

Es ist eine neue Version mit verbesserter Technik, geringerer Dateigröße und vereinfachter Integration verfügbar. Nutze diesen Artikel und somit die neue Technik: Facebook XFBML in validem XHTML 1.1 – Version 4.0.

Die neue Funktion

Wir binden die Social-Plugins innerhalb eines bestimmten HTML-Kommentares ein (dieses dient als Marker). Dazu wird wie gewohnt ein Script am Ende der Seite eingebunden welches diese Kommentare entfernt und somit die Social-Plugins sichtbar macht.

Mit dieser Technik benötigen wir nur noch eine 457 Byte große JavaScript Datei.

Weiterlesen

Um die Nutzung der Social Plugins von Facebook zu verbessern, kann man selber bestimmen, welches Bild Facebook als Miniaturbild nutzen soll. Dies geschieht über die Angabe von bestimmten Meta-Tags.

Diese sind nicht XHTML 1.1 valide. Dort kann aber nachgebessert werden, sodass der W3C-Validator nicht meckert.

Zusätzliche Meta-Angaben für Facebook, wie auf der Seite des Social Plugins „Like-Button“ zu sehen, zeigen Facebook beispielsweise welches Bild als Miniaturbild genutzt werden soll. Außerdem ist es möglich einen zusätzlichen Titel für die Seite anzugeben, den Facebook anstatt dem <title>-Tag nutzen soll.

Die folgenden, dort gezeigten Meta-Tags sind nicht XHTML valide.

<meta property="og:title" content="The title of your page" />
<meta property="og:site_name" content="The name of your web site" />
<meta property="og:image" content="The URL of the best picture for this page" />

Das Problem wird umgangen, indem wir diese Meta-Tags nur dann anzeigen lassen, wenn Facebook die Seite durchsucht. Dazu benötigen wir den Browser-Agent von Facebook.

Weiterlesen

Ihr habt Social-Plugins von Facebook, wie den Teilen, Gefällt mir, und Empfehlen Button, per FBML in eure Website eingebunden? Und nun stellt ihr fest, dass diese Elemente nicht XHTML 1.1 valide sind?

Wir haben diese ebenfalls eingebunden und dennoch ist unsere Website komplett XHTML 1.1 valide. Heute zeigen wir euch wie das funktioniert.

Update

Es ist eine neue Version mit verbesserter Technik, geringerer Dateigröße und vereinfachter Integration verfügbar. Nutze diesen Artikel und somit die neue Technik: Facebook XFBML in validem XHTML 1.1 – Version 4.0.

Da wir davon ausgehen, dass ihr die Social-Plugins von Facebook schon erfolgreich eingerichtet habt, gehen wir darauf nicht näher ein. Weitere Informationen dazu findet ihr hier: Facebook Developers Soziale Plug-ins.

Zunächst sei gesagt, diese Anleitung zur Validierung bezieht sich auf die Social-Plugins die per FBML (Facebook Markup Language) eingebunden und mittels des JavaScript SDK gerendert werden.

Zum Verständnis was verändert wird

Wir binden jedes Social-Plugin in ein HTML-Element (z.B. ein <p>) ein. Dieses HTML Element wird mit dem CSS-Befehl display:none; gekennzeichnet, damit es nicht angezeigt wird. Das darin befindliche Social-Plugin wird auskommentiert, wodurch nichts mehr angezeigt und somit vom W3C-Validator auch nichts mehr bemängelt wird.

Da unsere Plugins sowieso nur bei aktiviertem JavaScript funktionieren (per JavaScript SDK gerendert), nutzen wir nun JavaScript zum Entfernen des Kommentares und des CSS-Befehles display:none;.

Somit wird der Button nachträgich sichtbar und vom JavaScript SDK gerendert. Das Ergebnis bleibt gleich, nur ohne meckeren des W3C-Validators.

Weiterlesen