tags:

views:

1164

answers:

5

After adding the new facebook like button to my page, it no longer validates using XHTML strict. The two errors I come across are:

  1. All of the "meta property" tags say that "there is no attribute "property""
  2. All of the variables used in the like button line are listed that there are no attributes for it. The line is as follows:

    <fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>

+1  A: 

FBML will not validate, as it's not valid XHTML. The W3C validator doesn't know what to do with it. The errors can be safely ignored.

If you must must must have validation, you could use a <script> tag to output the FBML instead of directly including it in the page's HTML.

ceejayoz
XHTML is **X** HTML because it is e **X** tensible. w3c validator can get `fb:` tags description with proper `xmlns` specification
zerkms
I've had difficulty getting the validator to pick up extended namespaces like FBML, but that was a while ago.
ceejayoz
A: 

have you tried to add xmlns:fb="http://www.facebook.com/2008/fbml"?

zerkms
+1  A: 

you can embed html tags into script via document.write.. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/ here how to do this with an example.

timm_
+4  A: 

Here is a solution for not swapping doctype:

As zerkms suggested, adding the "fb" namespace only applies for the "fb:" attributes. The "property" attribute of the meta tag remains invalid XHTML.

As you know, Facebook builds upon the RDFa compliance, so you could use the following doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"&gt; 

Using RDFa brings more problems than the simple FB issue fix in most cases though.

as _timm suggested, dynamically writing the meta tags to the dom doesn't make any sense. One of the major uses of these fb meta tags is the FB-bot parsing of a "share" or "i like" target page (action page) to provide custom titles, images and anchor label for the facebok wall post auto population. Given that fact and given the fact that facebook most certainly uses a simple page fetch to read in the delivered html response without any capability of parsing a related meta tag inject by javascript, the intended functionality will simply fail.

Now, there is a pretty simple fix to provide a compromise between a XHTML validation and successful parsing by facebook : wrap the facebook meta in html comments. That bypasses the w3c parser and facebook still recognizes the meta tags, cause it ignores the comment.

<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
fiveDust
A: 

Just a follow-up in case anyone uses the comment method. Facebook currently honors comments, so wrapping meta property tags in comments will cause Facebook to ignore them. If you check your pages with the Facebook URL Linter you can see they don't use commented-out meta tags.

kevin

related questions