Troubles with the Google Plus One button

As always external content on your website is difficult to embed. This even applies for Google's Plus One button.

Invalid HTML code
The initial problem is that it is not valid HTML code. The g:plusone tag isn't a valid tag. The alternative is to use a div tag with the class g-plusone. That's better.

Invalid Javascript code
The second problem was with the Javascript code. For the Dutch website I need to include the script tag parameter {"lang":"nl"}. Again this is incorrect code according to validator.w3.org.

The solution for this problem was found at kompoos.nl. A Dutch site dedicated to show correct and fast working code. I love it. There I found a page about the plus one button where a trick was described to insert the required Javascript code with Javascript.

Nice code, but the result is of course invalid code, allthough the validator of w3.org is not able to detect this. However I have decided to use this trick. For the parameter {"lang":"nl"} I have added the this line of code:

google_plus.appendChild(document.createTextNode('{"lang": "nl"}'));


The result is a +1 button with Dutch text at every Dutch page of www.helenahoeve.nl.

Where to place the button
Google states that "You know your page and your users best, so we recommend putting the button wherever you think it will be the most effective. Above the fold, near the title of the page, and close to sharing links is often a good location. It can also be effective to place the +1 button at the end of an article or story as well as the beginning.". I decided to place the button at the bottom of the page, because it is not the main goal of the visitor to give a +1.

That decision was the cause of the third problem. The button was partly visible, because it was placed in the lower left corner. Yes, that's the area where your browser shows some additional information. A little CSS tweaking was necessary to prevent this.

CSS is useless
The fourth problem is that it is impossible for me to lay-out the Plus One button. The initial thought is that this should be possible by using the class g-plusone in the CSS code. Whatever I tried, it seems not possible.

Parts of the hidden button are visible
The fifth problem is that when you hide the surrounding div {display:none} there are some lines visible for the number of +1's. Due to the fact that I was not able to manipulate the Plus One button with CSS, I decided to choose for a button without the counter.

The result so far is neat. The only thing I have to do now is watching my stats.


Testing required
Dammit I should have tested this code better. It isn't working in Internet Explorer 8, or the latest version of Opera. So I fixed the problem as soon as possible by checking the availability of a script function before I execute this function.

Now I can say: The result so far is neat. The only thing I have to do now is watching my stats.


Oeps, still not working in earlier versions of Internet Explorer. It is working in Opera now, but not in, for example IE8. Due to the Javascript availability check I don't get an error message. However I don't get the button. IE8 is important because the market share of IE8 is still 35% in the Netherlands.