Den Google +1 Button datenschutzkonform integrieren

Social Media Buttons werden im Idealfall durch verlinkte Icons realisiert1. Auf diese Weise bleibt der Quellcode schlank, und die Verlinkung ist hinsichtlich des Datenschutzes unbedenklich, denn erst durch explizite User-Interaktion (Anklicken des Buttons) werden Informationen an das jeweilige Social Network weitergeleitet, und auch dann idealerweise nur ein Referrer.

Google ist extrem gierig

Ganz anders stellt sich Google die Integration des +1 Buttons vor. Durch Einbindung der Javascript-Datei plusone.js werden bei jedem Aufruf einer Webseite, die den +1 Button enthält, reichhaltige Informationen sowohl über die Webseite als auch über jeden ihrer Besucher an Google übermittelt (sowie bei den Besuchern Cookies gespeichert) – wohlbemerkt: gänzlich unabhängig davon ob der Button überhaupt benutzt wird bzw. der Besucher an Google+ bzw. +1 teilnimmt. Das ist völlig inakzeptabel!

Immense Aufblähung des Datenvolumens

Die Einbindung der Javascript-Datei plusone.js treibt das Datenvolumen für einen Website-Aufruf um (derzeit) rund 130 kB (eigene, möglicherweise ungenaue Tests mit einem Smartphone ergaben zusätzliche etwa 106 kB Download und 22 kB Upload für das Laden des +1 Buttons) in die Höhe. Wer noch einen Handy-Tarif hat, der Daten-Traffic mit 0,19 Euro/10 kB bestraft, bezahlt also etwa 2,30 Euro mehr für den Seitenaufruf, von der verlängerten Ladezeit ganz zu schweigen2.

Datenschutz

Völlig gleichgültig, was Google mit den gewonnenen Daten macht – mit den Datenschutz-Maximen Datensparsamkeit und Datenvermeidung ist das Verfahren nicht zu vereinbaren (worüber auch kosmetische Korrekturen von Datenschutzerklärungen nicht hinweg täuschen können). Es ist zu hoffen, dass Google – nach dem Vorbild der anderen Social Media Plattformen – ebenfalls eine Integration light3 ermöglichen wird. Bis dahin wäre allenfalls ein Workaround etwa in folgender Weise akzeptabel:

Datenvolumen- und Datenschutz-verträglicher Workaround

Ziel eines solchen Workaroundes ist es, dass die +1-Bibliothek erst dann geladen wird, wenn ein User explizit die plus one Schaltfläche sehen bzw. ihre Funktionalitäten nutzen will. Geschieht dies nicht, sollen auch keinerlei Informationen an Google übermittelt werden. Ich habe zu diesem Zweck ein Script erstellt: Der Code kann im Quelltext (Body) einer Webseite an der Stelle eingesetzt werden5, wo auch der +1 Button erscheinen soll (eventuelle Bugs bitte melden):

<script type="text/javascript">
function loadScript(jssource) {
var jsnode = document.createElement('script');
jsnode.setAttribute('type','text/javascript');
jsnode.setAttribute('src',jssource);
document.getElementsByTagName('head')[0].appendChild(jsnode);
document.getElementById('plus1').innerHTML = "";
}
var plus1source = "https://apis.google.com/js/plusone.js";
</script>
<a id="plus1" href="javascript:loadScript(plus1source)">Show Google +1</a>
<g:plusone></g:plusone>

(Durch Modifikation der Zeile <g:plusone></g:plusone> können übrigens Größe und Erscheinungsbild des +1 Buttons beeinflusst werden4. Zur Anpassung der Sprache siehe Fußnote 6.

Das sieht dann so aus:

Show Google +1

Optische und datenschutzrechtliche Optimierung

Natürlich kann man die Funktion beispielsweise noch verfeinern, indem man statt des Schriftzuges „Show Google +1“ einen entsprechenden Button verwendet, z.B. so:

(Bildbeispiel nicht verlinkt, Demo siehe unten: Social Media Links) Show +1 Button
Weitere Größen siehe Fußnoten 4, 5.

Der Code mit der Button-Lösung sähe so aus:

<script type="text/javascript">
function loadScript(jssource) {
var jsnode = document.createElement('script');
jsnode.setAttribute('type','text/javascript');
jsnode.setAttribute('src',jssource);
document.getElementsByTagName('head')[0].appendChild(jsnode);
document.getElementById('plus1').innerHTML = "";
}
var plus1source = "https://apis.google.com/js/plusone.js";
</script>
<a id="plus1" href="javascript:loadScript(plus1source)"><img width="76" height="24" title="Show Google +1 Button" alt="Show Google +1 Button" src="http://www.PFAD-ZUM-BUTTON/showplusone-2.jpg"></a>
<g:plusone></g:plusone>

(5, PFAD-ZUM-BUTTON sowie gegebenenfalls die Werte für width und hight müssen angepasst werden. Bitte nicht mit den Buttons in diesem Blog verlinken. Falls gewünscht, können die unten bereitgestellten Muster-Buttons kopiert und im eigenen Webspace verwendet werden.)

Ferner könnte man in einem Tooltip darauf hinweisen, dass mit dem Drücken des Buttons Daten an Google gesendet werden. Wer rechtlich ganz auf Nummer Sicher gehen will, holt sich mit einer Dialogbox vorher ein Opt-In ab.

Die genannten Scripte wurden bereits mit recht vielen Browsern getestet, und sie dürften in statischen „Standard-Webseiten“ einwandfrei funktionieren. Für komplexere Anforderungen (z.B. CMS, HTML 4 Strict oder HTML 5, Seiten mit mehreren +1 Buttons etc) sind jedoch spezifische Anpassungen der Scripte mit großer Wahrscheinlichkeit unerlässlich.

Alternativen

Theoretisch könnte man beispielsweise auch nach Anklicken von „Show Google +1“ einen Reload der jeweiligen Webseite erzeugen, ergänzt durch einen Query String, durch den dynamisch die plusone.js im Body geladen wird. In diesem Fall sollte jedoch die +1-Schaltfläche unbedingt um das href-Attribut ergänzt oder die Canonical URL verlinkt sein. Insgesamt erscheint mir diese Lösungsmöglichkeit komplexer und nur in besonderen Fällen ratsam zu sein. Kennt jemand noch weitere Möglichkeiten?

Gar kein Interesse an Google Plus One?

BTW: Wer keinerlei Interesse an Google +1 hat, sollte in seinem Browser (z.B. mit Adblock Plus in Firefox) unbedingt die https://apis.google.com/js/plusone.js blockieren. Man bekommt dann den +1 Button gar nicht mehr zu sehen, erspart sich (und dem Internet allgemein) jede Menge Traffic und Ladezeit, und Google +1 erhält keine Informationen mehr über das eigene Surf-Verhalten.


Fußnote 1:
Beispiel für solch eine datenschutzkonforme Verlinkung, hier für Facebook (XXX ist in diesem Fall die gemäß RFC 1738 kodierte Referrer-URL, FACEBOOK-IMG der Pfad zum Icon):

<a title="Post to Facebook!" href="http://www.facebook.com/sharer.php?u=XXX" target="_blank"><img src="FACEBOOK-IMG" alt="Post to Facebook!"></a>


Fußnote 2:
Dieser Traffic entsteht bei meinem Smartphone bei jedem Seitenaufruf; möglicherweise kann er – je nach Cache- und Cookie-Einstellungen im Browser – auch geringer ausfallen. Die eigentliche plusone.js bewirkt das Nachladen weiterer Dateien, z.B. einer client__plusone.js mit einer uniquen URL (z.B. ../22224365-abc8a19e/googleapis.client__plusone.js) mit mehr als 20 kB. Der Upload umfasst das Senden der URL (damit die Anzahl der +1 zurückgemeldet werden kann) sowie anscheinend das volle Programm der verfügbaren Nutzerinformationen (Browser, Plugins, Screensize etc.), es scheint dabei via https eine mehrstufige Kommunikation zwischen Browser und Google stattzufinden. Eigene Messungen kann man übrigens leicht durchführen, indem man beispielsweise die Traffic-Differenz mit und ohne Blocken der plusone.js in Adblock (Firefox) misst. Oder man misst den zusätzlichen Traffic, der nach dem Anklicken des Show Google +1-Links auf dieser Blog-Seite entsteht. Dieser Test lässt sich bequem mit jedem Smartphone oder Handy durchführen.


Fußnote 3:
Google stellt zwar einen Skript-Tag-Parameter ({„parsetags“: „explicit“}) zum „expliziten Laden“ bzw. „expliziten Rendern“ bereit, ich konnte jedoch in keiner Konfiguration verhindern, dass die Dateien plusone.js und googleapis.client__plusone.js vorab geladen werden.


Fußnote 4:
Weitere Buttons, entsprechend der verschiedenen Größen des Original-Buttons:

Show +1 Button (Größe: 24×15 px., passend zu Google +1-Button „klein/small“)

Show +1 Button (Größe: 59×15 px., passend zu Google +1-Button „klein/small“ mit Counter)

Die folgenden drei Buttons sind Sondergrößen (Höhe 16 Pixel). Sie korrespondieren nicht exakt mit den kleinen Google Buttons (Höhe 15 Px.), schließen jedoch bei mir eine Lücke, da ich in vielen Websites bereits Social Media Buttons mit einer Höhe von 16 Pixel verwende.

Show +1 Button Show +1 Button (Sondergrößen: 16×16 px., passend zu Google +1-Button „klein/small“)

Show +1 Button (Sondergröße: 24×16 px., passend zu Google +1-Button „klein/small“)

Show +1 Button (Sondergröße: 59×16 px., passend zu +1-Button „klein/small“ mit Counter)

Show +1 Button (Größe: 70×20 px., passend zu +1-Button „mittel/medium“ mit Counter)

Show +1 Button (Größe: 32×20 px., passend zu +1-Button „mittel/medium“)

Show +1 Button (Größe: 76×24, passend zu +1-Button „Standard“ mit Counter)

Show +1 Button (Größe: 38×24, passend zu +1-Button „Standard“)

Show +1 Button (Größe: 50×60 px., passend zu +1-Button „groß/tall“)


Fußnote 5:
Disclaimer: Die Bereitstellung der hier skizzierten Scripte und Muster-Buttons erfolgt selbstverständlich unter Ausschluss jeglicher Gewährleistung, ihre Verwendung erfolgt auf eigene Gefahr. In keinem Fall kann Marc Stenzel bzw. media deluxe oder einer ihrer Mitarbeiter für etwaige Schäden irgendwelcher Art verantwortlich gemacht werden, die durch die Benutzung oder im Zusammenhang mit der Benutzung der hier bereitgestellten Informationen entstehen, seien es direkte oder indirekte Schäden bzw. Folgeschäden einschließlich Gewinnausfalls, oder Schäden, die aufgrund des Verlustes von Daten entstehen.


Fußnote 6:

Zur Anpassung der Sprache muss vor der Zeile:

document.getElementsByTagName('head')[0].appendChild(jsnode);

diese Zeile eingefügt werden (hier für Deutsch):

jsnode.text = "{lang:'de'}";

Die Kürzel für andere Sprachen lassen sich der Google Dokumentation entnehmen: +1 für Ihre Website

Hier ist ein Muster-Code für eine komplette HTML-4 Transitional Webseite mit dem Google +1 Button (deutsch):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
function loadScript(jssource) {
var jsnode = document.createElement('script');
jsnode.setAttribute('type','text/javascript');
jsnode.setAttribute('src',jssource);
jsnode.text = "{lang:'de'}";
document.getElementsByTagName('head')[0].appendChild(jsnode);
document.getElementById('plus1').innerHTML = "";
}
var plus1source = "https://apis.google.com/js/plusone.js";
</script>
<a id="plus1" href="javascript:loadScript(plus1source)">Show Google +1</a>
<g:plusone></g:plusone>
</body>
</html>

Share on Facebook Share on Twitter Post to Delicious! Post to Diaspora!

Über Marc Stenzel

Marc Stenzel ist Inhaber der New Media Agentur media deluxe sowie freiberuflich als Marketing- und Projektmanager Online, Dozent und Fachjournalist (DFJV) tätig. Marc Stenzel bloggt hier über aktuelle Themen aus dem fachlichen und räumlichen Umfeld des Unternehmens - mal sachlich, mal humorvoll:
Dieser Beitrag wurde unter E-Business, Marketing, Projektmanagement, Social Media, Suchmaschinenoptimierung, Usability, Webdesign abgelegt und mit , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

99 Antworten zu “Den Google +1 Button datenschutzkonform integrieren”

  1. Thomas sagt:

    Sehr wichtiges Thema! Ich habe die diversen Buttons auch jeweils mit lokalem Icon eingebunden und lade weder Bilder noch JavaScript von irgendwelchen externen Seiten. Schonmal danke für den ersten Workaround oben.

    Für den Flattr-Button scheint es leider auch keine gute Lösung zu geben (zumindest nicht, wenn man nicht vorher von Hand sein „Thing“ anlegt und darauf verlinkt, was bei jedem Artikel mühsam ist).

    • Marc Stenzel sagt:

      Hi Thomas,

      danke für dein Feedback. Seit deiner Message habe ich übrigens noch eine Verbesserung am Code vorgenommen. Check please, falls du das Script verwenden willst.

      Grüße
      Marc

  2. R. sagt:

    Als Windows-User gleich einmal die Hosts-Datei angepasst. Dann brauche ich nicht irgendwelche Plugins und im IE funktioniert es dann auch.

    • Nok sagt:

      Gute Idee! Und wie mache ich das bei meinem Symbian Smartphone? D’oh!

    • Roland sagt:

      Host-Dateien sind zum blockieren denkbar ungeeignet. Du muesstest apis.google.com z.B. auf 127.0.0.1 erden. Damit blockierst Du aber ausser dem +1 auch viele andere Sache die die Google-API verwenden. Zudem darfst Du dich dann nicht wundern wenn Dein Browser schweinelangsam wird weil die http-Requests auf die geerdeten Seiten erst mal in einen Timeout laufen.
      Die Variante mit adblock – wie im Artikel beschrieben – ist deutlich sinnvoller. Vielleicht auch mal das ghostery Plugin anschauen, das ergänzt Adblock diesbezüglich ideal. Und auf dem Androiden gibts FF und adblock schließlich auch.

  3. […] von den Google-Servern und viele gute Hintergrundinfos bietet Marc Stenzel in seinem Artikel “Den Google +1 Button datenschutzkonform integrieren” […]

  4. Schwaneberg sagt:

    Der Code muss noch derart abgeändert werden, dass der Aufruf des Buttons

    innerhalb der call+1 Anweisung steht, also so:
    document.getElementById(‚call+1‘).innerHTML = „“;

    Vielen Dank für Deinen datenschutzkonformen Beitrag!

    • Marc Stenzel sagt:

      Hi Schwaneberg,

      die von dir angegebene Code-Zeile ist identisch mit meiner: document.getElementById(‘call+1′).innerHTML = “”;

      Ich habe den Code zwar schon mit vielen Browsern getestet, aber falls du dennoch einen Bug entdeckt hast, würde mich das natürlich sehr interessieren. Bitte führe deinen Hinweis doch noch etwas weiter aus.

  5. Schwaneberg sagt:

    Ja, das siehst Du richtig, aber ich meinte eigentlich das der Google aufruf zwischen die Anführungsstriche muss. Leider wirft das Dein Kommentarfeld immer wieder raus. ;) Grüße, Norman

    • Marc Stenzel sagt:

      Ich verstehe, du meinst so:
      document.getElementById(‘call+1′).innerHTML = “<g:plusone></g:plusone>”;

      Das erscheint durchaus logisch, ergab aber bei mir in manchen Konfigurationen mit dem IE (Timing?-)Probleme, d.h. der Google-Button erschien einfach nicht.

      Ich habe in meinem Code dann den Aufruf des JS-Scripts bewusst vom Aufruf des Button getrennt (falls der Code dynamisch mit JavaScript eingefügt wird, sogar mit zwei separaten document.write), da auch Google darauf hinweist, dass bei Timing-Problemen der Aufruf des JS-Codes (unabhängig von der Position des Button-Aufrufs) an jeder beliebigen Stelle des html-Docs erfolgen kann – vorzugsweise am Ende des Dokumentes, um dessen Ladezeit nicht zu verzögern.

      Da mit meinem Code der Aufruf der plusone.js ohnehin erst nach dem vollständigen Parsen der Webseite erfolgt, müsste der Code so stimmen.

      Aber teste selbst mal und berichte mir dann bitte von eventuellen Bugs.

      Grüße
      Marc

    • Marc Stenzel sagt:

      BTW: Der Trick mit der Darstellung von HTML-Code in WordPress besteht darin, dass man < und > durch ihre HTML-Namen &lt; bzw. &gt; ersetzt. ;-)

  6. Schwaneberg sagt:

    Hi Marc,

    ich habtte zuerst deinen orginalen code auf wellness-salon-luebeck.de (selbstgestrickt, kein WP) eingebaut. Es wurde mir ein grauer g+ button angezeigt (nicht klickbar) und darunter der orginale g+ button (klickbar). erst als ich den code wie schon beschrieben abgeändert hatt, funktioniert der code nun wie gewünscht. jetzt befürchte ich, dass es nicht x-browser kompatibel ist. was mache ich falsch?

    danke, Norman

    • Marc Stenzel sagt:

      Ich habe deine Seite mit beiden Script-Varianten (in FF5 / Firebug) getestet, und erwartungsgemäß funktionierten beide. Du wirst wohl mit anderen Effekten gekämpft haben.

  7. philosapiens sagt:

    Hi,
    irgendwie bekomme ich es bei mir gar nicht zum Laufen.
    Bei meinen Seiten mit XHTML Strict kommt immer folgender Fehler:

    XML-Verarbeitungsfehler: Präfix nicht an einen Namespace gebunden

    Habt Ihr dazu eine Idee?

    • Marc Stenzel sagt:

      Dieser Fehler hat nichts mit dem o.g. Workaround zu tun, sondern betrifft den Google +1 Button in Strict Dokumenten generell. Ich denke, dass du dazu in den entsprechenden Google-Foren am ehesten Lösungen finden wirst.

  8. Ralf sagt:

    Mit jQuery sind es 3-5 Zeilen (Code bei Github). Ich habe allerdings die ID des Links in „gplus“ geändert da ich mit „call+1“ Probleme hatte.
    Wenn man WordPress benutzt, hat man ohnehin jQuery quasi standardmäßig geladen.

    Und es gibt noch eine Möglichkeit für diejenigen die etwas experimentieren wollen. Das JS von Google erzeugt ein iFrame. Der Nachteil an den Google-Tags () ist, das dass erzeugte iFrame jedes mal eine neue (zufällige?) ID bekommt. ES lässt sich also gar nicht oder nur schwer mit CSS und/oder JS/jQuery ansprechen.
    Google hat noch eine etwas ältere Version auf Lager. Dabei kann man dem iFrame eine beliebige ID geben und so mittels CSS formatieren.
    Das ist aber eine etwas unsichere Methode da Google hin und wieder alles ändert und man nicht sicher sein kann ob das iFrame in Zukunft so noch funktioniert. Der Vollständigkeit halber aber dennoch hier der Code (ebenfalls auf Github).

    • Marc Stenzel sagt:

      „da ich mit “call+1″ Probleme hatte“

      Good point! Ich hatte zwar bei meinen Tests nie Inkompatibilitäten festgestellt, aber http://www.w3.org engt den Namensraum für ID-Tokens tatsächlich an manchen Stellen mehr ein:

      ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

      Demnach ist das +-Zeichen zu meiden. Ich habe den obigen Code entsprechend geändert.

  9. eXeler0n sagt:

    Ich hätte gerne eine Diaspora Einladung. Und danke für den Hinweiß mit dem +1 Button. Der wird umgehend von meiner Webseite entfernt!

  10. Chris sagt:

    Hey,

    toller Artikel!

    Ich hätte gerne eine Einladung zu Google+ :) Würde mich sehr freuen!

  11. Marc Stenzel sagt:

    Beide Invites sind raus. Viel Spaß!

  12. Andre sagt:

    Und wenn Sie gerade dabei sind: eine Einladung zu Google+ würde mich sehr freuen. :)

    Gruss

  13. Herbert sagt:

    Wo hast du die Info her, dass direkt bei der Einbindung Daten an Google gesendet werden? Wenn ich mit Hilfe von Firebug die ausgehenden und eigehenden Daten angezeigt bekomme finde ich nur, dass die .js von google und das sprite geladen wird.
    wird innerhalb der .js von google die kommunikation mit google aufgebaut?
    danke und gruß

    • Marc Stenzel sagt:

      Schau dir das in Firebug noch einmal an, nachdem du den Cache und die Cookies gelöscht hast. Die Kommunikation läuft sehr unterschiedlich ab, je nachdem ob Cache und Cookies geleert sind oder beispielsweise ob man bei Google+ eingeloggt ist. Außerdem wird anscheinend noch viel an der API rumgeschraubt, d.h. das Bild ändert sich täglich.

  14. […] Ausführungen im ersten Abschnitt “Google ist extrem gierig” des Blogbeitrags “Den Google +1 Button datenschutzkonform integrieren” zutreffend sind (was leider zu befürchten ist), dann solltest Du auf jeden Fall auch den […]

  15. oliver kreowsky sagt:

    super post!

    danke dir dafür

    grüsse

  16. Jack sagt:

    Ich hätte gerne eine Google+ Einladung.

    Vielen Dank!

  17. Felix sagt:

    Ich hätte auch gerne eine Google+ Invite.

    Vielen Dank!

  18. Marcello sagt:

    Hey …

    Wenn es kein Problem ist, hätte ich auch gerne eine Einladung zu Google+.

    Gruß
    Marcello

  19. Simon sagt:

    Ich hätte auch gerne eine Google+ Einladung.

    Danke

  20. Dominik sagt:

    Ich wäre ebenfalls froh um eine Google+ Einladung.

    Vielen Dank

  21. Sven sagt:

    Ich würde google+ auch gerne mal von innen sehen … eine Einladung wäre sehr nett!

    gruß

  22. Heisenberg sagt:

    ich hätte gern eine Einladung zu Diaspora

    Danke

  23. Spunky sagt:

    danke für die Code-Snipsel, so wenig Daten wie möglich preisgeben muss das Ziel sein

    Spunky

  24. Bernd sagt:

    Sehr informative Seite – herzlichen Dank.

    im Voraus auch für den Invite ;-)

    Grüßle, Bernd

  25. someone sagt:

    danke fuer die schoenen codeschnipsel !

    einladungen sind auch willkommen.

    grüsse

  26. Marc Stenzel sagt:

    Es sollten alle Invites raus sein. Falls ich mich vertan haben und jemanden übersehen haben sollte, bitte melden.

  27. Tel sagt:

    Würde gerne mal google+ ausprobieren

    Grüsse

  28. M sagt:

    Sehr interessant was Google da wieder vorhat.

    Ich hätte bitte trotzdem gerne die Einladungen für G+ und Diaspora.

    Danke!

  29. Philipp sagt:

    Schöner Artikel!

    Ist eine Einladung zu G+ noch zu haben?
    – Danke.

  30. Robert Scheungrab sagt:

    Hallo,

    ich würde mich auh über eine Einladung zu Google+ freuen.

    Vielen Dank

  31. Jörg sagt:

    Hallo,

    ich würde mich auch über eine Einladung zu Google+ freuen.

    Vielen Dank

  32. Fleischwurst sagt:

    Moin,

    würde auch mal gerne Google+ testen. Danke1

    Matthias

  33. Sisko sagt:

    Hallo,

    ich würde auch gerne Google+ testen. Danke :)

  34. christian sagt:

    Hi,
    hätte gern eine google+ Einladung :-)
    Danke!

    Gruß,

    Chrsitian

  35. herrkeuner sagt:

    Hallo,

    ich würde gerne einen Invite für google+ haben!

    Vielen Dank

  36. Thomas sagt:

    Gute Infos.

    Kannst du mir noch eine Einladung zu Google+ senden?

  37. niko sagt:

    ich hätte auch gern eine google+ Einladung

    Gruß
    niko

  38. Egon sagt:

    Hallo,

    danke für den sehr informativen Artikel. Nachdem sich die Datenschützer Facebooks ‚gefällt mir“ vorgeknüpft haben wirds dann wohl als nächstes Googles 1+ Button sein.
    Ich hätte auch gern eine Google+ Einladung. Danke.

    Gruß

    Egon

  39. Marco N. sagt:

    Guter Artikel. Vielen Dank!

    Ich werde das morgen direkt auf unseren Seiten umsetzen.

    Grüße

    Marco N.

  40. Timo sagt:

    Hallo,

    Auch ich hätte gerne Einladungen zu Google+ und Diaspora – einfach um die beiden mal vergleichen zu können.

    Danke,
    Timo

  41. Torben sagt:

    Hallo,

    falls das noch möglich ist, hätte ich auch gerne eine Google+ einladung!
    Dankeschön =)

    mfg

  42. Andreas sagt:

    Hi,

    toller Artikel. Ich hätte auch gern eine Google+ Einladung. Vielen Dank.

    Gruß

    Andreas

  43. Sebastian sagt:

    Ich würde google+ auch gerne mal sehen … eine Einladung wäre sehr nett!

    gruß
    Sebastian

  44. Michael sagt:

    Würde mich auch sehr über einen Diaspora-Invite freuen. Danke :)

    Gruß
    Michael

  45. Facebook und Co. datenschutzkonform einbinden…

    … Diaspora (danke an Marc Stenzel 7 media-deluexe.de) möchte folgendes:
    https://joindiaspora.com/bookmarklet?url=„URL“&title=“TITEL“ […] Was ebenfalls nicht funktioniert: Google +1 auf diese Art und Weise einzubinden. Marc Stenzel von media-deluxe.de hat einen anderen Weg gefunden, der allerdings ein wenig Handarbeit erfordert …

  46. Claude sagt:

    Hallo,

    ich wäre sehr froh über eine google+ Einladung!

    Das wäre nett!

    Gruss aus Luxemburg,

    Claude

  47. moritz sagt:

    Hätte auch gerne ein invite zu google+
    danke im vorraus

  48. PedroZ sagt:

    Mich bitte auch einladen!

    TIA

  49. Marc Stenzel sagt:

    Die Liste ist abgearbeitet. Viel Vergnügen mit Google+

  50. Tim sagt:

    Hallo!

    Ich hätte ebenfalls gerne jeweils einen Invite zu Google+ und Diaspora.

    Vielen Dank im Voraus!

    (Ich hoffe doch, man braucht für Google+ nicht zwingend eine Google-Mail-Adresse? Falls doch, bitte Bescheid geben!)

  51. cloud sagt:

    Hi,
    interessanter Artikel!
    Über eine Einladung für Google+ und Diaspora würde ich mich freuen und wäre sehr dankbar :)

  52. Jens sagt:

    Gibt es auch eine noch einfachere Form der Einbindung? Z.B. nur das Symbol +1 als Bild auf der eigenen Seite speichern und dieses dann mit einem Link versehen der einen auf die google+1 Seite leitet, wo man sich dann anmelden muss, oder wenn man es schon ist, dass dann die Webseite „ge-plus-einst“ wird ohne den ganzen Javascript-Kram oder MUSS der unbedingt sein? Bei dem Facbook-Link den wir auf unserer Seite verwenden funktioniert dies jedenfalls und sieht dann ungefährt so aus http://www.facebook.com/share.php?src=bm&u=

    • Marc Stenzel sagt:

      Der Google+ Button ruft sehr komplexe und vielfältige Funktionen auf, er ist zum Beispiel gleichzeitig ein „Like“- und (seit gestern) auch ein Share-Button. Ein Auseinanderdröseln dieser Funktionen dürfte unrealistisch sein, solange Google dazu keine Möglichkeit in einer API bereit stellt (was wohl auch nicht geschehen wird).

      Mit dem oben beschriebenem Workaround ist m.E. aber ein guter Kompromiss erzielt: User, die sich nicht für Google+ interessieren, werden nicht mit Daten-Overkill belästigt, und Google erfährt nichts über sie. Wer dagegen Google+ nutzen möchte, braucht gerade einmal einen Klick mehr und hat dann alle Funktionen ungeschmälert verfügbar.

      Um auf das Beispiel Facebook zurück zu kommen: Die Share-Funktion kann tatsächlich durch einen einfachen Link realisiert werden, der hinsichtlich des Datenschutzes unbedenklich ist – nicht aber der Facebook Like-Button. Für diesen müsste ebenfalls tiefer in die Trickkiste gegriffen werden.

  53. Karsten sagt:

    Ich hätte doch soooo gerne ein Invite zu Google+….

    Danke und Gruß
    Karsten

  54. […] reichlich in der Frühe habe ich in der letzten Nacht daran gesessen, Marc Stenzels Google+1-Button, der sich nur auf Anforderung einblendet, sauber in diese Seiten einzubauen. Das Problem lag dabei […]

  55. max sagt:

    hallo,

    hast du so eine lösung auch für facebook? :-)

    • Marc Stenzel sagt:

      Im Prinzip ja. :-)

      Für den Share-Button ist oben bereits eine Lösung skizziert. Ansonsten bietet Facebook eine ganze Menge Produkte (z.B. Like- und andere Buttons und Banner, mit und ohne SDK), die jeweils unterschiedlich zu handhaben wären. Die obige Lösung für den Google Plus 1 Button könnte zum Beispiel als Muster für den Facebook Like-Button mit SDK dienen. Der Like-Button ohne SDK könnte noch einfacher eingebunden werden, indem man mittels eines entsprechenden Icons per JavaScript den Like Button Code in einen div-Container lädt.

      Kann sein, dass ich in den nächsten Tagen einen eigenen Blog-Eintrag zu diesem Thema schreibe. Stay tuned!

  56. Ian sagt:

    Ich würd mich sowohl über einen Diaspora, als auch über einen Google+ Invite sehr freuen!

    Beste Grüße und vielen Dank!

    Ian

    • Marc Stenzel sagt:

      Es sind beide Einladungen raus. Inzwischen wurde Google+ auch für jedermann freigegeben, weitere Invites gibt es also nicht mehr.

  57. Ich blende den Google +1 button über die Session-Variable ein/aus. Diese wird über ein post-request umgeschaltet. Mir fehlt hier der unmittelbare und sofortige Hinweis auf das Datenschutzrisiko beim Button in der Nähe.

  58. Corinna sagt:

    Prima Lösung – Dank für die Veröffentlichung! Wie allerdings stelle ich hier die Sprache ein? Freue mich über jede Antwort :-)

    • Marc Stenzel sagt:

      Vor der Zeile:

      document.getElementsByTagName('head')[0].appendChild(jsnode);

      diese beiden Zeilen einfügen (für Deutsch):

      var sprache = document.createTextNode("{lang: 'de'}");
      jsnode.appendChild(sprache);

      • Corinna sagt:

        Vielen Dank für die schnelle Antwort – leider funzt es so nicht, gibt einen JS Fehler…

        • Marc Stenzel sagt:

          Der Code sollte eigentlich stimmen. Check nochmal ob du die Anweisung auch richtig umgesetzt (also Einfügen vor der richtigen Zeile) und dabei kein Zeichen gelöscht hast.

          • Corinna sagt:

            Habe alles ausprobiert, stehe auf dem Schlauch :-(
            Kannst Du eine Seite nennen, auf der es so läuft?
            Sorry für die inconvenience.

  59. Marc Stenzel sagt:

    @Corinna

    Um dir zu helfen brauchte ich ein paar mehr Angaben. Lief denn der Code ohne die Sprachergänzung?

    • Corinna sagt:

      Nochmals Dank für die schnelle Antwort – ohne die Sprachergänzung läuft der Code, habe ihn auch eingebaut. Getestet hatte ich die Sprachergänzung nur mit dem IE und stelle nun fest, dass der Code mit dem IE einen Fehler produziert, mit dem FF allerdings nicht.

  60. Corinna sagt:

    Im IE8.

  61. Marc Stenzel sagt:

    @Corinna

    Die einfachste aller denkbaren Lösungen scheint gut zu funktionieren (auf die Schnelle getestet mit IE ab 7, aktuellen Firefox, Opera, Chrome). Check it out:

    Vor der Zeile:

    document.getElementsByTagName('head')[0].appendChild(jsnode);

    diese Zeile einfügen (für Deutsch):

    jsnode.text = "{lang:'de'}";

  62. Corinna sagt:

    Funktioniert :-)

    Herzlichen Dank für die geduldige Hilfestellung!

  63. Thomas sagt:

    Hat sich der Render-Code des Buttons geändert oder warum funktioniert er mit obiger Methode nicht mehr? (Er wird rot mit Ausrufezeichen nach dem Klick, sowohl hier oben als auch bei mir im Blog.)

    • Marc Stenzel sagt:

      Bei mir funktioniert alles, d.h. der Button hier und auf deiner Website. Es gab in den letzten Wochen verschiedentlich Zeiträume, in denen diverse Funktionen um Google+ nicht erreichbar waren. An der Baustelle wird heftig rumgeschraubt. Vielleicht liegt deine Beobachtung daran, vielleicht hast du auf deinem Rechner aber auch versehentlich Dienste, Cookies ect. gesperrt, ohne die Google+ nicht funktioniert.

  64. Rob W. sagt:

    Mich würde interessieren, ob es bei dem Script eine Möglichkeit gibt, die Webadresse, die „geplusst“ werden soll, anzugeben, so wie das Google mit dem Tag ermöglicht:

  65. Rob W. sagt:

    oops, vorher hat der Filter das Tag ‚gefressen’…

    Mich würde interessieren, ob es bei dem Script eine Möglichkeit gibt, die Webadresse, die “geplusst” werden soll, anzugeben, so wie das Google mit dem Tag ermöglicht:

    <g:plusone href=“http://www.meinesuperdomain.de/sub.htm“></g:plusone>

    • Marc Stenzel sagt:

      Das href-Attribut sollte sich genauso problemlos wie das size-Attribut einfügen lassen:

      <g:plusone size="tall" href="xxx"></g:plusone>

      Allerdings wird diese Anweisung offenbar generell (also unabhängig von diesem datenschutzkonformen Workaround) durch eine eventuelle Canonical URL-Angabe in der Webseite außer Kraft gesetzt bzw. overruled. In den meisten Fällen dürften Canonical URLs ohnehin die empfehlenswertere Lösung sein: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=139394

  66. Frater Tecum sagt:

    Hab vielen Dank für das Tutorial. Werde mich gleich dransetzen und versuchen zu integrieren.

  67. […] datenschutzkonforme „2-Klick-Lösungen” zur Social Media-Integration ausgehebelt werden […]

  68. Vielen Dank, sehr guter Text und Quellcode! Werde ich gleich mal umsetzten…

  69. Timo Ollech sagt:

    Wie sähe denn eine HTML5-konforme Version aus, da meckert bei mir der Validator immer „Element g:plusone not allowed as child of element div in this context. (Suppressing further errors from this subtree.)“ – das muss aber in ein div. Was gibt es da noch für andere Möglichkeiten?

  70. Thomas131 sagt:

    Hallo,
    Man könnte die Codes noch verbessern indem man den link in den Tag legt. Dabei wird der Code nach den Laden überschrieben.

    m.f.G.:Thomas131