{"id":2207,"date":"2011-09-06T19:14:45","date_gmt":"2011-09-06T17:14:45","guid":{"rendered":"http:\/\/www.media-deluxe.de\/blog\/?p=2207"},"modified":"2019-09-09T12:30:49","modified_gmt":"2019-09-09T10:30:49","slug":"datenschutz-vertraegliche-facebook-share-und-like-buttons","status":"publish","type":"post","link":"https:\/\/www.media-deluxe.de\/blog\/2011\/09\/datenschutz-vertraegliche-facebook-share-und-like-buttons\/","title":{"rendered":"Datenschutz-vertr\u00e4gliche Facebook Share- und Like-Buttons"},"content":{"rendered":"<p>Da mein vor zwei Monaten geschriebener Artikel \u00fcber einen <a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/07\/den-google-1-button-datenschutzkonform-integrieren\/\" title=\"Den Google +1 Button datenschutzkonform integrieren\">datenschutzkonformen Google +1 Button<\/a> sehr starke Resonanz fand, liefere ich hier auch entsprechende L\u00f6sungen f\u00fcr die wichtigsten Facebook-Buttons nach. Dieses Thema ist derzeit hoch brisant, da deutsche Datenschutzbeauftragte dem \u201eGef\u00e4llt mir\u201d-Button den Kampf angesagt haben und <a href=\"http:\/\/www.spiegel.de\/netzwelt\/netzpolitik\/0,1518,781231,00.html\" title=\"Datensch\u00fctzer droht Facebook-Partnern mit Strafe\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Website-Betreibern mit Bu\u00dfgeldern bis zur H\u00f6he von 50.000 Euro drohen<\/a>, wenn sie den fraglichen Button nicht von ihrer Homepage entfernen. <!--more--><\/p>\n<h2>Bu\u00dfgelder f\u00fcr Facebooks Like-Button<\/h2>\n<p>Durchaus zu Recht \u00fcbrigens, denn bei jedem Besuch einer Webseite mit dem Like-Button werden zahlreiche Nutzerinformationen an Facebook \u00fcbermittelt &#8211; auch eben von Usern, die gar nicht vorhaben den Like-Button zu benutzen, die gar keinen Facebook-Account besitzen oder die absichtlich einen gro\u00dfen Bogen um Facebook machen. Hinzu kommt, dass durch den Like-Button der Traffic deutlich ansteigt<sup><a href=\"#footnote1\">1<\/a><\/sup>. F\u00fcr Inhaber eines alten Handy-Vertrages mit Datenvolumen-abh\u00e4ngiger Abrechnung kann der \u201eGef\u00e4llt mir\u201d-Button den Besuch einer Website durchaus um einige Euro verteuern. Der Like-Button stellt also nicht nur ein erhebliches Datenschutz-, sondern auch ein Usability- bzw. Accessibility-Problem dar.<\/p>\n<h2>Ein akzeptabler Kompromiss<\/h2>\n<p>Durch die hier aufgezeigten L\u00f6sungen werden Nutzerdaten erst dann an Facebook weiter geleitet, wenn ein Besucher der Website ausdr\u00fccklich die Like- oder Share-Funktion nutzen will und dies durch einen Klick auf einen entsprechenden Link oder Button ausdr\u00fcckt. Da bis zu diesem Moment jeglicher Datenstrom von und zu Facebook unterbleibt, erh\u00f6ht sich auch das Datenvolumen f\u00fcr den Aufruf der Website nicht unn\u00f6tig. Andererseits ben\u00f6tigen Facebook-Fans nur einen Klick mehr, um die gew\u00fcnschten Funktionalit\u00e4ten uneingeschr\u00e4nkt nutzen zu k\u00f6nnen.<\/p>\n<h2>Datenschutzkonformer Like-Button bzw. Link<\/h2>\n<p>Der datenschutzgerechte &#8222;Gef\u00e4llt mir&#8220;-Button ist ein Link zu einem (auf ausdr\u00fcckliche Nutzerinteraktion hin) dynamisch eingebetteten Facebook iFrame (sog. Like-Button). Er wird technisch durch \u00dcberschreiben des Inhaltes eines Div-Containers erzeugt.<\/p>\n<p><script type=\"text\/javascript\"><br \/>\nfunction loadFBLikeButton(){<br \/>\ndocument.getElementById(\"fblikebox\").innerHTML = '<iframe src=\"http:\/\/www.facebook.com\/plugins\/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmedia.deluxe&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><\/iframe>';<br \/>\n}<br \/>\n<\/script><\/p>\n<div id=\"fblikebox\"><a href=\"javascript:loadFBLikeButton()\" title=\"Link zum Facebook Like Button\">Show Like-Button<\/a><\/div>\n<p>Der Code dazu <sup><a href=\"#footnote2\">2<\/a><\/sup>:<\/p>\n<p><code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nfunction loadFBLikeButton(){<br \/>\ndocument.getElementById(\"fblikebox\").innerHTML='FACEBOOK-CODE';<br \/>\n}<br \/>\n&lt;\/script&gt;<\/code><\/p>\n<p><code><br \/>\n<\/code><code>&lt;div id=\"fblikebox\"&gt;&lt;a href=\"javascript:loadFBLikeButton()\" title=\"Link zum Facebook Like Button\" &gt;Show Like-Button!&lt;\/a&gt;&lt;\/div&gt;<\/code><\/p>\n<p>Die Funktionsdeklaration kann entweder in einer externen Javascript-Datei, im Head-Bereich oder direkt im Body-Quelltext stehen, der zweite Teil des Codes (die alleinstehende Zeile) muss im Body-Quelltext stehen &#8211; an der Stelle, wo der Button erscheinen soll. FACEBOOK-CODE ist durch den iFrame-Code auszutauschen, den man sich auf der entsprechenden <a href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/like-box\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook Developer Seite<\/a> ausgeben lassen kann. Wer gerne einen Button statt eines Text-Links verwenden will, tauscht die letzte Code-Zeile gegen die nachfolgende Version aus. FACEBOOK-IMG muss durch den Pfad zum Icon ersetzt werden, die Gr\u00f6\u00dfenangaben des Buttons m\u00fcssen im Code eventuell angepasst werden.<\/p>\n<p><code>&lt;div id=\"fblikebox\"&gt;&lt;a href=\"javascript:loadFBLikeButton()\"&gt;&lt;img src=\"FACEBOOK-IMG\" width=\"16\" height=\"168\" alt=\"Facebook Like-Button laden!\" title=\"Link zum Facebook Like Button\" \/&gt;&lt;\/a&gt;&lt;\/div&gt;<\/code><\/p>\n<p>Mit Button s\u00e4he das beispielsweise so aus:<\/p>\n<p><script type=\"text\/javascript\"><br \/>\nfunction loadFBLikeButton2(){<br \/>\ndocument.getElementById(\"fblikebox2\").innerHTML = '<iframe src=\"http:\/\/www.facebook.com\/plugins\/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmedia.deluxe&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><\/iframe>';<br \/>\n}<br \/>\n<\/script><\/p>\n<div id=\"fblikebox2\"><a href=\"javascript:loadFBLikeButton2()\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.media-deluxe.de\/blog\/wp-content\/uploads\/2011\/09\/zumlikebutton.jpg\" alt=\"Zum Facebook Like Button\" title=\"Link zum Facebook Like Button\" class=\"alignnone size-full wp-image-2321\" width=\"161\" height=\"24\"\/><\/a><br \/>\n(sachliche Variante)<\/p>\n<p><a href=\"javascript:loadFBLikeButton2()\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.media-deluxe.de\/blog\/wp-content\/uploads\/2011\/09\/ihrmichauch.jpg\" alt=\"Ihr k\u00f6nnt mich mal gern haben.\" title=\"Link zum Facebook Like Button\" class=\"alignnone size-full wp-image-2291\" width=\"241\" height=\"24\"\/><\/a><br \/>\n(Abserviervorschlag)<\/p>\n<p><a href=\"javascript:loadFBLikeButton2()\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.media-deluxe.de\/blog\/wp-content\/uploads\/2011\/09\/likebuttonzeigen.jpg\" alt=\"Den Facebook Gef\u00e4llt mir-Button zeigen!\" title=\"Link zum Facebook Like Button\" class=\"alignnone size-full wp-image-2334\" width=\"232\" height=\"37\"\/><\/a><br \/>\n(f\u00fcr \u00dcbervorsichtige)<\/p>\n<\/div>\n<h2>Datenschutzkonformer Share-Button bzw. Link<\/h2>\n<p>Eine datenschutzkonforme Share-Funktion f\u00fcr Facebook kann durch eine einfache Verlinkung realisiert werden. Solch eine L\u00f6sung s\u00e4he beispielsweise so aus <sup><a href=\"#footnote2\">2<\/a><\/sup> <sup><a href=\"#footnote3\">3<\/a><\/sup>:<\/p>\n<p><script type=\"text\/javascript\"><br \/>\nfunction post2FacebookLink() {<br \/>\n\tdocument.write('<a title=\"Post to Facebook!\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=' + encodeURIComponent(window.location.href) + '&#038;t=' + encodeURIComponent(document.title) +'\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Post to Facebook!<\/a>');<br \/>\n}<br \/>\n<\/script><\/p>\n<p><script type=\"text\/javascript\">post2FacebookLink()<\/script><\/p>\n<p>Der Code dazu<sup><a href=\"#footnote2\">2<\/a><\/sup>:<\/p>\n<p><code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nfunction post2FacebookLink() {<br \/>\ndocument.write('&lt;a title=\"Post to Facebook!\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=' + encodeURIComponent(window.location.href) + '&amp;t=' + encodeURIComponent(document.title) +'\" target=\"_blank\"&gt;Post to Facebook!&lt;\/a&gt;');<br \/>\n}<br \/>\n&lt;\/script&gt;<\/code><\/p>\n<p><code><br \/>\n<\/code><code>&lt;script type=\"text\/javascript\"&gt;post2FacebookLink();&lt;\/script&gt;<\/code><\/p>\n<p>Statt eines Textes kann nat\u00fcrlich auch ein Button verlinkt werden. Ein Beispiel daf\u00fcr findet sich in der Social Media Link-Leiste, am Fu\u00dfe dieses Blog-Artikels. Der Code dazu sieht so aus <sup><a href=\"#footnote2\">2<\/a><\/sup> <sup><a href=\"#footnote3\">3<\/a><\/sup>:<\/p>\n<p><code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nfunction post2FacebookButton() {<br \/>\ndocument.write('&lt;a title=\"Post to Facebook!\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=' + encodeURIComponent(window.location.href) + '&amp;t=' + encodeURIComponent(document.title) +'\" target=\"_blank\"&gt;&lt;img src=\"FACEBOOK-IMG\" width=\"16\" height=\"16\" alt=\"Post to Facebook!\" \/&gt;&lt;\/a&gt;');<br \/>\n}<br \/>\n&lt;\/script&gt;<\/code><\/p>\n<p><code><br \/>\n<\/code><code>&lt;script type=\"text\/javascript\"&gt;post2FacebookButton();&lt;\/script&gt;<\/code><\/p>\n<p>In beiden F\u00e4llen kann die Funktionsdeklaration (der erste Teil des Codes, bis zur Leerzeile) entweder in einer ausgelagerten Javascript-Datei, im Head-Bereich oder direkt im Body-Quelltext stehen. FACEBOOK-IMG muss durch den Pfad zum Icon ersetzt werden, die Gr\u00f6\u00dfenangaben des Buttons m\u00fcssen im Code ebenfalls angepasst werden. Der zweite Teil des Codes (alleinstehende Zeile) muss im Body-Quelltext stehen, an der Stelle, wo der Button bzw. Link erscheinen soll.<\/p>\n<h2>Facebook gef\u00e4llt das gar nicht!<\/h2>\n<p>Das Gesch\u00e4ftsmodell von Facebook besteht im Sammeln und Vermarkten von Kundendaten, und daher reagiert man dort beleidigt auf L\u00f6sungen wie diese. Das musste auch der Heise Verlag erfahren, als er vor einigen Tagen einen \u00e4hnlichen Workaround auf seiner Website einf\u00fchrte und prompt kurze Zeit sp\u00e4ter eine <a href=\"http:\/\/www.heise.de\/newsticker\/meldung\/Facebook-beschwert-sich-ueber-datenschutzfreundlichen-2-Klick-Button-2-Update-1335658.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Beschwerde von Facebook<\/a> einging. Mit einem desastr\u00f6sen PR-Eigentor drohte Facebook zun\u00e4chst mit einer Sperrung der Applikation, ruderte dann aber schnell zur\u00fcck. Das vorl\u00e4ufige Fazit der Auseinandersetzung (Zitat Facebook): \u201e2-klick-Button ist nicht ideal &#8211; aber kein Problem. Nur ein Like-Button der grafisch so tut als ob er einer ist, ist nicht ok.\u201d Der Button zum Aufruf der Like-Funktion sollte also keine Verwechslungsgefahr mit dem eigentlichen Like-Button darstellen <sup><a href=\"#footnote4\">4<\/a><\/sup>.<\/p>\n<hr \/>\n<p><a name=\"footnote1\"><\/a>Fu\u00dfnote 1:<br \/>\nBei leerem Cache habe ich etwa 78,3 kB f\u00fcr den Aufruf des Like-Buttons gemessen. Wenn der Button bereits in den Cache geladen wurde, fallen bei mir f\u00fcr jeden Aufruf einer Webseite mit dem Button zus\u00e4tzliche ca. 6,4 kB (davon die H\u00e4lfte als Upstream, Messung mit einem Smartphone) an. Bei einem alten Daten-Tarif von 0,19 Euro\/10 kB, ergeben sich also rechnerisch 1,49 EUR f\u00fcr den Erstaufruf und weitere 12 Cent f\u00fcr jede weitere Seite.<\/p>\n<hr \/>\n<p><a name=\"footnote2\"><\/a>Fu\u00dfnote 2:<br \/>\nDie vorstehenden Scripte wurden bereits mit recht vielen Browsern getestet, und sie d\u00fcrften in statischen \u201eStandard-Webseiten\u201d einwandfrei funktionieren. F\u00fcr komplexere Anforderungen (z.B. CMS, HTML 4 Strict oder HTML 5, Seiten mit mehreren Like-Buttons etc) sind jedoch mit einiger Wahrscheinlichkeit spezifische Anpassungen notwendig.<\/p>\n<p>Disclaimer: Die Bereitstellung der hier skizzierten Scripte und Muster-Buttons erfolgt selbstverst\u00e4ndlich unter Ausschluss jeglicher Gew\u00e4hrleistung, ihre Verwendung erfolgt auf eigene Gefahr. In keinem Fall kann Marc Stenzel bzw. media deluxe oder einer ihrer Mitarbeiter f\u00fcr etwaige Sch\u00e4den 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\u00e4den bzw. Folgesch\u00e4den einschlie\u00dflich Gewinnausfalls, oder Sch\u00e4den, die aufgrund des Verlustes von Daten entstehen.<\/p>\n<hr \/>\n<p><a name=\"footnote3\"><\/a>Fu\u00dfnote 3:<br \/>\nDie Verlinkung erfolgt nach folgendem Muster (XXX ist in diesem Fall die gem\u00e4\u00df RFC 1738 kodierte Referrer-URL, FACEBOOK-IMG der Pfad zum Icon):<\/p>\n<p><code>&lt;a title=\"Post to Facebook!\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=XXX\" target=\"_blank\"&gt;&lt;img src=\"FACEBOOK-IMG\" alt=\"Post to Facebook!\"&gt;&lt;\/a&gt;<\/code><\/p>\n<p>Falls verf\u00fcgbar (in vielen CMS ist das der Fall), ist es meist sinnvoller, statt der Referrer-URL die <a href=\"http:\/\/googlewebmastercentral.blogspot.com\/2009\/02\/specify-your-canonical.html\" title=\"Specify your canonical\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Canonical URL<\/a> zu \u00fcbergeben.<\/p>\n<hr \/>\n<p><a name=\"footnote4\"><\/a>Fu\u00dfnote 4:<br \/>\nFacebook bezieht sich dabei auf folgenden Paragrafen seiner \u201ePlatform Policies\u201d:<\/p>\n<blockquote><p>8. You must not use or make derivative use of Facebook icons, or use terms for Facebook features and functionality, if such use could confuse users into thinking that the reference is to Facebook features or functionality.<\/p><\/blockquote>\n<div id=\"similarblogposts\">\n<hr \/>\n<div class=\"block\">\n<h5>\u00c4hnliche Artikel<\/h5>\n<ul>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/07\/datenschutz-konformer-diaspora-social-media-button\/\">Datenschutzkonformer Social Media Button f\u00fcr Diaspora<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/07\/den-google-1-button-datenschutzkonform-integrieren\/\">Den Google +1 Button datenschutzkonform integrieren<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/03\/mckinsey-studie-vernetzte-unternehmen-web-2-0-zahlt-sich-aus\/\">McKinsey Studie: Vernetzte Unternehmen \u2013 Web 2.0 zahlt sich aus<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/03\/26-und-27-05-2011-social-media-seminar-in-frankfurt\/\">26. und 27.05.2011 Social Media Seminar in Frankfurt<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/02\/reduzierung-innerbetrieblicher-e-mails-mit-social-software\/\">Reduzierung innerbetrieblicher E-Mails mit Social Software<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/01\/top-secret-trends-in-den-labs-von-facebook-und-co-health-2-0\/\">Top Secret Trends in den Labs von Facebook und Co: Health 2.0<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/01\/social-media-integration-fuer-callcenter\/\">Social Media Integration f\u00fcr Callcenter<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/01\/wie-den-facebook-account-loeschen\/\">Wie den Facebook Account l\u00f6schen?<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/01\/how-to-profilfbild-fuer-facebook-unternehmensseite\/\">How-To: Profilbild f\u00fcr Facebook Unternehmensseite<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2010\/12\/adtaily-social-sponsoring-tool-marketplace-zahlungsmittel\/\">Social Sponsoring Tool AdTaily<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/03\/facebook-news-fanpages-verschwunden-nutzernamen-anmeldung-unmoeglich-4-cent-pro-like\/\">Facebook News: Fans kaufen &#8211; Fanpages verschwunden &#8211; Nutzernamen-Anmeldung unm\u00f6glich<\/a><\/li>\n<li><a href=\"https:\/\/www.media-deluxe.de\/blog\/2010\/10\/rss-fur-recherche-profis-teil-1\/\">RSS f\u00fcr Recherche-Profis \u2013 Teil 1<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Da mein vor zwei Monaten geschriebener Artikel \u00fcber einen datenschutzkonformen Google +1 Button sehr starke Resonanz fand, liefere ich hier auch entsprechende L\u00f6sungen f\u00fcr die wichtigsten Facebook-Buttons nach. Dieses Thema ist derzeit hoch brisant, da deutsche Datenschutzbeauftragte dem \u201eGef\u00e4llt mir\u201d-Button &hellip; <a class=\"more-link\" href=\"https:\/\/www.media-deluxe.de\/blog\/2011\/09\/datenschutz-vertraegliche-facebook-share-und-like-buttons\/\"> Weiter&#8230;<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,5,37,6,52,36,4],"tags":[69,194,213,146,53,160,25,128,83,54,235,192,68,138],"class_list":["post-2207","post","type-post","status-publish","format-standard","hentry","category-e-business","category-marketing","category-projektmanagement","category-social_media","category-suchmaschinenoptimierung","category-usability","category-webdesign","tag-anleitung","tag-business-2-0","tag-datenschutz","tag-facebook","tag-google","tag-how-to","tag-html","tag-javascript","tag-online-marketing","tag-seo","tag-social-media","tag-social-software","tag-tutorial","tag-web-2-0"],"_links":{"self":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/2207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/comments?post=2207"}],"version-history":[{"count":2,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/2207\/revisions"}],"predecessor-version":[{"id":3955,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/2207\/revisions\/3955"}],"wp:attachment":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/media?parent=2207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/categories?post=2207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/tags?post=2207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}