Webdesign & Wordpress Programmierung

Dass der Twitter Button nicht W3C valide war, hat mich am meisten genervt an der ganzen Button Geschichte. Da geben wir uns von vorne bis hinten Mühe mit unseren Blogs, schrauben hier und dort und am Ende spuckt der W3C Validator Fehler aus, die gar nicht mehr so einfach zu bereinigen sind. Gerade was die Button Geschichten betrifft. Die werden uns als Plugins wie auch zum manuellen Einbau ja gerne zur Verfügung gestellt, doch an ein valides XHTML 1.0 ist da meist nicht mehr zu denken.

Ich bin zwar auch der Meinung, dass Webseiten bzw. ein Blog nicht unbedingt W3C valide sein müssen, denn ein Ranking Kriterium ist das nicht. Aber trotzdem müssen diese Fehler nicht sein.

So machte ich mich auf die Suche nach einer Möglichkeit, meinen Twitter Button W3C valide einzubinden. Ein bisschen hin und her kopiert, ausprobiert und siehe da, mit der iframe Lösung klappt es wunderbar. Dort meckert der W3C Validator auch nur den Teil allowtransparency="true" an und der kann auch ganz einfach rausgelöscht werden, den braucht es nicht wirklich.

Code Snippet zum Einbinden des Twitter Button via iframe

Via iframe kann man den Tweet Button ganz einfach W3C valide in die Website oder den WordPress Blog einbinden. Dazu einfach an der gewünschten Stelle (z.B. in der single.php des WordPress Themes) folgendes Code Snippet einfügen und entsprechend der eigenen Wünsche und Bedürfnisse anpassen:

<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=horizontal&via=officetrend&related=andereraccount" style="width:110px; height:20px;" frameborder="0" scrolling="no"></iframe>

Optisch sieht das Ergebnis dann so aus:

Einstellungsmöglichkeiten für den Twittern Button via iframe:

Hinter die URL und den Titel (text) können ganz einfach mit & (bitte denkt daran direkt hinter das & Zeichen noch amp; zu schreiben, damit der W3C Validator das nicht anmeckert) die unterschiedlichsten Einstellungen gehängt werden, so habe ich in meinem Code oben gewählt:

• &lang=de für den deutschen Tweet Button, also den Button mit dem deutschen Text “Twittern” (default Einstellung = en für englisch)
• &count=horizontal für die Position der Zählerbox. Hier kann zwischen none, horizontal und vertical gewählt werden (default Einstellung = horizontal)
• &via=officetrend, damit der Text “via @officetrend” im Tweet hinten angehängt wird. Hier wird einfach der eigene Benutzername eingesetzt. Wer nicht möchte, dass dieser Text hinten an den Tweet angehängt wird, lässt diese Einstellungsmöglichkeit einfach komplett weg.

Weiter gibt es noch die Möglichkeit neben dem eigenen Twitter Account einen anderen Account zum folgen vorzuschlagen, sobald der Tweet über diesen Button geteilt wurde. Im Normalfall wird hier der Account vorgeschlagen, der über die Einstellung via getätigt wurde, also in meinem Fall @officetrend. Nun kann ich noch einen zweiten Twitter Account vorschlagen, indem ich die Einstellung related nutze:

• &related=andereraccount für den Vorschlag meines zweiten Twitter Accounts @andereraccount. Dem ganzen kann noch ein individueller Text hinzugefügt werden, wie z.B. “Meine Twitter Accounts”, dann sieht diese Einstellung so aus:
  &related=andereraccount:Meine Twitter Accounts

Als letzte Einstellungsmöglichkeit gibt es noch die counturl, welche sich auf die URL bezieht, deren Tweets gezählt werden und deren Zahl in der Zählerbox erscheint. Hier bin ich ehrlich gesagt nicht so wirklich durchgestiegen durch die englische Anleitung von Twitter. Wie auch immer, es gibt ja die entsprechende default Einstellung und diese werde ich nicht mit einer individuellen Einstellung überschreiben.

Wer sich für die englische Anleitung von Twitter bezüglich des Tweet Buttons interessiert, dem sei dieser Link empfohlen.

Das war es zumindest schon mal mit den Einstellungsmöglichkeiten des Twittern Buttons. Am Ende des Codes von oben muss nun noch sicher gestellt werden, dass die richtige Größe für das iframe eingestellt wird (style="width:110px; height:20px;"). Diese Größe ist abhängig von der gewählten Art der Zählerbox. Ich habe horizontal gewählt, lasse also die Zählerbox neben dem Twittern Button anzeigen. Hier komme ich mit der Breite von 110px und der Höhe von 20px gut zurecht.

Wer nur den Tweet Button ohne Zählerbox anzeigt, sollte hier ein bisschen spielen, ich denke aber eine Breite von 65px und die Höhe von 20px müssten dabei passen. Für die vertikale Zählerbox ist eine Höhe von 62px notwendig und die Breite müsste hier mit 65px richtig gewählt sein. Ich selbst habe es nicht ausprobiert, also schlagt mich nicht, wenn ich mich hier um ein paar Pixel hin oder her verschätze. In dem entsprechenden Teil der englischen Anleitung von Twitter Dimensions of Tweet Button und Share Box, sind nämlich leider nur die Größenangaben für Englisch, Japanisch und Spanisch angegeben.

Twitter Button als statischer Link mit Bild einbinden

Update 17.12.2011: Aufgrund der aktuell vorherrschenden Unsicherheit bezüglich der Social Media Buttons und des Datenschutz habe ich mittlerweile meine Buttons als statische Links eingebunden. Die ausführliche Anleitung dazu gibt es hier: Facebook, Google Plus & Twitter Button mit statischem Link und Zähler einbinden