Jul
27
2012

Valid Facebook Like Button in HTML5

By Gabriel Harper Posted in

If you tried adding the Facebook Like button to your website and you’re using HTML5, be prepared for invalid markup failures in your HTML validator. The button should still render in browsers, but the XFBML tags are not considered valid HTML5. Thus, when you validate as HTML5, you’ll see validation errors like this:

1
Element name fb:like cannot be represented as XML 1.0

And possibly:

1
Element fb:like not allowed as child of element div in this context.

The problem is that you’re using the XFBML code to render the FB like button. Fortunately, there’s now a simple(ish) solution.

Ignore all other deprecated blog posts about doing funky things like document.write(), or training voals to fix your code.

Facebook has the option of grabbing HTML5 valid code when you create your Like button. After you click the “Get Code” button, you should see the HTML5 option.

fblike-html5_m

It’s a little code heavy, you need to slap some extra JS in your page to load the JavaScript API, but it works a charm.

About The Author

Gabriel Harper

Gabe is the owner and founder of Intavant, and contributes to Intavant Blog regularly with his expertise in design, development & business.

Did you find this article helpful? Please subscribe!