June 7, 2011
Better Embedding Code for Google +1 Buttons
Google wants to see a +1 button on each Web page, but many people hate embedding widgets and buttons because they clutter pages and add hundreds of milliseconds to the page loading time.
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:
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".
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".
Subscribe to:
Post Comments (Atom)
18 comments:
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
Reply Deletethe 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).
Reply DeleteAlso, having to place a code in the header can be annoying (if you want to add it to phpBB for instance).
Reply Deletethey'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.
Reply DeleteGreat post!
Reply DeleteOne downfall I see is it's not clear how to specify script tag parameters, for the language or for explicit loading.
@gxg:
Reply DeleteYou'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:
Reply Deleteg.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..."
Reply DeleteHow does one accomplish this?
Hi Alex Chitu,
Reply DeleteHope 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..
Reply Deletei 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,
Reply DeleteDon'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.
Reply DeleteIt 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.
Reply Deleteis the new one better ?
Reply DeleteGoogle's new code is almost identical.
Reply DeleteGoogle +1 is the future of the SEO.
Reply DeleteI 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.
Reply Deletecode Does not work on chrome :-)
Reply DeleteWorks fine on Firefox and IE...
Note: Only a member of this blog may post a comment.
[フレーム]