Post navigation

Performance: Statische High-Speed Share-Buttons ohne Plugin erstellen

WordPress · · Keine Kommentare

High-Speed WordPress Websites brauchen auch High-Speed Share-Buttons. Hier kommt die Lösung für statische Buttons inklusive eines Druck-Buttons, natürlich ohne den Einsatz eines Plugins.

Der Code für die statischen Share-Buttons

  • WordPress Version: inkl. 4.5.3
  • PHP-Version: inkl. PHP 7

Statische Share-Buttons haben viele Vorteile gegenüber ihren „normalen“ Kollegen. Sie laden rasant schnell, denn es wird vollkommen auf Geschwindigkeitsverminderndes JavaScript verzichtet. Gut aussehen können solche Buttons natürlich auch.

Trotzdem haben sie einen Nachteil: sie zählen die Shares nicht. Das heißt natürlich nicht, dass Du nicht mehr erfahren kannst, wie oft und mittels welchem Sozialen Netzwerk der Beitrag geteilt wird. Du siehst es nur halt auf den ersten Blick nicht mehr. Doch Google Analytics und andere Dienste machen Dich in dieser Hinsicht schlau.

Google Analytics lässt Dich auch die Shares über Twitter sehen, die meisten Share-Buttons können diese nicht mehr anzeigen, da Twitter seine API geändert hat.

Konventionelle Teilen-Buttons sind zu langsam

Für die Suchmaschine Google hingegen wird die Ladezeit einer Website immer wichtiger, daher ist es empfehlenswert, an jeder Schraube etwas zu „drehen“, um den Speed zu finden.

Um die Share-Buttons einzusetzen empfiehlt es sich, ein Child-Theme zu nutzen, da die Funktion statisch in einer Theme-Datei aufgerufen wird.

Die Funktion für die functions.php

Du bekommst jeweils einen Button für Facebook, Twitter, Google+, Deine Facebook-Seite und einen Print-Button, der die Druckansicht Deines Browsers aufruft.

<?php

// Ab hier kopieren
/**
* Statische Teilen Buttons mit Druck-Button
*
*/
function tb_share_buttons() {
?>
<div class="share-container">
<div class="share-buttons">
<a class="facebook social-tooltip" 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>Teilen</span></a>
<a class="twitter social-tooltip" 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>Twittern</span></a>
<a class="googleplus social-tooltip" 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>
<a class="fb-like social-tooltip" href="https://www.facebook.com/TechBrain-552504691587032" target="_blank" rel="nofollow" title="Meine Facebook-Seite Liken"><span>Like</span></a>
<a class="druck social-tooltip" href="javascript:window.print()" title="Beitrag ausdrucken">Drucken</a>
</div>
</div>
<?php }

In Zeile 15 des Code-Snippets musst Du noch die URL zu Deiner Facebook-Seite anpassen.

Das CSS für die Buttons

Solltest Du den beliebten Icon-Font »Fontawesome« verwenden, dann bekommst Du mit diesem CSS vor jeder Beschriftung noch die passenden Icons.

Anpassungen: In Zeile 6 und Zeile 8 musst Du Deine Content-Breite angeben »max-width: 720px;« steht bei mir. In Zeile 10 muss die Breite der einzelnen Buttons angepasst werden. Bei mir steht dort »width: 135px;«.

/* =============================================================================
 STATISCHE SHARE-BUTTONS
============================================================================= */

div.share-buttons.top {margin-top: 0 !important; max-width: 720px; margin-bottom: 15px }
div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee}
.share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5;  max-width: 720px; display: inline-block; overflow: hidden}
.share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.druck, .share-buttons a.fb-like { display: block; width: 135px;  font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;}
.share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important}
.share-buttons a.facebook { background: #3e64ad; }
.share-buttons a.twitter { background: rgb(0, 172, 237); }
.share-buttons a.googleplus { background: #cd3627; }
.share-buttons a.fb-like {background: #4267b2}
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; }
.share-buttons a.druck { margin-right: 0;}
a.druck{background:#13475e;}
a.druck:before{content:'\f02f';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.facebook:before{content:'\f09a';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.twitter:before{content:'\f099';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.googleplus:before{content:'\f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px}
a.fb-like:before{content:'\f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Der Aufruf der Funktion im Theme

Mit einem einfachen PHP-Tag wird die Funktion der Buttons im Theme aufgerufen. Ich habe die Buttons in der single.php unterhalb von the_content() platziert. Siehe Screenshot.

<?php echo tb_share_buttons(); // Die statischen Share-Buttons ?>
Der Aufruf der Buttons in der Theme-Datei.

Der Aufruf der Buttons in der Theme-Datei.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler, freier Journalist und Autor. Er schreibt für ein bekanntes deutsches Webdesign Magazin und ist nebenbei Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

Schreibe einen Kommentar

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