Walker News

How To Finetune And Add Google +1 Button To HTML Or WordPress?

There is this official wizard helps one to easily create Google +1 button for embedding in HTML or WordPress powered site, but you might want to tweak the Google +1 button for better page load performance.

Firstly, the default Google +1 button code generated by wizard requires web browser to load JavaScript from HTTPS source. As you may know, loading HTTPS content requires stable Internet connection. If there are too many packet loss (e.g. ping result shows “Lost” of more than 5%), the page content from HTTPS source will likely wait forever to complete or the worst situation is nothing rendered at all!
If you ever experience Gmail shows loading problem and then it prompts you to select “Load basic HTML for slow connection”, you may understand the pain of accessing HTTPS content over a troubled connection.

If your page is not sourced over HTTPS (most blogs and websites are not), then you should finetune Google +1 button code to load plusone.js from “http” instead of “https”, i.e.:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Note, if your page is loaded over HTTPS, then you should use the default +1 button code, otherwise some web browsers (e.g. Internet Explorer) might display security warning when loading mixed content.

Secondly, try not putting plusone.js script at header section of HTML or at beginning of article, for the sake of page load performance. Say there is issue to load plusone.js, it might impact overall page load if that JavaScript is loaded first (since it’s in the header section) before the rest, most importantly the main content.

So, the best place to embed Google +1 button, if possible, is at footer section (e.g. footer.php of WordPress powered sites) or at section where it’s loaded after main/important content, for reading pleasure.

Thirdly, use href to explicitly specify page URL to +1. The first attempt of plusone.js is to detect the href value of “g:plusone” and the fact of parsing link rel="canonical" tag is likely incur overhead (additional step to check for alternate source of page URL) and the parsed value is subject to accuracy of canonical value (added by WordPress, for example).

Lastly, use explicit load for performance reason too (with reference to +1 button API documentation), e.g.:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{"parsetags":"explicit"}</script>

Note, this “explicit load” value of parsetags requires you to call either gapi.plusone.go(container) or gapi.plusone.render(container) method to render +1 button.

So, here is this complete example of Google +1 button code created with performance in mind (replace the page_url accordingly, e.g. uses get_permalink($post->ID) of WordPress to get current page URL):
<div id="gpon">

   <script type="text/javascript" src="http://apis.google.com/js/plusone.js">{"parsetags":"explicit"}</script>

   <g:plusone count="false" href="page_url"></g:plusone>

   <script type="text/javascript">gapi.plusone.go("gpon");</script>

</div>

You may use the official wizard to customize +1 button, such as size and whether to display count or not (my example explicitly disable +1 count):

Customize Google +1 button for websites.

Then, replace <g:plusone count="false"></g:plusone> with the line generated by wizard according to your customization (but remember to include the “href” value of g:plusone).

Custom Search

2014  •  Privacy Policy