Optimized Google +1 Button Embedding Code

Last weeks, Google launched "+1 button" for webmaster to embedd on their web site/blog(s) to help visitor share their content across the Internet. diTii.com convered the official announcement here, and also shared the ways to embedd the + button blooger and other self-hosted websites/blogs.However, it turned out theat Google didn't optimized the +1 buttons embedd […]

Last weeks, Google launched "+1 button" for webmaster to embedd on their web site/blog(s) to help visitor share their content across the Internet. diTii.com convered the official announcement here, and also shared the ways to embedd the + button blooger and other self-hosted websites/blogs.

However, it turned out theat Google didn't optimized the +1 buttons embedd code. Aaron Peters explains, that Google's code blocks page loading if you place it inside the &lt;head&gt; tag, so it's better to place it before you close the <body> tag. An even better idea is to load the Google +1 script in a non-blocking way, just like Google did with Google Analytics, AdSense and Google Related Links.

Aaron also noticed that the JavaScript code isn't minified, browsers can only cache the JavaScript file for 6 minutes and there's a mistake in the code from this page: "http" should be replaced with "https" to avoid an unnecessary redirect.

Aaron suggests following embedding code:

<!-- Place this tag just before your close body tag -->
<script>
(function(d, t) {
var g = d.createElement(t),
 s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>

Apparently, the code doesn't work in Blogger by default. Luckily, there's a workaround, but it requires you to edit Blogger's template files. Basically you can replace <b:include data="'blog'" name="'all-head-content'/"> with the code generated by Blogger ("view source" is your friend), then delete: <meta content="'blogger'" name="'generator'/">.

Code for Blogger pages:

function shouldLoadSync() {
 if(window["___gapisync"] === !0) {
  return!0
}
 for(var metas = document.getElementsByTagName("meta"), i = 0;i < metas.length;++i) {
  var meta ="" metas[i];
   if("generator" ="=" meta.getattribute("name") && "blogger" ="=" meta.getattribute("content")) {
	return!0
  }
}
return!1
}

[Source:Aaron]