AddThis valide einbinden

Mittlerweile gibt es immer mehr soziale Netzwerke, wie Twitter, Facebook und neuerdings auch Google+. Daneben existieren natürlich unzählige weitere. Diese Netzwerke sind für Blogger besonders praktisch, vor allem wenn man seine Artikel schnell und effizient verbreiten möchte. Daher ist mittlerweile fast jeder Blog mit Social Buttons für diese Netzwerke ausgestattet, mit denen man die Links direkt und ohne Umweg teilen kann. Das erfolgt entweder durch einen einfachen Klick auf „Gefällt mir“, „Tweet this“ oder neuerdings eben auch „+1“ von Google (letzterer hat dabei direkte SEO Vorteile). Wem das Ganze aber nun im wahrsten Sinne des Wortes zu bunt und auch zu unübersichtlich wird, der kann sich mit Tools, wie AddThis behelfen. Darum soll es heute bei mir gehen, genauer gesagt um eine valide – also (X)HTML-konforme – Einbindung in eine Webseite.

Doch ganz kurz, was genau ist AddThis eigentlich? AddThis bietet nahezu alle Sozialen Netzwerke als Verbreitungsmöglichkeit an. Diese kann man entweder manuell festlegen oder sie werden automatisch vom jeweiligen Besucher erfasst. Wer zusätzlich einen AddThis-Account sein eigen nennt, kann seine geteilten Links außerdem statistisch erfassen und verfolgen. Alles in allem also eine praktische Sache. Letztlich muss man nur den von AddThis generierten Code einbauen oder gar das passende Plugin (z.B. für WordPress) benutzen. Dabei können auch direkt die original Buttons in den verschiedenen Designs genutzt werden, wie es auch bei mir aktuell zu sehen ist.

Social Buttons im Einsatz

Doch leider gibt es hier einen Haken, der Standardcode von AddThis ist nicht W3C konform, das heißt, er entspricht nicht den Kriterien für HTML & Co und ist somit nicht valide. Doch nach ein Paar Recherchen bin ich auf eine Lösung gestoßen:

Das grundsätzliche Problem liegt an Attributen, wie z.B addthis:url oder addthis:title, die die AddThis Buttons brauchen, um zu wissen, welche Artikel geteilt werden sollen oder wie der entsprechende Button auszusehen hat. Solche angepassten Attribute mag das W3C überhaupt nicht. Auf diese Attribute verzichten kann man allerdings auch nicht, da die Buttons dann gar nicht oder fehlerhaft funktionieren. Der Trick besteht nun darin JavaScript zu nutzen. Mit Hilfe von JavaScript kann man nämlich nachträglich die fehlenden Attribute nachladen. Dies wird über die ID der jeweiligen AddThis-Div-Box getan, nämlich über den JavaScript-Befehl document.getElementById und setAttribute. Leider funktioniert das nur über die ID und nicht über die Klasse eines solchen Elements. Aber was, wenn diese Elemente mehrfach vorkommen, z.B. für mehrere Artikel auf einer Seite? Wenn dann eine ID mehrfach vorkommt, werden plötzlich die Attribute für alle AddThis-Elemente nachgeladen, was zu einem fehlerhaften Verhalten der Buttons führt. Außerdem ist auch das nicht W3C konform, denn IDs müssen einmalig sein. An diesem Punkt kommt nun noch zusätzlich PHP zum Einsatz. Hier bietet sich die ID der einzelnen Artikel von WordPress an, die man über PHP abrufen und somit variable Element-IDs einimpfen kann. Das Ganze sieht dann zum Schluss so aus: (für WordPress, bei anderen CMS oder HTML-Seiten sind PHP-Anpassungen nötig)

<!– AddThis Button BEGIN –>
<div id=“shareDiv-<?php the_ID(); ?>„>
<a id=“shareFB-<?php the_ID(); ?>„></a>
<a id=“shareTwitter-<?php the_ID(); ?>„></a>
<a id=“sharePlusOne-<?php the_ID(); ?>„></a>
</div>
<script type=“text/javascript“>
var shareDiv = document.getElementById(„shareDiv-<?php the_ID(); ?>“);
shareDiv.setAttribute(„addthis:url“, „<?php the_permalink() ?>“);
shareDiv.setAttribute(„addthis:title“, „<?php bloginfo(’name‘); ?> – <?php the_title(); ?>“);
var shareFB = document.getElementById(„shareFB-<?php the_ID(); ?>“);
shareFB.setAttribute(„fb:like:layout“, „button_count“);
var sharePlusOne = document.getElementById(„sharePlusOne-<?php the_ID(); ?>“);
sharePlusOne.setAttribute(„g:plusone:size“, „medium“);
</script>
<script type=“text/javascript“>var addthis_config = {„data_track_clickback“:true,“data_track_addressbar“:true};</script>
<script type=“text/javascript“ src=“http://s7.addthis.com/js/250/addthis_widget.js#pubid=tiiunder“></script>
<!– AddThis Button END –>

Und somit ist auch dieser Code für den W3C Validator HTML-konform.

 

PG

Felix

 – Autor des Artikels

2 Reaktionen auf “AddThis valide einbinden

  1. […] +1 Buttons offiziell unterstützt. Wie man einen AddThis-Code HTML-konform einbindet, findet ihr auf meinem Blog heraus var shareDiv = document.getElementById("shareDiv-11146"); […]

  2. […] AddThis valide einbinden (2011) […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

:alien: :angel: :angry: :annoyed: :left: :right: :blush: :carefree: :cool: :cry: :devil: :laughdevil: :fools: :geek: :hay: :innocent: :laugh: :love: :shock: :offended: :sad: :sick: :unhappy: :silly: :smile: :speechless: :supershock: :-o :teasing: :wink: :zombie: :zzz: :-* xD :nomnomnom: :oh: :ghost: :teddy: :fussball: :ubuntu: :piratenpartei: