Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress und Social Media: Statische Teilen-Buttons sorgen für mehr Geschwindigkeit

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.

Anzeige

Statische Share-Buttons für mehr Performance

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).

.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.

Statische Share-Buttons
Öffnen Sie die functions.php Ihres WordPress-Themes und fügen Sie den folgenden Code am Ende der Datei ein:

Anzeige
/**
* 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&amp;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)); ?>&amp;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&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a>
</div>
<?php }
/**
* 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)); ?>&amp;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&amp;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&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;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 statischen Share-Buttons ohne Zähler

Die Buttons mit Zähler
Statische Share-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:

Die Stelle zum Einfügen des Share-Button Codes in der single.php
Fügen Sie nun unter- oder oberhalb der markierten Stelle folgenden Tag für die Anzeige der Buttons ohne Zähler ein:

<?php echo ah_share_buttons(); ?>

Für die Anzeige der Share-Buttons mit Zähler benötigen Sie folgenden PHP-Tag:

<?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.

16 Kommentare zu “WordPress und Social Media: Statische Teilen-Buttons sorgen für mehr Geschwindigkeit”

@ati: Wie wäre es mit lesen, verstehen, kopieren? So schwer ist es nun wirklich nicht den Code in ein HTML-Dokument einzubinden.

@Ed: Wer lesen kann, ist einfach im Vorteil. Habe mir den Code raus kopiert in einen Editor und siehe da – alle Fragen beantwortet! Danke für den Hinweis! 😉

Hallo!
Bei mir funktionierte das Zählen der Google+ Shares nicht korrekt, weil es ein SSL-Problem gab (in XAMPP – daher möglicherweise nur ein lokales Problem).
Hier kann das Einfügen der folgenden CURL-Option in der Funktion “get_plusone()” helfen:
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
Damit wird die Prüfung des Zertifikats ausgestellt. So ist die Verschlüsselung der Verbindung zwar nich sicher. In angebtracht der Art des Abrufs ein zu vernachlässigendes Risiko.
Viele Grüße
Daniel

Hallo Herr Hecht, würde sehr gerne das oben beschriebene Script (statische teilen buttons mit Zähler) bei mir im Blog einbauen. Leider bin ich noch ein ziemlicher Newbie was WordPress und vorallem auch PHP angeht. Wenn ich das PhP Script in die functions.php einbaue und per echo dann aufrufe, kommt bei mir folgende Fehlermeldung:
Fatal error: Cannot redeclare get_shares() (previously declared in ……blog-simone-bauer/wp-content/themes/waipouachildtheme/functions.php:72) in ……blog-simone-bauer/wp-content/themes/waipouachildtheme/functions.php on line 72
Wie gesagt ich bin ein absoluter Neuling, vielleicht können Sie mir da weiterhelfen oder einen Tipp geben! Danke schonmal! Lg

Sorry dass ich mich jetzt nochmal melde, wenn ich den echo Befehl in der single.php einbaue, gibt es keine Fehlermeldung mehr. Ich möchte die Buttons mit Zähler aber auch auf der Startseite und den Kategorieseiten (also überall) haben und sobald ich das echo woanders als in single einbaue, bringt er mir die Fehlermeldung siehe oben! Bräuchte echt dringend Hilfe! Danke! Lg

Hallo,
schöne Buttons sind das!
Ich habe mir den echo Aufruf der Funktion als Shortcode implementiert.
Leider erscheinen die Buttons dann am oberen Teil der Seite (in der div class=”entry-content”) anstatt an der gewünschten Stelle (auf den meisten Seiten am Ende).
Wie lässt sich dieses Problem umgehen?
Grüße
Manuel

Okay, habe es mit Bufferauslesung hinbekommen:
function _share_buttons_static() {
ob_start();
?>
Facebook
Twitter
<?php
return ob_get_clean();
}
function _show_static_share_buttons($atts)
{
return _share_buttons_static();
}
add_shortcode('show_static_share_buttons', '_show_static_share_buttons');

Dass sind echt schöne Buttons – simple und schlicht gemacht, aber ich hätte da trotzdem einpaar Fragen zu diesem Code-Snipsel.
Ist dieser Code dass man im functions.php einfügen kann eine Passive-Code oder sammelt es auch Daten von Nutzern wie die original Share-Buttons von Facebook, Twitter und Google+?
Genauer gesagt die IP-Adresse und Cookies sowie die lästige Angewohnheit bei jedem Aufruf der eigenen Seite bzw. Blog an das jeweilige soziale Netzwerk zu übertragen wird oder ist es wirklich eine Passive-Code und wie gesagt KEINE Datensammelt und an Google, Facebook und Twitter übertragen wird?
Dass Thema würde mich brennend interessieren, auch wegen der Datenschutz.
Dass wäre wirklich sehr nett 🙂
Vielen Dank!

Schreibe einen Kommentar

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