HTML, CSS, JS and other unsorted stuff

There are many social bookmarking services in the web and now Google is trying to break into this market too. Where other bookmarking or sharing services (apart from Twitter or Facebook) allow adding a social bookmark by just a (local) icon and a link to share a web page with other users, you have to embed a Google script if you want to add the +1 button.

Each time such a web page is loaded, at least the IP of the visitor is sent to Google, if the visitor is signed in or not - worse: If the visitor wants it or not.

I didn't take a deep look into the Google script but at a fist glance it looks like they are not just embedding the button into the web page, but analyzing some other information and sending it to Google - without an option to opt-out of that apart from blocking:

https://apis.google.com/js/plusone.js

The invasion of the +1 buttons on every second web page allows Google to track a user because normally the user's IP doesn't change during a surf session. The other information gathered could lead to quite a good profile of the visitor - again if the user wants it or not.

Google claims that this information is just used to improve the service, but I doubt that as long as their internal code is not revised by a trusted third party. By "trusted" I mean: Trusted by me, that they are really independent and not not on the payroll of Google.

I can understand why webmasters put these buttons on their pages, but sometimes I doubt, that they see all implications of that. I even don't know if they think about the massive amount of data that is sent every day just because of that. The script uses headers to prevent long-term caching, and then loads additional script content with a unique identifier for each request. That means that in most cases it is not cached, it is loaded again and again. Users who surf with a mobile device normally have no real flatrate but a capped data plan, some just as few as 500MB/months for a fixed price, every additional traffic costs up to 19ct/10kB in some data plans. That means: In the worst case users of mobile devices have to pay additional 2.30 €uro (about 3.20 US$ when I wrote this) just for this stupid +1 button!

Still worse:
Every time you visit a web page containing a +1 button without blocking cookies, Google sets and reads a cookie for an iframe, which allows cross site tracking from every page you visit that has the iframe with the same Google domain embedded, meaning: Every page with a +1 button. Even this doesn't seem to be enough for Google: Each time, you visit a page containing a +1 button, about 22kB of information *1) is uploaded to Google.

This is not acceptable!

You, as a webmaster can respect your visitors' privacy and keep the additional cost for your users small, without loosing the ability to allow visitors to "+1" your pages, if you embed this button in a slightly modified way. Just embed the script like this instead of the original way:

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

The last line of the code, taken from Google's own page, not only breaks the XHTML STRICT validity, it is even no valid HTML code. If you want to keep your page valid, you can alter the last line to

<div class="g-plusone" id="my_plusone></div>
<script type="text/javascript">
  document.getElementById("my_plusone").setAttribute("data-size", "small");
  document.getElementById("my_plusone").setAttribute("data-href", document.location.href);
</script>

what should work just fine until Google changes the code and breaks it again.

This way, the button will be displayed after a click on the "Show Google +1" link and nothing is send or loaded as long as the visitor doesn't voluntarily click on that link. You can replace the text by an image like the following to match the appearance of the original Google +1 button:

*1) The same amount of information fits on about 4 pages of printed text.

Honi soit ...

[edit 2011-09-07] Additional information:
Shortly after I published this, a user informed me that heise.de did a similar thing but for Facebook and Twitter too. They created a jQuery plugin for that and as soon as they did so, Facebook was not amused about it and even threatened heise.de that they would cancel their Facebook account if they continue doing so. I think heise.de with its unique 18 million visitors per month was not very impressed.

Read the full story in German with additional links here:
http://www.heise.de/ct/meldung/Facebook-beschwert-sich-ueber-datenschutzfreundlichen-2-Klick-Button-2-Update-1335658.html
or an abreviated English version here:
http://www.zdnet.com/blog/facebook/german-website-creates-two-click-like-button-facebook-not-amused/3247

The jQuery plugin for a Facebook, Twitter and Google+1 two-click-solution is embedded in the heise.de the page, use Dragonfly to grab it

[edit 2011-09-09]
The full documented jQuery plugin from heise.de included all necessary graphics can be found here: http://www.heise.de/extras/socialshareprivacy/
translation provided by Google
German, but an online translator should help and the code is easy to adapt.
I would appreciate it if someone could un-jQuery it, because I personally don't like it to throw tons of libraries on such relatively small problems...