Performance erhöhen: Social-Buttons mit Zählung skriptfrei realisieren

Die Geschwindigkeit einer Website ist mitunter der wichtigste Faktor bei den Besuchern. Wenn eine Seite ewig lädt, haut der Nutzer ab. Gerade mobil ist das ein ziemliches Problem, da die Datenraten hier teils echt brutal schlecht sind. Da ist es gut, wenn man jeden Ballast entfernen kann, wie zum Beispiel die Social-Buttons zum Teilen von Inhalten. Hier kommt SharedCount zum Einsatz.

Wer kennt sie nicht, der Like-Button von Facebook, der Tweet-Button von Twitter und der +1-Button von Google+. Alle werden sie per JavaScript geladen und das kostet Zeit. Auch wenn diese Buttons klein sind, steckt da massig Code hinter. Die Darstellung, das Erkennen, ob jemand eingeloggt ist. Die Darstellung der Zählung von Likes, Tweets und +1ern. Und das eben alles 3 Mal. Das kann den Aufbau einer Seite schon böse verzögern. Hier auf dem Wishu-Blog waren es laut mehreren Messungen im Schnitt 0,8-1,3 Sekunden, die die Seite länger lud, als ich den ganzen Käse noch drin hatte. Klingt vielleicht auf den ersten Blick nicht viel, aber die Masse macht’s.

Auf Buttons zum Teilen der Inhalte zu verzichten, war natürlich keine Option. Auf die Darstellung der Anzahl wie oft geteilt wurde, wollte ich nicht verzichten. Denn erstens interessiert es mich (auch bei anderen Blogs) wie oft etwas geteilt wurde und zweitens wird eher geteilt, wenn eine Anzahl vorhanden ist und davon leben Blogs schließlich. Wenn nichts geteilt wird, wird auch nichts gelesen. Doch wie kommt man an die Anzahl der geteilten Inhalte?

Die Suche war an sich gar nicht so lang. Wenn man weiß, wonach man googlen muss, geht das schnell von der Hand. Und so stieß ich auf SharedCount, einen Dienst der eben genau das macht und nicht mehr. Er liest die »Shares« einer URL aus und bietet dafür eine API an, auf die man zugreifen kann.

Anmelden, API Key nutzen fertig. 50.000 Mal kann man das pro Account kostenlos machen – danach gibt es Zahlungsmodelle. Das sollte für die meisten durchaus ausreichen, wer mehr tägliche Leser hat, wird sicherlich auch 40$ im Monat dank der Werbeeinnahme übrig haben, um das nächste Modell zu bedienen, was 150.000 Überprüfungen zulässt.

Die Bedienung ist denkbar einfach. Die API-Dokumentation ist gerade mal gut 3 A4-Seiten lang und absolut selbsterklärend, wenn man ein wenig Ahnung von PHP hat. 2 Zeilen PHP und man hat die Daten. Diese beinhalten StumbleUpon, Reddit, Facebook, Delicious, Google+, Buzz (Das gibt es noch?), Twitter, Digg, Pinterest und LinkedIn. Alle davon haben eine eigene Schnittstelle, die man natürlich einzeln ansprechen kann, bei den 3 gängigen Netzwerken wären das aber 3 Requests, was die Ladezeit wieder erhöht. Also eine Abfrage und man hat alle Daten zusammen. Um in WordPress an die Daten zu kommen, braucht man zum Beispiel folgenden Code:

$url = get_permalink();
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXX");
$counts = json_decode($json, true);

Schon hat man die Daten. Angesprochen werden die jeweiligen Ziffern dann mit $counts["Twitter"] oder eben das jeweilige Pendant von anderen Diensten. Wie die jeweiligen Namen sind, könnt ihr einfach der API-Dokumentation entnehmen.
Und das war es dann auch schon. Hier mal ein Beispiel, wie das ganze hier im Blog aussieht:

echo '<ul id="shr-btns">';
echo '<li class="shr-fb-btn"><a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u='.$url.'" target="_blank">Auf Facebook teilen <span class="cnt">'.intval($counts["Facebook"]["total_count"]).'</span></a></li>';
echo '<li class="shr-twt-btn"><a target="_blank" href="https://twitter.com/intent/tweet?text='.$title.'&url='.$url.'&via=WishuKaiser" target="_blank">Auf Twitter teilen <span class="cnt">'.intval($counts["Twitter"]).'</span></a></li>';
echo '<li class="shr-gplus-btn"><a target="_blank" href="https://plus.google.com/share?url='.$url.'" target="_blank">Auf Google+ teilen <span class="cnt">'.intval($counts["GooglePlusOne"]).'</span></a></li>';
echo '</ul>';

Jetzt fehlt an sich nur noch das CSS, um die Buttons zu stylen, meiner Meinung nach der zweitgrößte Vorteil. Denn die offiziellen Social-Buttons fügen sich nun wirklich in kein Design ein. Hier seid bitte selbst kreativ und übernehmt nicht unbedingt meine Buttons. Kein Verbot, nur eine Bitte.

Mit dem entfernen der Social-Buttons und der Social-Widgets (Die Dinger, mit denen man eine Seite bei Facebook liked etc. Die jetzt bei mir diese großen Buttons rechts sind) und der nötigen Plugins dafür, konnte ich mal eben einen Geschwindigkeitszuwachs von gut 2,3-2,5 Sekunden erreichen. Manche Seiten laden noch nicht mal so lange… Wie dem auch sei, auch wenn mein Blog noch immer kein Geschwindigkeitswunder ist (Überrascht wenig, ist es doch seit 2008 dieselbe Installation), ist er weit schneller geworden und blockiert gerade mobil nicht mehr so stark.