Valid Google +1 xhtml code that doesn´t slow page load speed

October 21, 2011 Social Networks

You probably by now have heard the term “+ one” or “Google + 1” lately. Google is redefining the meaning of “plus one” as plus one now means this website, page, article, information is important. Plus one is Google’s answer to the “Like” button or Twitter’s “Follow” button and it will basically count as an ‘up’ vote.

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 some are reporting that this slows their page load speed significantly.

So to take the plus one button from Google to the next step and make the code xhtml compliant, you have to replace the following:

<g:plusone></g:plusone>

With this next line. Please note that the html id value can actually be whatever you want.

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

Then place the link to Google’s Javascript right at the end of your page, just before the body tag ends:

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

After calling the Google plus one API you will nead to call some javascript to insert the button in place.

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

Note that the “plusone” used here is the same “plusone” id we used in the div. The rest of the attributes: size and count, are just used for styling purposes.

If you like, you can go even further an place a div around the button div itself and set the size of the button. This is used so that the place for the div to be hold in your template be before the button loads. So the code of your div for the valid plus one button will be like this>

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

If you chose to use this additional div, yo will also have to insert a small line in your .css file to set the width and height of your second div.

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

Conclusion
Using this code instead of the normal Google +1 code will not boost your site loading speed, but will maintain it exactly the same as the +1 button will be load after your theme and content is loaded.

Google+,