Share- & Like-Buttons selber hosten und designen

Die Share- und Like-Buttons von Google, Facebook, Xing, Twitter, Linkedin und all den anderen sozialen Netzwerken sind mit kleineren Hürden schnell auf der eigenen Webseite integriert. Was ist das Problem? – Die Buttons laden langsam, sind datenschutzrechtlich bedenklich, sehen alle unterschiedlich aus und passen – egal wie man es dreht und wendet – nicht so recht ins Design. Eine andere Lösung muss her!

Layout / Designprobleme

Zunächst einmal das Offensichtliche: Unstrittig ist, dass die Buttons (ob von Google, Facebook, Xing, Twitter, Linkedin oder wem sonst) nur mit einer begrenzten Anzahl an Layoutentwürfen daherkommen. Daher passen diese zumeist auch nicht oder nur begrenzt in das eigene Webdesign von 2015. Ein weiteres Design-Problem ist, dass die Anbieter sich nur begrenzt auf ähnliche Layouts einigen konnten. Ob Hintergrund mit oder ohne Verlauf, der Border-Radius oder elementare Dinge wie die pixelgenaue Höhe – deprimierend.

Ladehemmungen

Mithilfe der nativen Integration werden die Buttons mit mehreren Aufrufen von den Seiten des Anbieters geladen. Für Twitter, Facebook und Xing mit 19 Requests dauert dies ca. 1-2 Sekunden und bedeutet 19 Ressourcen, die geladen werden müssen. Das sind mehr Elemente als die gesamte Webseite bzw. ein einzelner Blogbeitrag in Summe hat.

Bei mäßigem Surfverhalten und ausgehend von der Tatsache, dass nicht jede Webseite Share-Icons anbietet, müssen zumeist DNS-Anfragen vorab getätigt werden. Das kostet zusätzlich Zeit. Da nicht jeder Dienst zu jeder Tageszeit gleichermaßen performant ist oder hin und wieder auch mal komplett hängt, legt man das Design der Seite – mit der Nutzung eines Share-Icons – in die Hand des jeweiligen Anbieters.

Datenschutzrechtlich bedenklich

Löblich und gesetzeskonform ist, wenn in Ihren Datenschutzbestimmungen die Integration der einzelnen Services erwähnt ist. Aber: Hand aufs Herz. Haben Sie diese Bestimmungen schon einmal gelesen und verstanden? Sind diese Bestimmungen aktuell und nach geltendem Recht?


Wenn Sie diese Frage mit einem klarem „Ja“ beantworten können: Chapeau!
Ansonsten geht es Ihnen ungefähr wie mir: obwohl ich mich mit der Thematik des Datenschutzes ausführlich beschäftige, kann ich nicht mit absoluter Sicherheit sagen, ob dem Landesrecht, dem deutschem Recht oder/und europäischem Recht damit genüge getan wird. Dispute mit den einzelnen Konzernen gibt es zur Genüge und eine besondere Affinität zum Datenschutz hat auch keiner dieser Konzerne, schließlich sind Daten deren Geschäftsgrundlage. De facto holt man sich eine oder mehrere Datenkraken auf die eigene Webseite.

Wir Webmaster legen in diesem Moment die Verantwortung in die Hand unserer Seitennutzer. Diese müssen proaktiv und vorab entsprechende Ressourcen blockieren, ohne zu wissen, dass diese auf unserer Seite sind. Die im Datenschutz geforderte informationelle Selbstbestimmung ist damit (ohne das nun weiter auszuführen) mehr Schein als Sein.

Die Lösung

Damit wir Webmaster auch wieder Herr der Daten werden, ist es erforderlich, dass die Daten (wie die Anzahl der Likes oder Shares) selbst erhoben werden. Hierhingehend stellen die verschiedenen Dienste APIs bereit, mit denen die Daten gesammelt werden können.

Jeder Anbieter hat zumeist einen Link, über den direkt die URL geteilt werden kann. Diese zwei Techniken bringe ich im Folgenden zusammen.

Zunächst haben ich dabei die Butttons mit einheitlichem Syntax erstellt und gestylt:

HTML-Chunk

<div class="share" style="padding-top:15px"> <span class="share_counter" style="display:none">Interaktionen - Vielen Dank!</span><br><br> <a href="https://www.facebook.com/sharer/sharer.php?u={url}" title="Teile den Beitrag {titel} mit Facebook" class="btn btn-default btn-facebook btn-share"><span class="flaticon-facebook"></span> <span class="text">like it</span></a> <a href="https://twitter.com/home?status={url}" title="Teile den Beitrag {titel} mit Twitter" class="margin-left btn btn-default btn-twitter btn-share"><span class="flaticon-twitter"></span>  <span class="text">tweet it</span></a> <a href="https://plus.google.com/share?url={url}" title="Teile den Beitrag {titel} mit Google +" class="margin-left btn btn-default btn-google btn-share"><span class="flaticon-google"></span>   <span class="text">give it +1</span></a> <a href="https://www.xing.com/spi/shares/new?url={url}" title="Teile den Beitrag {titel} mit XING" class="margin-left btn btn-default btn-xing btn-share"><span class="flaticon-xing"></span> <span class="text">share it</span></a> <a href="mailto:?&subject=Linkempfehlung&body;={url}" title="Teile den Beitrag {title} per E-Mail" class="margin-left btn btn-default btn-mail"><span class="glyphicon glyphicon-envelope"></span>   Weiterleiten</a></div>

CSS-Code

Da wir Bootstrap und Favicons von flaticon.com einsetzen, ist der Aufwand nur marginal

.btn-default {
    font-family: 'League Gothic', sans-serif;
    background: none;
    font-size: 24px;
    color: #333;
    border-color: #666;
    transition: all 0.3s ease;
}
.btn-default:hover {background: #333; color: #fff;}
.btn-default:focus {outline:0;}
.btn-xing:hover { color: #338383; border-color: #338383; background: none; }
.btn-xing { background: #338383; border-color: #338383; color: #fff; }
.btn-google:hover { color: #db4a39; border-color: #db4a39; background: none; }
.btn-google { background: #db4a39; border-color: #db4a39; color: #fff; }
.btn-twitter:hover { color: #00acee; border-color: #00acee; background: none; }
.btn-twitter { background: #00acee; border-color: #00acee; color: #fff; }
.btn-facebook:hover { color: #3b5998; border-color: #3b5998; background: none; }
.btn-facebook { background: #3b5998; border-color: #3b5998; color: #fff; }
.btn-mail:hover { color: #999; border-color: #999; background: none; }
.btn-mail { background: #999; border-color: #999; color: #fff; }

Javascript

Weiter wird ein wenig JavaScript benötigt, der zunächst die Button-Klicks in Popups aufruft:

    $('a.btn-share').on('click', function(event) {
        // Popup öffnen und Fokus setzen
         fenster = window.open($(this).attr('href'), "Beitrag Teilen", "width=650,height=450,resizable=yes");
         fenster.focus();
         // Normale Link-Click-Aktion unterbinden
        event.preventDefault();
    })

Likes und Shares Laden

Nun können die Likes und Shares asynchron geladen werden. Dies geschieht aus dem Grund, damit keine Probleme auftauchen, falls hier mal etwas hakt oder hängt. Das Script kann im Hintergrund arbeiten, ohne die Funktion im Frontend zu beeinträchtigen.

$.ajax({
data: "url="+window.location,
data : "url="+ encodeURIComponent('http://www.coding-pioneers.com/'), type : 'POST', dataType : 'json', success : function(data) { // Alle Interaktionen setzen und Sichtbarkeit ändern. if (data.all == 0) { $('.share .share_counter').text('Bisher gibt es keine Interaktionen mit dem Beitrag - Teile ihn doch!'); } else { $('.share .share_counter').prepend(data.all + ' '); }
$('.share .share_counter').fadeIn(); // Facebook Interaktionen if (data.facebook != 0) { $('.share .btn-facebook .text').text(data.facebook + (data.facebook == 1 ? ' like' : ' likes')); }
// Twitter Interaktionen if (data.twitter != 0) { $('.share .btn-twitter .text').text(data.twitter + (data.twitter == 1 ? ' tweet' : ' tweets')); }
// Google Interaktionen if (data.google != 0) { $('.share .btn-google .text').text(data.google); } // Xing Interaktionen if (data.xing != 0) { $('.share .btn-xing .text').text(data.xing + (data.xing == 1 ? ' share': ' shares')); } }, error : function(error, msg) { // TODO ggf. Error-Reporting } });

Im Hintergrund übergibt eine JSON-Datei Daten wie die folgenden:

{
  "all": 6,
  "facebook": 1,
  "google":4,
  "twitter": 1,
  "xing": 0,
  "url": "http://www.coding-pioneers.com/"
}


Im Hintergrund sitzt der PHP-Contoller für dieses JSON-Datei:

$url = "http://www.coding-pioneers.com/";
if(isset($_POST['url'])) 
    $url = $_POST['url'];
function twitter($url='') { $json_string = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.$url); $json=json_decode($json_string,true); if($json['count']) return intval($json['count']); return 0; }
function google($url='') { // CURL initiieren & Parameter Setzen $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,'https://clients6.google.com/rpc'); curl_setopt($ch,CURLOPT_POST,true); curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false); curl_setopt($ch,CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"'.rawurldecode($url).'","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true); curl_setopt($ch,CURLOPT_HTTPHEADER,array('Content-type: application/json')); // CURL Resultate in String schreiben und schließen $curl_results = curl_exec($ch); curl_close($ch);
// JSON Parsen $json = json_decode($curl_results,true);
// Rückgabe vorbereiten if($json[0]['result']['metadata']['globalCounts']['count']) return intval($json[0]['result']['metadata']['globalCounts']['count']);
return 0; }
function facebook($url='') { // Auslesen über Facebook Graph $source='http://graph.facebook.com/?id='.$url; $result=json_decode(file_get_contents($source));
// Rückgabe vorbereiten if($result->shares) return intval($result->shares);
return 0; }

function xing($url='') { // CURL initiieren & Parameter Setzen $ch = curl_init(); curl_setopt($ch,CURLOPT_URL, 'https://www.xing-share.com/spi/shares/statistics'); curl_setopt($ch,CURLOPT_POST, 1); curl_setopt($ch,CURLOPT_POSTFIELDS, 'url='.$url); curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
// CURL Resultate in String schreiben und schließen $curl_results = curl_exec($ch); curl_close($ch);
// JSON Parsen $json = json_decode($curl_results,true);
// Rückgabe vorbereiten if($json['share_counter']) return intval($json['share_counter']);
return 0; }
// Einzelne Interaktionen $interaktionen['twitter'] = twitter($url); $interaktionen['google'] = google($url); $interaktionen['facebook'] = facebook($url); $interaktionen['xing'] = xing($url);
// Summe der Interaktionen $interaktionen['all'] = array_sum($interaktionen);

Fazit

Die Share-Buttons werden deutlich schneller geladen, haben eine deutlich angenehmere Handhabung, passen nun auch ins Bild der Webseite und die Werte der Seite, die durch das Script gewonnen werden, können so auch intern gespeichert werden und sind schneller und vor allem einfacher auswertbar.

Links

Demo der Buttons

Projekt auf Github