Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup eBook

Statische Share-Buttons

Statische Share-Buttons

Statische Buttons für mehr Performance

Statische Share-Buttons haben viele Vorteile, allerdings nur sehr wenige Nachteile. Auf der Seite der Vorteile steht vor allem die allgemeine Performance, denn ein einfacher Link bremst absolut nicht aus, ein Script dagegen schon. Gerade der Facebook-Button wird oft nur verzögert geladen, bei Twitter ist dies zwar seltener der Fall, doch so richtig schnell ist dieser auch nicht. Nur Google+ lädt aktuell asynchron, daher kann hier unter Umständen auch der offizielle Button verwendet werden. Doch statisch ist immer besser, denn statisch verbraucht keine unnötigen Ressourcen und telefoniert nicht nach Haus. Gerade ein Zeiten, in denen der Datenschutz immer wichtiger wird, ist eine statische Lösung daher eine saubere. Die gibt es sogar mit Counter, sodass ihr nicht einmal auf die Anzeige der Anzahl an Share etc. verzichten müsst. Sucht euch einfach die Gewünschte Variante aus und fügt den Code einfach dort ein, wo die Share-Buttons erscheinen sollen.

Statische Share-Buttons als Text:

<b>Teilen auf...</b>
<a 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 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 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>

Beispiel:
Statische Share-Buttons als Text

Statische Share-Buttons mit farbigen Text:

<b>Teilen auf...</b>
<a style="color: #5DB5DE; font-weight: bold;" 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 style="color: #3D62B3; font-weight: bold;" 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 style="color: #D34836; font-weight: bold;" 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>

Beispiel:
Statische Share-Buttons mit farbigen Text

Statische Share Buttons mit CSS:

<a style="background: #5DB5DE; font-weight: bold; color: #fff; padding: 5px 15px 5px 15px;" 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 style="background: #3D62B3; font-weight: bold; color: #fff; padding: 5px 15px 5px 15px;" 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 style="background: #D34836; font-weight: bold; color: #fff; padding: 5px 15px 5px 15px;" 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>

Beispiel:
Statische Share Buttons mit CSS-Hintergrund

Statische Share Buttons mit CSS und Counter:

<div id="share"><a 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" style="background:#3D62B3;color:#FFF;padding:3px 10px 3px 10px;"><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 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" style="background:#5DB5DE;color:#FFF;padding:3px 10px 3px 10px;"><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 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" style="background:#D34836;color:#FFF;padding:3px 10px 3px 10px;"><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>

Beispiel:
Statische Share Buttons mit CSS-Hintergrund und Counter

Statische Share-Buttons mit Bild:

<a 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"><img style="width: 24px; height: 20px;" alt="Twittern" src="<?php bloginfo('template_url')?>/images/tweet.png" /></a>
<a title="Bei Facebook teilen" 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"><img style="width: 24px; height: 20px;" alt="Facebook Share" src="<?php bloginfo('template_url')?>/images/share.png" /></a>
<a style="width: 24px; height: 20px;" 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">/images/google.png" alt="Facebook Share" /></a>

Beispiel:
Statische Share-Buttons mit Bild

Nicht vergessen: Größe und Bilder müssen beim zweiten Code entsprechend geändert werden. Also hinterlegt an entsprechender Stelle passende Bilder.

Selten genutzte Buttons:

LinkedIn
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>LinkedIn</span></a>

Pinterest
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" target="blank" rel="nofollow"><span>Pinterest</span></a>
 
Reddit
<a href="http://reddit.com/submit?url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Reddit</span></a>

Schnell und benutzerfreundlich

Das gute an statischen Social-Buttons ist, wie bereits erwähnt, vor allem die Geschwindigkeit. Doch auch abseits der Performance bringen die Buttons Vorteile, denn sie sind auch wesentlich benutzerfreundlicher und lassen sich, da sie nur Bilder verwenden oder sogar nur aus ein wenig CSS bestehen, relativ frei an die eigene Website anpassen. So sind Designs möglich, die sich perfekt in das verwendete WordPress Theme integrieren und daher einen hübscheren Gesamteindruck hinterlassen. Letztendlich ist es aber wirklich nur die Performance, die ausschlaggebend dafür ist, dass wirklich jeder Blogger statische Buttons verwenden sollte. Da dies ganz einfach ist, stellt es auch keinerlei Ansprüche und kann selbst von Anfängern umgesetzt werden.



Wordpress Performance eBook