I wanted something to +1 a page no matter if the page had put Google’s button on its page or not. A Firefox add-on seemed too over the top and it might have ended up giving extra requests on every page load. I could not be bothered with that.

Instead, I had a quick peek for a bookmarklet to help my cause. To follow the masses, I simply went with the first Google result. It seemed nice enough, making a box in the upper right corner of my browsing window, a close button and of course the +1 button itself. These days when clicking +1 though, a little popup appears to share the page to your Google Plus stream. The bookmarklet had made the encapsulating box too small, effectively hiding the pop up to share the page. Fixing that seemed easy enough, edit some code in the bookmarklet to make a bigger box and tadaaa.

Except it was not. Here is the code for the bookmarklet, spaced out better for your convenience.

javascript:
(function() {
  var%20c;
  c=document.createElement("script");
  c.type="text/javascript";
  c.src="http://www.ctrlq.org/plusone/index.js?r="+Math.random();
  document.body.appendChild(c);
})();

Indeed, all it does is inject some remote JavaScript into the page. I do not use bookmarklets a lot, dare I say never, so I do not know if this is common practice, but this annoys me for three reasons.

  1. I have to rely on this other website to not go down.
  2. I have to trust these people to not change their code to something to their liking in the future.
  3. I cannot make a small notification without effectively having to rehost the modified code myself.

Ignoring these annoyances, I continued checking how the script worked out of curiosity. The included script page was the obvious next step.

(function(){
  var iframe_url = "http://ctrlq.org/plusone/" + "?u=" + encodeURIComponent(document.location.href);
  var div = document.createElement("div");
  div.id = "labnol_plusone";
  var str = "<style>#labnol_plusone{position: fixed; top: 10px; right: 20px; width: 150px; height: 90px;z-index: 9999;background: #f4f4f4;padding: 10px;border: thin solid #999;}#ex small {font:Verdana, Geneva, sans-serif;font-size:9px;float:right;display:block}</style><div id='ex'><small><a href='#' onClick=\"document.getElementById('labnol_plusone').style.display='none'; return false;\" title='Click to close this window'>Close</a></small><iframe frameborder='0' scrolling='no' src='" + iframe_url + "' width='120px' height='75px' style='backgroundColor: white;'></iframe></div>";
  div.innerHTML = str;
  document.body.insertBefore(div, document.body.firstChild);
})()

A div element is created, some styling added, as well as a close button and an iframe containing the +1 button. Another extra request to this site beyond our control, in other words. Also note that to solve my original problem, the styling defined there is what would need editing. However, let us continue, we’re going good now. This iframe’s source is as follows.

<html>
<head>
<title>Google +1</title>
<link rel="canonical" href="http://www.labnol.org/" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">    </script>
</head>
<body>
<style>body {padding:20px; background-color:#f4f4f4}</style>
<g:plusone size="standard" count="true" href="http://b.wardje.eu/"></g:plusone>
</body>
</html>

Finally the good part! This is more-or-less code as you would put in your own webpage when adding the button to your own website. So to summarize what all is done just to present the button to you.

  1. You click the bookmarklet, this step can obviously not be skipped.
  2. Some remote JavaScript gets injected into the page you are on.
  3. This remote JavaScript created a div element and adds an iframe to it.
  4. The iframe has the code that Google tells you to add to your pages to get a +1 button.
  5. That code includes a call to Google’s server for a JavaScript file that does the rest, this step can also not be avoided.

Ideally, in my eyes anyway, steps two, three and four should be skipped.

So I quickly threw the following together

(function() {
 var a,b;
 a=document.createElement('script');
 a.type='text/javascript';
 a.async=true;
 a.src='https://apis.google.com/js/plusone.js';
 b=document.createElement('div');
 b.id='ward_plusone';
 b.style.position='fixed';
 b.style.top='10px';
 b.style.right='10px';
 b.style.padding='10px';
 b.style.zIndex=99999;
 b.style.background='#FFFFFF';
 b.style.border='1px solid #000000';
 b.innerHTML='<g:plusone></g:plusone>';
 document.body.insertBefore(b, document.body.firstChild);
 document.body.insertBefore(a, document.body.firstChild);
})();

Source

No need for any extra remote calls and it works as far as my first tests tell me. Only downside (for now?) is the lack of a close button.

And finally, here is the link for you to bookmark: Bookmarklet.