Ja, auch die technischen Themen sollen nicht zu kurz kommen. Und da ich mich wegen des Relaunches von netscripter.de jetzt ohnehin damit beschäftigen musste, hier ein paar Tipps, wie man die Share-Buttons von Twitter, Facebook und Google so einbindet, dass sich die Seite am Ende von der W3C valide prüfen lässt.
Bei Twitter ist die Sache am einfachsten. Lässt man sich von Twitter automatisch einen Share-Button generieren, hat man reines HTML5. In meinem Fall sah der Code wie folgt aus:
<a href="http://twitter.com/share" data-count="horizontal" data-via="netscripter" data-lang="de">Twittern</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Ansich ist daran nichts auszusetzen, nur lässt xHTML keine eigenen Attribute wie „data-count“ und „data-via“ zu. Doch lassen sich diese einfach als Variablen an den Link anhängen:
<a href="http://twitter.com/share?via=netscripter&lang=de&count=horizontal">Twittern</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Schon macht der Code keine Probleme mehr.
Bei Google sieht es ähnlich aus, der Code wird primär HTML5 konform ausgegeben. Der Button ansich sogar mit eigenem Namensraum, der prinzipiell im Header des xHTML-Dokuments angegeben werden müsste. In meinem Fall sähe der Code dann wie folgt aus:
<!-- Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>
<!-- Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll -->
<g:plusone size="medium"></g:plusone>
Aber auch Google hat einen offiziellen Weg den Code xHTML konform einzubinden, und zwar so:
<!-- Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>
<!-- Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll -->
<div id="plusone-div"></div>
Allerdings wollte ich ja die spezielle Button-Größe „medium“, die man wieder über das Attribut size angeben müsste. Da xHTML dieses Attribut bei div-Tags jedoch nicht unterstützt muss man sich hierfür mit JavaScript behelfen:
<script type="text/javascript">
gapi.plusone.render('plusone-div',{"size": "medium", "count": "true"});
</script>
Somit ist der Code, selbst nach dem verarbeiten mit JS immer noch valide, weil die hinzugefügten Attribute direkt im Google-Skript gerendert werden. Ganz im Gegenteil dazu stehen die Methoden, die man bei Facebook nutzen muss, sodass zumindest die Ausgabe ohne JavaScript valide wird.
Der erste wichtige Teil bei Facebook sind die Meta-Daten für den Opengraph, die in meinem Fall so aussehen:
<meta property="og:title" content=" Hallo Welt! | netscripter" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://beta.netscripter.de/2011/07/hallo-welt/" />
<meta property="og:image" content="http://beta.netscripter.de/wp-content/themes/netscripter/image/og.jpg"/>
<meta property="og:site_name" content="netscripter.de" />
<meta property="fb:admins" content="{USER_ID}" />
Wichtig: Die {USER_ID} ist für jeden individuell und muss von Hand angepasst werden. Zwingend nötig ist der Wert nicht, kann aber für die Verwaltung der Statistiken genutzt werden. In Erfahrung bringt man die korrekten Werte direkt bei Facebook unter „Statistiken für deine Webseite“.
Die übrigen Parameter finden sich auf den Facebook Developer Seiten.
Außerdem müssen die Namensräume für den Opengraph und die Buttons eingebunden werden.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lang="de-DE" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
Problem an dieser Sache: Im reinen xHTML existiert das Attribut property nicht für den Tag meta. Dieses lässt sich auch nicht durch die Namensraum-Definition beeinflussen. Stattdessen muss der Doctype des Dokuments um das Resource Description Framework erweitert werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Bis hierhin ist alles was erzeugt wird auch nach dem Parsen des Browsers noch valide. Problem ist nun der Like-Button ansich. Der Facebook-Generator empfiehlt in meinem Fall folgenden Code:
<div id="fb-root"></div><script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script><fb:like href="{SITE_URL}" send="true" layout="button_count" width="250" height="30" show_faces="false" action="recommend" font="Ubuntu"></fb:like>
Wichtig: Auch hier muss died {SITE_URL} entsprechend angepasst werden. Bei WordPress ist sie Z.B, gleichbedeutend mit dem Permalink.
Doch schon allein dieser generiert einen iFrame und diese sind bei xHTML Strict nicht erlaubt. Um den Code nun wenigstens beim Parsen ohne JavaScript valide zu bekommen, muss man sich wiederum mit JavaScript behelfen und den Code einfach dadurch generieren lassen:
<div id="fb-root"></div>
<script type="text/javascript">
// embed Facebook components (avoids xhtml validation issues)
var c = document.getElementById('fb-root');
if (c != null) {
var e = document.createElement('fb:like');
e.setAttribute('site', '{SITE_URL}');
e.setAttribute('width', '250');
e.setAttribute('height', '30');
e.setAttribute('send', 'true');
e.setAttribute('layout', 'button_count');
e.setAttribute('show_faces', 'false');
e.setAttribute('action', 'recommend');
e.setAttribute('font', 'arial');
c.appendChild(e);
}
// End of additional feautures //
// FaceBook initialise
window.fbAsyncInit = function () { FB.init({ appId: '{APP_ID}', status: true, cookie: true, xfbml: true }); }; (function () { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js'; e.async = 1; document.getElementById('fb-root').appendChild(e); } ());
</script>
Danach dürfte der W3C-Validator keine Probleme mehr beim Code eines der drei Buttons melden.
Fazit
Größtenteils lassen sich die Share-Buttons Valide in ein xHTML-Dokument einbauen, jedoch unter Vorbehalt. Bei einigen geht der Komfort verloren, andere Lösungen sind nur für einen Parser ohne JavaScript valide. Erst mit der flächendeckenden Einführung von HTML5 wird man diesen Problemen hoffentlich Herr werden können.
Hat jemand noch andere Erfahrungen mit dieser Problematik gemacht oder kennt vielleicht bessere Lösungsansätze? Ich würde mich über Kommentare dazu freuen.