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

18 comments:

  1. AnonymousJune 7, 2011 at 9:32 AM

    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. AnonymousJune 7, 2011 at 9:39 AM

    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. UnknownJune 7, 2011 at 9:39 AM

    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. George B. MogaJune 7, 2011 at 11:28 AM

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

    ReplyDelete
  5. mikeJune 7, 2011 at 12:01 PM

    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. Alex ChituJune 7, 2011 at 12:19 PM

    @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. MaujorJune 7, 2011 at 12:37 PM

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

    ReplyDelete
  8. AlexJune 8, 2011 at 7:12 AM

    "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. YousafJune 13, 2011 at 2:11 PM

    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. vijayJune 15, 2011 at 11:27 PM

    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. AnonymousJune 22, 2011 at 6:36 AM

    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. faca5July 2, 2011 at 4:42 AM

    Hello.

    It doesn't work.
    g lang = sl.

    Get javascript err.

    ReplyDelete
  13. Google Plus 1July 15, 2011 at 12:16 AM

    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. AnonymousJuly 28, 2011 at 3:56 AM

    is the new one better ?

    ReplyDelete
  15. Alex ChituJuly 28, 2011 at 4:23 AM

    Google's new code is almost identical.

    ReplyDelete
  16. Miguel | lorosJanuary 9, 2012 at 5:38 AM

    Google +1 is the future of the SEO.

    ReplyDelete
  17. Google Plus OneMay 17, 2012 at 9:12 AM

    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
  18. Old KotikOctober 14, 2012 at 8:30 PM

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

    ReplyDelete

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