Eine Webseite kann in der heutigen Zeit gar nicht schnell genug sein. Besonders im Hinblick darauf, dass die Ladegeschwindigkeit mittlerweile ein Rankingfaktor für Google darstellt, ist die Optimierung der Performance eine wichtige Aufgabe. Performance-Bremsen gibt es einige. Eine der größeren Art sind oftmals die beliebten “Teilen-Buttons” der großen sozialen Netzwerke. Diese laden meistens nicht unerhebliche Mengen JavaScript von ihren heimatlichen Servern nach und blähen eine Webseite damit unnötig auf. Häufiger als es uns lieb sein kann, kommt es dazu, dass die Buttons “hängen”, weil der benötigte Code nicht schnell genug vom Server nachgeladen werden kann. Das kann den Seitenaufbau der eigenen Webseite sehr verzögern. Doch es geht auch anders. In diesem Artikel zeigen wir Ihnen, wie sie die Buttons für die wichtigsten sozialen Netzwerke als statische Elemente ganz ohne den Einsatz von JavaScript realisieren und in Ihre WordPress-Website einbinden können.
Statische Share-Buttons in zwei Varianten
Wir stellen Ihnen die Buttons heute in zwei Varianten vor, einmal ohne und einmal mit Zähler. Des Weiteren zeigen wir Ihnen, wie man die Buttons am geschicktesten in das eigene WordPress-Theme einfügt. Hierfür erstellen wir eine WordPress-Funktion, die in die functions.php des betreffenden WordPress-Themes eingefügt wird. So können Sie die Buttons mit einem einfachen kleinen PHP-Tag an jeder gewünschten Stelle des Themes anzeigen lassen.
Das nötige CSS
Bitte fügen Sie das für die Buttons nötige CSS zu der style.css Datei Ihres Themes hinzu (wp-content/themes/ihr theme).
1 2 3 4 5 6 7 8 9 | .share-buttons { border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin: 10px 0; padding: 20px 0; position: relative; line-height: 1;} .share-buttons a { text-decoration: none; margin-right: 20px; border-radius: 3px; text-align: center; color: #fff; padding: 5px 15px 5px 15px;} .share-buttons a:hover { text-decoration: none; } .share-buttons a.twitter {background: #5DB5DE;} .share-buttons a.facebook {background: #3D62B3;} .share-buttons a.googleplus {background: #D34836;} .share-buttons a.googleplus:hover {background: #f75b44} .share-buttons a.facebook:hover {background: #4273c8} .share-buttons a.twitter:hover {background: #32bbf5} |
Der benötigte Code für die Zähler
Um die Theme-Dateien sauber und übersichtlich zu halten, benötigen wir 2 einfache PHP-Funktionen, die mit einem Einzeiler an PHP-Code im Anschluss an die gewünschte Stelle im Theme eingebracht werden können.
Öffnen Sie die functions.php Ihres WordPress-Themes und fügen Sie den folgenden Code am Ende der Datei ein:
1 2 3 4 5 6 7 8 9 10 11 12 | /** * Statische Teilen Buttons ohne Zähler * */ function ah_share_buttons() { ?> <div class="share-buttons"> <a class="twitter" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter</span></a> <a class="facebook" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook</span></a> <a class="googleplus" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a> </div> <?php } |
1 2 3 4 5 6 7 8 9 10 11 12 | /** * Statische Teilen Buttons mit Zähler * */ function ah_share_buttons_zaehler() { ?> <div class="share-buttons"> <a class="facebook" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook <?php $URL = get_permalink();function get_shares($URL) { $json_string = file_get_contents('http://graph.facebook.com/?ids=' . $URL); $json = json_decode($json_string, true); return intval( $json[$URL]['shares'] );} ?><?php echo get_shares($URL); ?></span></a> <a class="twitter" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> ➨ <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter <?php $URL = get_permalink();function get_retweets($URL) { $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL); $SBarray = json_decode($SBstring, true); return intval( $SBarray['count'] );} ?><?php echo get_retweets($URL);?></span></a> <a class="googleplus" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+ <?php $URL = get_permalink();function get_plusone($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc"); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json')); $curl_results = curl_exec ($curl); curl_close ($curl); $json = json_decode($curl_results, true); return intval( $json[0]['result']['metadata']['globalCounts']['count'] );} ?><?php echo get_plusone($URL); ?></span></a> </div> <?php } |
Das Ergebnis: So sehen die statischen Share-Buttons aus
Die Buttons ohne Zähler
Die Buttons mit Zähler
Der Code mit der oben angegebenen CSS-Formatierung schafft schöne, auffällige Buttons, die rasant laden und bestens Ihren Job erledigen. Im Gegensatz zu den Original-Buttons werden Sie nicht mehr so leicht übersehen und daher vermutlich öfter genutzt, als es bei den Original-Buttons der Fall ist. Natürlich kann die Optik ganz leicht angepasst werden. Wenn man das Design der originalen Share-Buttons der sozialen Netzwerke vorzieht, können hier (anzufertigende oder zu besorgende) Grafiken der Buttons hinterlegt werden, so dass sich zu den offiziellen Buttons kein visueller Unterschied ergibt. Allerdings funktioniert das nur mit den Buttons ohne Zähler.
Sicherlich kann man die CSS-Formatierung auch weglassen und die Buttons als reinen Textlink nutzen, jedoch bringt man sich dann um den Vorteil der visuellen Auffälligkeit. Nur das, was der Leser sieht, kann er anklicken.
Der Einsatz im WordPress-Theme
Zu guter Letzt müssen die Teilen-Buttons noch in das eigene WordPress-Theme an die gewünschte Stelle eingefügt werden. Dazu erstellen wir 2 kleine PHP-Tags, wovon der gewünschte im Anschluss nur noch an die passende Stelle kopiert werden muss.
Es existieren weitere, optimalere Wege, die Buttons in das Theme zu integrieren, so dass die Änderungen auch nach einem Theme-Update erhalten bleiben. Der eine Weg wäre das Schreiben eines Plugins, der andere Weg die Erstellung eines Child-Themes. Beides genauer zu beleuchten würde allerdings diesen Artikel sprengen, daher stelle ich nur die Integration mit PHP-Tag direkt im Theme vor. Die Vorgehensweise bei einem Child-Theme wäre identisch, nur müsste es halt erst einmal das Child-Theme geben.
Integration mittels PHP-Tag
Öffnen Sie die single.php Ihres WordPress-Themes und suchen sie folgende Stelle:
Fügen Sie nun unter- oder oberhalb der markierten Stelle folgenden Tag für die Anzeige der Buttons ohne Zähler ein:
1 | <?php echo ah_share_buttons(); ?> |
Für die Anzeige der Share-Buttons mit Zähler benötigen Sie folgenden PHP-Tag:
1 | <?php echo ah_share_buttons_zaehler(); ?> |
Oberhalb von the_content() werden die Buttons oberhalb des Inhalts angezeigt, unter dem Content-Tag erfolgt die Anzeige unterhalb des Inhalts. Nicht immer befindet sich in der single.php auch direkt der the_content()-Aufruf. Es kann in Ihrem Theme durchaus möglich sein, dass noch eine andere Datei in die single.php geladen wird und sich in dieser dann the_content() befindet.
Links zum Beitrag
Fazit
Die statischen Buttons sind auffällig, ansprechend gestaltet und funktionieren hervorragend. Die Ladegeschwindigkeit Ihrer Webseite wird es Ihnen danken, da mit Einsatz dieser Buttons wieder einiges an bremsendem JavaScript eingespart wurde. Der Unterschied lässt sich mit einem Speed-Test-Tool wie den Pingdom-Tools messen, wenn Sie nicht vorher noch weitere nennenswerte Hemmnisse aus der Welt zu schaffen haben.
(dpe)
