Google is obsessed with speed and performance, but it didn't do a good job at optimizing the code for embedding +1 buttons. As Aaron Peters explains, Google's code blocks page loading if you place it inside the <head> 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 is not 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.
Here's a better embedding code suggested by Aaron:
<!-- 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. There's a workaround, but you shouldn't use it if you aren't familiar with HTML and editing Blogger's template. 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'/>.
As Google explains, "most browsers will load the code in parallel with other scripts on the page, thus reducing the web page load time".
hi thanks for the optimized code but i happen not to be an expert guy in the software field. it would be nice if you provide more information regarding placement of the code such as
ReplyDeletethe first part to appear before /body tag
and the second part before or after ....
looking forward to your response so that i can install it easily
And unfortunately +1 doesn't work if you're logged in to Google with GApps account (since GApps accounts don't have a GProfile).
ReplyDeleteAlso, having to place a code in the header can be annoying (if you want to add it to phpBB for instance).
ReplyDeletethey'd better get rid of it like Facebook.
This version of the code doesn't work for me - well actually in only works in Opera.
ReplyDeleteGreat post!
ReplyDeleteOne downfall I see is it's not clear how to specify script tag parameters, for the language or for explicit loading.
@gxg:
ReplyDeleteYou're right, I updated the post with a workaround. For some reason, Google disables some of the code if there's a meta tag included by default in all Blogger templates ( <meta content='blogger' name='generator'/> ).
For the language add the following line to the script:
ReplyDeleteg.innerText = '{lang: "pt-BR"}';
"An even better idea is to load the Google +1 script in a non-blocking way, just like Google did with..."
ReplyDeleteHow does one accomplish this?
Hi Alex Chitu,
ReplyDeleteHope you are well.
I have written a blog post on adding Google +1 with valid HTML5 markup in a non-blocking way.
I hope your visitors will find it useful, here is the link:
http://www.elevatelocal.co.uk/blog/how-to-add-google-1-button-plus-one-html5-02063128
hi....Hope all are well..
ReplyDeletei written a blog ,How to add Google +1 button in Blogger and wordpress..plz visit
http://vbdotnetaddict.blogspot.com/2011/06/how-to-add-google-1-button-in-wordpress.html
Hi Chitu,
ReplyDeleteDon't know exactly what is the reason but your blog has stopped loading on chrome for me in last 2 weeks. I am on the dev channel. I strongly feel it stopped loading since you added +1 to your page.
Hello.
ReplyDeleteIt doesn't work.
g lang = sl.
Get javascript err.
Google is a slow introduction, beginning with research in English on Google.com. You can give it a spin right away - log in to your Google account, you can visit the Google Experimental Search and activate a service.
ReplyDeleteis the new one better ?
ReplyDeleteGoogle's new code is almost identical.
ReplyDeleteGoogle +1 is the future of the SEO.
ReplyDeleteI get an error when using the code above, are you sure it's still working? I'm really looking for alternative to google's version of the code that is more lightweight for my website.
ReplyDeletecode Does not work on chrome :-)
ReplyDeleteWorks fine on Firefox and IE...