Is it possible to validate the xmlns:fb (Facebook) attribute?

Asked 1/1, 2012 at 22:33 Answered 17/12, 2012 at 12:10

I have a Facebook Like button on my site and as such also have the xmlns:fb attribute on the <html> tag:

<!DOCTYPE html>
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">

However, when running my site through the W3C validator, I get these errors:

Line 2, Column 61: Attribute xmlns:fb not allowed here.

Line 2, Column 61: Attribute with the local name xmlns:fb is not serializable as XML 1.0.

Line 222, Column 72: Attribute fb:like:layout is not serializable as XML 1.0.

Line 222, Column 72: Attribute fb:like:layout not allowed on element a at this point.

It is my understanding that using the xmlns:fb attribute adds fb to the document namespace, so that using any <fb: element is valid. Is that not the case? Is it a HTML5 issue?

I also have similar validation errors with the Twitter button, is it possible to fix those as well?

Line 223, Column 53: Attribute tw:via is not serializable as XML 1.0.

Line 223, Column 53: Attribute tw:via not allowed on element a at this point.

Earth answered 1/1, 2012 at 22:33 Comment(0)

There is no way to validate xmlns:fb with HTML5.

However, you can use the new data-...-attributes, which were added by Facebook and are valid HTML5, as described here.

This is an example of how you can use this extension in HTML5 (assume all code is in the body element):

<h3>Members</h3>
<embed data-fb="login-button" data-show-faces="true" />
<h3>Recent activity</h3>
<embed data-fb="activity" data-site="***" data-width="200" data-header="false"
 data-border_color="#fff" data-recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
 //<![CDATA[
 FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
 //]]>
</script>

This would be the equivalent XHTML code:

<h3>Members</h3>
<fb:login-button show-faces="true" />
<h3>Recent activity</h3>
<fb:activity site="***" width="200" header="false"
 border_color="#fff" recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
 //<![CDATA[
 FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
 //]]>
</script>

Dissection answered 2/1, 2012 at 4:35 Comment(0)

Or you can now use prefix mappings.

<!DOCTYPE html>
<html lang="en" prefix="fb: http://www.facebook.com/2008/fbml">

Mesotron answered 17/12, 2012 at 12:10 Comment(1)

works.. funny me, I didn't remove the other properties. Thanks – Halfcocked 25/2, 2013 at 11:32

There is no way to validate xmlns:fb with HTML5.

However, you can use the new data-...-attributes, which were added by Facebook and are valid HTML5, as described here.

This is an example of how you can use this extension in HTML5 (assume all code is in the body element):

<h3>Members</h3>
<embed data-fb="login-button" data-show-faces="true" />
<h3>Recent activity</h3>
<embed data-fb="activity" data-site="***" data-width="200" data-header="false"
 data-border_color="#fff" data-recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
 //<![CDATA[
 FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
 //]]>
</script>

This would be the equivalent XHTML code:

<h3>Members</h3>
<fb:login-button show-faces="true" />
<h3>Recent activity</h3>
<fb:activity site="***" width="200" header="false"
 border_color="#fff" recommendations="false" />
<div id="fb-root"></div>
<!-- the JavaScript API -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- the extention script from this article -->
<script src="/scripts/fb.js"></script>
<script>
 //<![CDATA[
 FB.init({apiKey: '***', appId: '***', status: true, cookie: true, fbml5: true});
 //]]>
</script>

Dissection answered 2/1, 2012 at 4:35 Comment(0)

Recommended topics

Hot tags