Getting Google+ buttons to play nice with HTML 4.01

One of the first things I was asked to do after being away for a bit was to link in Google+ to a friends website. The website is all HTML 4.01 and will probably stay that way until HTML 5.0 is finalized and widely supported.

So I headed to the Google+ button generator to link in the button but oddly it fails to produce code that is legal for HTML 4.01 (or XHTML 1.0).

It took a little playing around to work out how to fix this and just in case you’re interested its simply a matter of:

1. Adding the Google+ javascript code into your header

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

2. Create the place where you want to render the button

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

Note: you can’t set any attributes here because HTML 4.01 doesn’t allow them, so you must set them in the javascript.

3. Call the google+ render function to draw the button.

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

We use that CSS id plusone from (2) to tell the Google+ javascript where to render. As I’m also lazy I’m creating the simplest button without any label. You can look at the Google+ javascript reference to see how to set things up explicitly.

Placing the Button

Visually aligning this button was also somewhat puzzling at first because Google+ stylesheet sets all the margins and paddings to zero. To solve this I simply wrapped the button in another div and used the following CSS to enable me to line it up with the other social media buttons:

#plusonewrapper{vertical-align: -30%; padding-left: 5px; display: inline-block; height: 24px;}

Again I’m being a little lazy here and just played with the vertical alignment to get things to line up.

Easy! But weird that Google doesn’t do this for you. Other social media sites make it very very easy esp as now I need to test this on a variety of browsers to see if it works, which is a bit of a pain (so far just tested on Chrome, Firefox and Safari).