New Facebook Like Button HTML Validation

New Facebook like button HTML validation

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">

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" />
-->

Facebook Like button code causes HTML validation errors

Quote OP:

"... do I need to be concerned about the validation errors? I'm
particularly bothered about Google rankings, which I know can be
affected by the presence of errors."

I took a peak at your code and the Validation Errors.

There are clever ways, using JavaScript, to achieve perfect Validation while using the Facebook Like button code. I've done it on my sites. However, in reality, it only causes the online Validator to pass the static file through without errors. When you use JavaScript to manipulate your HTML, the DOM will ultimately end up with the same code as if you did nothing to fix the errors.

As far as Google is concerned, yes, valid HTML/CSS matters. Lately, Google's bots are even able to parse jQuery/JavaScript in order to index more dynamic content. See this answer to read a response from Google on this.

Although, concerned with coding errors, it seems that Google is able to discriminate between the severity of errors. After all, every site using Facebook's stock plugins will be in the same boat as yourself with slightly invalid code.

For your site in particular, using outdated coding practices, like tables for page layouts on the entire site is far more detrimental to your Google ranking than anything else. They are slower for the bots to parse than pure CSS layouts, and since Google rankings now take page load times into consideration, it would be a good idea to become as streamlined and modern as possible.

Finally, by far, more important than anything else, is your site's content and its presentation. Google Search is a business with one goal, to provide the most relevant & useful results for a particular search term. The best code in the world will not help the rankings of a site that forgets this principle.

Facebook like button no show

Solved.
A previous administrator of the Facebook page had set country and age restrictions. Despite they included me at all the places I was this appeared to have caused the trouble.
fb.com/yourfanpage > edit permissions

Thank you for the help anyways, I really appreciate it.

How to validate html when u add facebook like box?

I guess you're using the XFBML method. Did you try to put the XFBML code inside a CDATA delimiter? See http://www.w3schools.com/xml/xml_cdata.asp

How to create a custom facebook like button?

Doesn't it worked

<a class="fb-like" data-href="{$product.link|escape:'html':'UTF-8'}" data-width="78"  data-height="32" data-layout="button" data-action="like" data-show-faces="false" data-share="false">fb</a>

how to integrate facebook like button for dynamic content javascript

After you have appended the fb-like content into a container such as $('.container') then run FB.XFBML.parse($('.container')[0]) or FB.XFBML.parse($('.container')).

I have it implemented in a project that I have previously done.

Edited: Also make sure that the FB js is included in the page prior to your javascript FB.XFBML.parse being called.

XHTML facebook like button

I'm not sure I understand what you are going for, but I think is what you want:

<span class="fb-like" style="overflow: hidden; width: 50px;"></span>

New Facebook Like Button HTML Validation