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:

<!-- 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".

18 comments:

  1. 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

    the 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

    ReplyDelete
  2. And unfortunately +1 doesn't work if you're logged in to Google with GApps account (since GApps accounts don't have a GProfile).

    ReplyDelete
  3. Also, having to place a code in the header can be annoying (if you want to add it to phpBB for instance).
    they'd better get rid of it like Facebook.

    ReplyDelete
  4. This version of the code doesn't work for me - well actually in only works in Opera.

    ReplyDelete
  5. Great post!
    One downfall I see is it's not clear how to specify script tag parameters, for the language or for explicit loading.

    ReplyDelete
  6. @gxg:

    You'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'/> ).

    ReplyDelete
  7. For the language add the following line to the script:
    g.innerText = '{lang: "pt-BR"}';

    ReplyDelete
  8. "An even better idea is to load the Google +1 script in a non-blocking way, just like Google did with..."

    How does one accomplish this?

    ReplyDelete
  9. Hi Alex Chitu,

    Hope 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

    ReplyDelete
  10. hi....Hope all are well..
    i 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

    ReplyDelete
  11. Hi Chitu,

    Don'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.

    ReplyDelete
  12. Hello.

    It doesn't work.
    g lang = sl.

    Get javascript err.

    ReplyDelete
  13. 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.

    ReplyDelete
  14. is the new one better ?

    ReplyDelete
  15. Google's new code is almost identical.

    ReplyDelete
  16. I 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.

    ReplyDelete
  17. code Does not work on chrome :-)
    Works fine on Firefox and IE...

    ReplyDelete

Note: Only a member of this blog may post a comment.