Google +1 valid HTML without slowing page load

Google +1 iconGoogle have recently launched their “Plus One” feature, which is part of their latest attempt to build a social networking platform to rival Facebook, known as Google+. Now I don’t like Facebook, or any social networking site for that matter. Yet I have decided to trial Google +1 buttons on some of my pages. The reason is – and this could also be what makes Google’s latest attempt more successful than previous ones – +1s are likely to be used to help order search results in the future. That could mean that sites not using +1 will drop down the search rankings.

Privacy and other wider questions aside, there are some more technical issues with Google +1, or any buttons or scripts included from external servers, for that matter. Google give two code alternatives that can be used to place the buttons on pages. Unfortunately, one is not valid HTML or XHTML at all, and the other is only valid for people using the experimental HTML5. The other issue is that you need to include a Javascript from Google’s server, and people are reporting that this slows their page load speed significantly.

So how did I resolve these two issues? The first step is to replace Google’s non-standard <g:plusone> tag with an ordinary <div>:

<div id="plusone"></div>

The ID can actually be whatever you want. Then place the link to Google’s Javascript right at the end of your page, just before </body>:

<script type="text/javascript"
   src="https://apis.google.com/js/plusone.js">
{"lang": "en-GB", "parsetags": "explicit"}
</script>

The language can be whatever you choose; the important part is the “explicit” setting. Finally, just after you load the Javascript, you need a call to insert the button in place of your <div>:

<script type="text/javascript">
gapi.plusone.render("plusone",
   {"size": "standard", "count": "true" });
</script>

“plusone” needs to be whatever ID you gave the <div>. The size and count options set the style of the button as usual.

One final refinement is to specify the size of the button to ensure a space is left for it in the layout until it loads. To do this, you can place another <div> around the one for the button and set the width and height of this in CSS. You can’t simply set a width and height for the button DIV as this is completely replaced by the Jacascript function.

<div id="plus"><div id="plusone"></div></div>

#plus { width: 106; height: 24; }

Google’s full documentation has a table of the height and maximum width for each style of button (maximum as the width can vary if there is a count following it). In fact, the code above is all on that page somewhere, although it doesn’t explain why you might want to include the button in this way.

If the button implemented as above, the user’s experience should be just as good as it was without it. Strictly speaking, the page load time is still increased, but the extra time is simply spent adding the button to the page. The rest of the layout should appear before this.

You will find a +1 button in the sidebar at the end of each blog post, and below each of my photographs. If you see something you like, you know what to do!

2 responses to “Google +1 valid HTML without slowing page load”

  1. Lee

    Thank you very much, after much googling and reading other sites, this was the solution i was looking for.

    I mean I spent several hours with no sucess, until I found this post. End of headache. Cheers.

  2. Erwin

    Thank you very much for this, I am rebuilding my websites and now I am up to validating the code. I thought adding the plusone-button will help me in the future, but I could have known ofcourse that it wil not validate since Google doesn’t seem to care about validating: google.com gives 37 errors, googl.nl (my country the Netherlands) gives 39 errors.

    Good article!

Leave a comment