Statische Buttons für mehr Performance
Statisch ist fast immer besser, denn statisch verbraucht keine unnötigen Ressourcen und telefoniert nicht nach Haus. Gerade in 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">Twitter</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">Facebook</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">Google+</a>Code-Sprache: HTML, XML (xml)Beispiel:
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">Twitter</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">Facebook</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">Google+</a>Code-Sprache: HTML, XML (xml)Beispiel:
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">Twitter</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">Facebook</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">Google+</a>Code-Sprache: HTML, XML (xml)Beispiel:
Statische Share Buttons mit CSS und Counter:
<div id="share"><a style="background: #3D62B3; color: #fff; padding: 3px 10px 3px 10px;" 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">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); ?--></a> <a style="background: #5DB5DE; color: #fff; padding: 3px 10px 3px 10px;" 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">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);?--></a> <a style="background: #D34836; color: #fff; padding: 3px 10px 3px 10px;" 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">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); ?--></a></div>Code-Sprache: HTML, XML (xml)Beispiel:
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.
