Logo des Nachrichtendienstes Twitter (Bild: Twitter)
Logo des Nachrichtendienstes Twitter (Bild: Twitter)

Sharebuttons von Twitter, FB und Google xHTML-Konform einbinden

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.

Twitter

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&amp;lang=de&amp;count=horizontal">Twittern</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Schon macht der Code keine Probleme mehr.

Google

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.

Facebook

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.

Über den Autor

Fernseh- & Internetnerd, Newsjunkie und nebenberuflicher Twitterer. Immer fasziniert von dem, was mit den Medien möglich ist - und enttäuscht davon, was sie dann tatsächlich tun. Frank Krause schreibt über die Licht- und Schattenseiten eines Business, das ihn seit seiner Jugend unendlich fasziniert.

7 Kommentare

  • Gibt es in der Zwischenzeit eine Möglickeit Facebook Buttons HTML5 konform einzubinden?

  • Tatsächlich gibt es die. Beim offiziellen Generator ist mittlerweile unter „Get Code“ die Option für HTML5-Code hinzugekommen.

  • Chrigi

    Hallo …

    Danke für die Erläuterungen, wie man die Button einbinden kann. Leider stolpere ich irgendwie über Facebook. Bei mir wird der Button von Facebook nicht angezeigt.

    gehe ich über den offiziellen Generator von Facebook, füge dies ein, habe ich Schwierigkeiten, dies zu Formatieren. Scheint so, als ob ich irgendetwas nicht kapiere. 🙁

  • Birgit

    Hallo,
    ich habe den Code auch so valide bekommen:

    <!–

    Mein Problem ist nur, der Abstand in der Höhe, denn hier werden wohl offensichtlich von dem iframe 800px in der Höhe vorgegeben und ich schaffe es nicht, diese höhe zu verringern. Höhe soll bei mir nur 20px sein, da sonst ein ganz großer Leerraum kommt.

    Wer kann mir da weiterhelfen?

  • Um welchen Code geht es denn? 800px ist hier eigentlich nirgendwo vorgegeben, wie du hier auf der Seite siehst.

    Manchmal muss man etwas mit dem z-index oder dem overflow spielen, weil ja, z.B. beim Facebook-Button noch ein Teilen-Dialog ausklappt. Das kommt aber auf die umgebenden Style-Definitionen an. Hast du einen Link?

  • Hallo, würde gerne wissen ob ich die Buttons auch irgendwie OHNE Javascript einbauen kann.

  • Hey Blasko,

    das geht. Für Twitter und Facebook sähe es ungefähr so aus.

    Twitter:
    <a href="https://twitter.com/share?url=http://www.deinlink.de/">Tweet</a>

    Facebook:
    <a href="https://www.facebook.com/sharer.php?u=http://www.deinlink.de/">Facebook</a>

Kommentar hinterlassen

Pflichtfelder sind mit * gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.

Datenschutzhinweis: Die Kommentarangaben werden an Auttomatic, USA (die Wordpress-Entwickler) zur Spamprüfung übermittelt und die E-Mailadresse an den Dienst Gravatar (Ebenfalls von Auttomatic), um zu prüfen, ob die Kommentatoren dort ein Profilbild hinterlegt haben. Zu Details hierzu sowie generell zur Verarbeitung Deiner Daten und Widerrufsmöglichkeiten, verweise ich Dich auf meine Datenschutzerklärung. Du kannst gerne Pseudonyme und anonyme Angaben hinterlassen.