Adding a facebook ‘Like’ button to your site is very easy but the code Facebook gives you doesn’t validate correctly.
Here’s an example of how to add a facebook button with valid code. Using this method will make your JavaScript load after the entire page has loaded. Faster loading pages makes everyone happy.
The original Facebook widget looks like this:
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<fb:like></fb:like>
and the iframe version:
<iframe src=”http://www.facebook.com/plugins/like.php?href=YOUR_URL”
scrolling=”no” frameborder=”0″
style=”border:none; width:450px; height:80px”></iframe>
There are 2 problems with the first code for validation:
- The script tag needs the following attribute to validate
- The ‘fb’ tags are not valid.
Go on Facebook website and find the Like Button. Read the documentation.
After adding a facebook like button on my page, it no longer validate using XHTML Strict.
Iframe isn’t included in html strict. For validation, try using the object element instead.
What if I really want that this code validates XHTML Strict and HTML5? Ok, after hours of reading, I finally found a solution to get a valid page with a Like button.
Facebook Like Button
JavaScript Solution: Asynchronous.
The JavaScript widget is written asynchronously. Asynchronous means that my web page content will load before any of the Facebook objects. Try this:
<script type="text/javascript">
//<![CDATA[
(function() {
document.write('<fb:like width="250"></fb:like>');
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
s1.parentNode.insertBefore(s, s1);
})();
//]]>
</script>
If you’re not happy with editing your website code, we would be happy to add this for you, simply contact us.
Hope this was usefull. If you faced any problem, please leave your comment here.