tas2580
Blog über Webentwicklung und Linux Server

1 Klick Social Media Buttons mit Datenschutz

tas2580  

Social Media Buttons findet man heute auf beinahe jeder Webseite, oft werden dazu einfach die von den Plattformen angebotenen Codes eingebunden. Das ist zwar eine sehr einfache Lösung, dient aber nicht gerade dem Datenschutz da bei jedem Aufruf Daten über den Besucher an die sozialen Netzwerke gesendet werden. Wenn man eine Seite die diese Buttons eingebunden hat aufruft während man im Sozialen Netzwerk angemeldet ist kann das Soziale Netzwerk zuordnen welche Seiten man im Internet anschaut. Auch wenn man nicht angemeldet ist werden Daten wie die IP-Adresse oder der verwendete Browser an das Soziale Netzwerk übertragen. Um das zu verhindern kann man als Benutzer diese Buttons mit einem Adblocker blocken, oder das Browser-Addon Disconnect (für Chrome, für Firefox) installieren.


Als Webseiten Betreiber hat man mehrere Möglichkeiten um seine Benutzer vor der Ausspähung durch Soziale Netzwerke zu schützen. Die Einfachste Möglichkeit ist natürlich solche Buttons gar nicht zu verwenden, das ist aber nicht unbedingt eine zufriedenstellende Lösung. Heise bietet eine 2 Klick Lösung an. Dabei muss der Besucher mit einem Klick den Button freischalten und kann dann mit einem zweiten Klick den Inhalt teilen. Eine andere Möglichkeit wäre einfach nur die API URL zum teilen zu verlinken, das hat aber den Nachteil das im Button nicht angezeigt wird wie oft die Seite schon geteilt wurde.

Ich habe nach einer Lösung gesucht mit der man sowohl sieht wie oft die Seite schon geteilt wurde als auch den Datenschutz beachtet, diese Lösung will ich jetzt hier vorstellen.

Vorteile:

  • Es werden keine Benutzerdaten weitergegeben
  • Anzahl der Likes/Shares wird im Button angezeigt
  • Es ist nur ein Klick zum teilen nötig
  • Es wird kein JQuery oder ähnliches benötigt

Als erstes braucht man ein PHP Script das die Anzahl der Likes/Shares von den Sozialen Netzwerken ausliest. In dem Script muss oben die URL der Seite angegeben werden. Netzwerke die man nicht benötigt sollte man auskommentieren damit keine unnötigen Abfragen gemacht werden und das Bild schneller ausgeliefert wird.

<?php
$url 
'https://tas2580.net/';
$back_img imagecreatefrompng('social-sprites.png');
$text_color imagecolorallocate($back_img255255255);
imagestring($back_img4408, (int) get_tweets($url), $text_color);
imagestring($back_img44040, (int) get_facebook($url), $text_color);
imagestring($back_img44072, (int) get_linkedin($url), $text_color);
imagestring($back_img440104, (int) get_googleplus($url), $text_color);
header('Cache-Control: public, max-age=300, s-maxage=300');
header('Expires: 'gmdate('D, d M Y H:i:s \G\M\T'time() + 300));
header('Content-Type: image/png');
imagepng($back_img);
die;
function 
get_googleplus($url)
{
    if(
$data = @file_get_contents("https://plusone.google.com/_/+1/fastbutton?url=" $url))
    {
        
preg_match('#<div id="aggregateCount" class="Oy">([0-9]+)</div>#s'$data$matches);
        return 
$matches[1];
    }
}
function 
get_facebook($url)
{
    if(
$pageinfo json_decode(@file_get_contents("https://graph.facebook.com/" $url), true))
    {
        return 
$pageinfo['shares'];
    }
}
function 
get_tweets($url)
{
    if(
$pageinfo json_decode(@file_get_contents("https://cdn.api.twitter.com/1/urls/count.json?url=" $url), true))
    {
        return 
$pageinfo['count'];
    }
}
function 
get_linkedin($url)
{
    if(
$pageinfo json_decode(@file_get_contents('http://www.linkedin.com/countserv/count/share?url=' $url '&format=json'), true))
    {
        return 
$pageinfo['count'];
    }
}

Das Script muss unter image.php abgespeichert werden. Zusätzlich zu dem Script wird noch das Hintergrundbild benötigt.

Social Sprites

Das Bild muss im selben Ordner wie das PHP Script liegen. Wenn man das PHP Script jetzt aufruft sollten die Buttons mit der Anzahl der Shares/Likes angezeigt werden.

Jetzt wird noch ein bisschen CSS benötigt. Um nicht für jeden Button einen extra Request zu machen werden die Buttons per CSS Sprites eingebunden. Sollte das Stylesheet nicht im selben Ordner wie die PHP Datei die das Bild erzeugt liegen muss der Pfad angepasst werden.

a.facebook, a.google-plus, a.twitter, a.linkedin{background: url('image.php') no-repeat;display:inline-block;width:119px;height:32px;text-decoration:none;}
a.twitter{background-position: 0px 0px;}
a.facebook{background-position: 0px -32px;}
a.linkedin {background-position: 0px -64px;}
a.google-plus{background-position: 0px -96px;}

Nun kann man die Buttons an beliebiger Stelle in seinen HTML Code einbinden. Durch das JavaScript wird zum teilen ein Popup geöffnet. Wenn man komplett ohne JavaScript auskommen möchte kann man auch einfach direkt verlinken.

<script>
function open_socialmedia(url){window.open(url,'','width=500, height=600');return false;}
</script>
<a href="#" onclick="return open_socialmedia('https://www.facebook.com/sharer/sharer.php?u=[URL]');" title="Auf Facebook teilen" class="facebook"> </a>
<a href="#" onclick="return open_socialmedia('https://twitter.com/intent/tweet?text=[TEXT]&amp;url=[URL]');" title="Auf Twitter teilen" class="twitter"> </a>
<a href="#" onclick="return open_socialmedia('https://plus.google.com/share?url=[URL]&amp;title=[TEXT]');" title="Auf Google+ teilen" class="google-plus"> </a>
<a href="#" onclick="return open_socialmedia('http://www.linkedin.com/shareArticle?mini=true&amp;url=[URL]&amp;title=[TEXT]');" title="Auf Linkedin teilen" class="linkedin"> </a>

Hier muss [URL] mit der URL die geteilt werden soll und [TEXT] mit dem dazugehörigen Text ausgetauscht werden. Wenn man seine Seiten nicht per PHP generiert kann man auch mit window.location.href die aktuelle URL per JavaScript ausgeben lassen.

Das wars schon, die Buttons haben jetzt alle Funktionen die man bei den Original Buttons auch hat, allerdings werden keine Daten der Besucher zum Sozialen Netzwerk gesendet da die Anfragen dort immer vom Webserver gemacht werden. Das Soziale Netzwerk sieht den Besucher erst wenn er auf einen Button klickt.
Um die Performance zu steigern könnte man das generieren des Bildes cachen und nur alle Stunde neu erstellen.


Update: 06.12.2014
Ich habe daraus mal Plugins für Wordpress und phpBB 3.1 gemacht.

Update: 05.02.2015
Härtetest auf einer größeren Webseite, das Script läuft im Heiligenlexikon

Über den Autor

tas2580

Weitere Informationen über mich findest du hier.

Ähnliche Beiträge


Kommentare


Kommentar schreiben

URLs werden automatisch umgewandelt.
[b]DEIN TEXT[/b] für Fett gedruckt
[quote]DEIN ZITAT[/quote] für Zitate
[code]DEIN CODE[/code] für Code
captcha