Tutorial: How to produce valid Google +1 buttons

Tutorial: How to produce valid Google +1 buttons

Introduction

If you added a Google +1 button to your website, you certainly noticed that the Google +1 button is not valid at all. While you have the choice to not care about it and let your pages become invalid because of this button, you may also not be fully happy if you happened to include a link to validate your pages and started to receive complaints about users saying your website is NOT valid.

Source of the problem

The “<g:plusone>” tag is certainly not valid and will never be. Google also proposes to use a more standard tag using a DIV element, as follow:

<div class="g-plusone" data-size="standard" data-count="true"></div>

This is slightly better because it uses a valid XHTML element. However the validator will still complain about the “data-size” and “data-count” attributes to be invalid.

Early attempts to fix the problem

Some people came with a solution of adding the Google +1 button by replacing the “g:plusone” tag with the following Javascript code:

<script type="text/javascript">
 
document.write('<g:plusone size="standard" count="true"></g:plusone>');
 
</script>

While this does the trick for a HTML page, it will throws Javascript errors if your page is served as application/xhtml+xml instead of text/xml (as recommended by the W3C), because the “document.write()” Javascript function can’t be used with XML documents.

There are also several other Javascript attempts. You could for example add the Google +1 button with the following code:

<div id="plusone-div" class="g-plusone"></div>
<script type="text/javascript">
 
var g = document.getElementById( "plusone-div" );
g.setAttribute( "data-size", "standard" );
g.setAttribute( "data-count", "true" );
 
</script>

This solution is better because it will work with XHTML pages served as application/xhtml+xml. However what is the point of your quest if you add the “data-size” and “data-count” invalid attributes, even using Javascript?

We could also  add an “xmlns:g” attribute to the HTML element to declare the “g” XML namespace, but that would not be a nice hack and there are chances that the W3C validator will still complain.

The solution

I will show you another, better, more standard-compliant way to add the Google +1 button that uses standard Javascript and XHTML code.

First add this code just before the closing HEAD section of your page:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
//<![CDATA[
{ "parsetags": "explicit" }
//]]>
</script>

Then add the following code where you want to place your Google +1 button:

<div id="plusone-div"></div>
<script type="text/javascript">
//<![CDATA[
gapi.plusone.render
(
    "plusone-div",
    {
        "size": "standard",
        "count": "true"
    }
);
//]]>
</script>

What have we done here?

First we import the Google +1 Javascript code and we set “parsetags” to “explicit” because we want to use the Google +1 Javascript API, as explained in the documentation. However, after some tests, I found that the { “parsetags”: “explicit” } line is optional.

Then we added a standard DIV element. This done, we invoke the gapi.plusone.render() method of the Google +1 Javascript API with the DIV id and a JSON object passed as parameters of the render() function. Be careful to not give the class “g-plusone” to the DIV or you wont be able to change the button appearance and use the default settings! And the magic happens. It works, and the page is now valid XHTML!

Conclusion

That’s all we need to do to produce a XHTML valid Google +1 button that work for everyone. This tutorial shows how it is easy to implement a valid and reliable solution that work for everyone. The tutorial is now over! However, if you want to know how to load the Google +1 button asynchronously, here is how.

41 Responses

  1. Brandon says:

    Thanks for the tutorial. I’m trying to implement this on my site and I changed “size”: “standard” to “size”: “tall”,

    It still renders the standard size. Any ideas? I’ve read through the documentation and double-checked the code; everything appears correct.

    Thanks in advance.

  2. johnny says:

    Same here; I prefer a small size and no count. But despite the documentation and double-checking the code, everything keeps appearing with the initial values.

  3. I confirm that the size setting does not work. I am now investigating to find why.

  4. Okay I think it is ignoring the “{ parsetags: ‘explicit’ }” and so renders the +1 button before we call the render() method… Still investigating.

  5. I found the solution 🙂 Now updating my article.

  6. Brandon says:

    Awesome! Thanks for tracking that down. Much appreciated.

  7. Peter says:

    Nice Gabriel!! Thanks for sharing man..

  8. I’m glad you appreciate it! 🙂

  9. Trisha says:

    Hi! I was just wondering how I could be able to specify the href attribute with your solution? I have an index page that has multiple google plusone buttons and I was wondering how I could differentiate them from the other. Thanks!

  10. Hi Trisha,

    I think you can simply replace the following section of code:

    gapi.plusone.render
    (
    'plusone-div',
    {
    "size": "standard",
    "count": "true"
    }
    );

    with:

    gapi.plusone.render
    (
    'plusone-div',
    {
    "size": "standard",
    "count": "true",
    "href": "http://www.example.com/canonicalurl"
    }
    );

  11. Danxyeal says:

    Hi I’m glad someone is getting all over this. Unfortunately the first javascript line in the head throws an error for the HTML5 validator:
    “The text content of element script was not in the required format: Expected space, tab, newline, or slash but found { instead.”

    See full validation here: http://validator.w3.org/check?uri=www.alexpap.com&charset=%28detect+automatically%29&doctype=HTML5&group=0

  12. Hi Danxyeal,

    As said in the article, you should enclose your Javascript code with:

    //< ![CDATA[ and //]]>

  13. Danxyeal says:

    Oops i missed that – you rock!

  14. Miguel says:

    Tried your solution and works like a charm. You’ve saved me quite a headache.

    Many thanks!

  15. Hi sminutoli,

    1. You are using document.write which is bad for a number of reasons.
    2. Read the “Notes” section of the article to find why it does not validate.

  16. sminutoli says:

    Gabriel, thanks for the answer, but as you can see in the validation page, the error is located in line 16, the tag with {lang:’es’}

    I try with CDATA and nothing…

    Thanks

  17. sminutoli says:

    The asyncrhonic solution works for me, with this little adaptation for the language settings:

    gp.innerHTML = “{lang:’es’}”;

    Thanks a lot!

  18. Farneville says:

    Hi Gabe looks great and validated successfully by w3c but it only shows one button on my homepage though I want it appear on all my post and render each url automatically. I think Trisha was asking the same but you gave her manual way of doing it. Just in case you want to check my site it’s http://www.farneville.com see how the tweetmeme button is displayed I would to replace it with the plus one button.

    Thanks,
    Caesar

  19. Mustafa says:

    Hi,

    It worked perfectly.

    Thanks from Turkey
    M. Arslan

  20. MangDe says:

    Thanx for your tips, it works perfectly, can i ask you a question? is it possible to put two google+ button in one page with that tricks? for example i wanna put the tall size button on the post body and the small button on the top(header part)
    thank you

  21. debpjit says:

    great work mate works like a charm \m/

  22. Jamieson Christian says:

    The only thing that bothers me about this approach (which is also published on the Google +1 reference at http://code.google.com/apis/+1button/#example-explicit-load) is that combining inline and externally referenced JavaScript in the same element is not supported under the HTML 4.01 specification:

    “If the src has a URI value, user agents must ignore the element’s contents and retrieve the script via the URI.”

    HTML 5 is not so explicit, but does not appear to define behavior for this scenario. Consequently, this solution may not work on future browser versions.

  23. @Farneville, @ManDe: You will have to adapt the Javascript code to be able to do that, but basically this is the same answer as I gave to Trisha.

    @Jamieson Christian: You are right, I didn’t know that, so you can put the JSON code into a preceding SCRIPT element and hopefully it should work (not tested yet).

  24. Martin Sach says:

    This solution worked well for me until I applied absolute positioning to the DIV, by CSS in the page header. The result of doing that seems to be that although the button is still in the right place, it is no longer clickable. (Tried in Firefox and IE9). The CSS applied to the DV does not have any content other than positioning. Now I am going back to the drawing board!

  25. Jennifer says:

    Thank you! This helped me!

  26. CoursesWeb says:

    Thank you for this article. It is useful.
    With respect, Me.

  27. SearchMarketingGroup says:

    Great Article… Now that Google has once again updated the snippet and has now added Asynchronous loading how can the above code be modified to load Asynchronously?

  28. Digital Extreme Media Group says:

    Thanks worked like a charm! Problem Solved for my website.

  29. Mi Divorcio Express says:

    Very thanks, Our problems has been solved in our page http://www.midivorcioexpress.com with your code. Great!!!!

  30. Steve Cooper says:

    Thanks Guys,
    Been searching everywhere for EXACTLY the solution you provide. Keep up the good work!

  31. trudy says:

    Thanks,

    It worked for me and i had been trying to sort it out for ages

  32. PC-Health says:

    Hello, thank you for this tutorial.
    The +1 button is XHTML valid with your code, but does not count.
    Some weeks ago it stopped to count more than 11. Wenn you click it shows 12, when you reload page it goes back to 11.

    This is the site: http://www.cristiane-festas.ch

    Thanks in advance for any help.

  33. James A says:

    Thanks alot guys, gave you a plus one, and linked to you from my websites blog.

  34. Web dizajn Beograd says:

    I found a lot of great stuff here, thanks. I will continue to follow your blog for sure.

  35. Greg Thompson says:

    I love it, your solution was plug and play and now my page validates without the need for all sorts of IE conditionals and various other hacks. I implemented you G+ button code on this mortgage calculator tool I’m building here: http://www.searchlawrence.com/mortgage_calculator/

    I always like to make sure by HTML validates, so this has been a problem I have been dealing with since G+ buttons were first offered. Now I need to find time to go and patch all by other code…

    Thanks – Greg

  36. John Henry says:

    I am using Front Page. Every time I insert any of the scripts here or from Google’s own step by step process I see the code visible on the web page. Can anyone assist. I am a wysiwyg type of guy! thx

  37. chinchibilin says:

    Had to asynchronously load about 30 g+ buttons, this helped make the load don’t feel like a browser hiccup anymore. Thanks!

  38. Andrew says:

    Hi, I put the code in just as requested but I still get the same problem as with the other versions. It adds the +1 for a few seconds and displays the snippets box for a few seconds nad then reverts to 0 with an exclamation mark in the +1 box. Any ideas on how to fix this. I have it on my products on my website http://corset.ie
    Thanks,
    Andrew

Leave a Reply

Your email address will not be published. Required fields are marked *


*