Website Administrator Know How Articles

Social Networks Series

Add the FaceBook Like Button Code with Strict W3C Validation

Up dated: 23rd July 2013

Just to be clear, these copy and paste methods also work with most all HTML formats. The last one is for both, strict or transitional W3C use. This page is coded in xHTML strict and uses the third method shown on this page. You can test CSS and HTML validation through the link at the bottom of the page. Please don't forget to like this page if you find it useful.

Help! My old FaceBook Like Button is not loading anymore!

Update: Thanks for all the recommends and likes and am happy many of you have found this useful. The Like Button is Facebook's Number One "Spy-Ware" product which gathers private unique identifying intel on your visitors for every page which has a button. Your visitor doesn't need to click the like button for this to occurr. This intel is then shared with Facebook "affiliates" [no, not just for advertizing] which combined makes this the biggest online conglomerate that can personally identify the whereabouts and activities of many, many individuals, their families and friends. Also interesting is the existance of "auto-Like" bots in use on various facebook.com pages which makes those pages appear more "visited" than they really are. Ok. Let's update our code.

Many of you with old facebook like code [official or not and installed before July 2013], may think your like button has stopped working. It is working, it is just that the button no longer appears. And in their typical Facebook genius, it is simply changed a word "HREF" to "SITE" which is creating this issue. I have now changed and updated the code in the "cut and paste" Like Button code below to reflect that change.

Add the facebook Like or Recommend button and pass W3 validation.

FaceBook is one of the more popular Social Media sites at the moment and is usually included in articles that discuss Web 2.0 or Web 3.0 websites. And these websites can generally be summed up as websites that follow current fads of which facebook etc. are members. This media frenzy is usually by the same group of old websites that try to reinvent themselves by attempting to convince you that they are current and are with it.

And FaceBook must consider they are more important than the W3C standards of website coding because they use non-compliant W3C HTML coding calls. This means that integrating some of their services into your webpage includes the need to steer away from coding standard world quality websites and make them FaceBook quality websites instead.

But standard HTML allows you to side step what ever it is they are trying to do here and allows you to still add compatible code into your website without having to drop your coding standards to pass W3C validation.

If it is still valid and you would like to show the faces of those that have liked your page, a) change show_faces=false to show_faces=true, b) layout="standard" and c) width","450" (not less than) . These same rules apply to each method below.

Method One
Adding the FaceBook Like Button Code with the FaceBook Script

This is the FaceBook code to add a like button to your page. It will fail with W3C strict validation and upset HTML TIDY, but this is standard facebook code.

This code automatically links to what ever page it is placed on.

And as you can clearly see, there is no standard HTML tag fb:like nor show_faces. Even Font has long been deprecated from this sort of use in HTML. So yes, W3C failure is inevitable with this use.

Method Two
Adding the FaceBook Like Button Code with Javascript scrpit

But we can use javascript to get around the FaceBook "special" tags which still doesn't passW3C validation. Although this is cleaner code, there is another downside in that this particular method uses document.write which can also slow down the process of rendering your page. As methods one and two do make a javascript call on the facebook site, this difference may very well be negligible.

And both of the codes above will automatically insert your current web page address into the like button field. OK, so One and Two are the same now-a-days. The new official #1 is actually more like #3 but it still wont pass as "valid" code which is the whole point of this article.

Method Three
W3C validation
Adding the FaceBook Like Button code using Javascript script without Document.Write

But if you want to avoid using the document.write javascript method code or if you want to code your page so that it will pass W3C validation, then use this neat bit of code i stumbled upon a little while back. This is the code used for the like button near the top of ths page. You can click to like or unlike this page as many times as you want to test if it works:

<div id="FaceBookLikeButton">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var fb = document.createElement('fb:like');
fb.setAttribute("site","www.websiteadministrator.com.au");
fb.setAttribute("action","like");
fb.setAttribute("layout","button_count");
fb.setAttribute("show_faces","false");
fb.setAttribute("width","100");
fb.setAttribute("font","arial");
document.getElementById("FaceBookLikeButton").appendChild(fb);
//]]>
</script>
</div>

This last method also expects that you would alter the code to suit your own exact page url into the code each time you use it. After the page attracts some Likes, a number box will appear next to the button to display how many of these your web page has attracted.

You can copy and paste the facebook code from any of the code boxes above into your html. Only the last one needs a little editing for your correct uri.

How to add the FaceBook Recommend Button

Simply change the "action" from "like" to "recommend" in the above code.

Method Three for PHP enabled websites
W3C validation
Adding the FaceBook Like Button code using Javascript script without Document.Write

If you have (or suspect you have) PHP working on your site, you should try our automatic cut and paste code which will add the correct and exact internet location of any like button webpage for you. This code also passes strict validation and you can then use that same peice of code for your whole site without having to edit the code on each page to add the exact url each time.

That's pretty simple.

Now, it should be mentioned that we should all be very grateful that the guys at facebook didn't copy an operating system... you know, when you give a kid a new toy they'd rather play with the box it come in... so it might just happen that the Like button causes some grief with their link back to your page, no matter which method you choose. There is a work around for their fb_xd_fragment hiccup for apache users if it is still a problem.

Now, with all that said, you can read our how to article to add the google +1 button which is pretty easy to implement and technically more advanced.

FaceBook Like Button Cache Error

If you see the wrong website in your message when you go to share a website page, you most likely have a Cache Error at the FaceBook website for your FaceBook Like Button. If this is you, read out article on Fixing the FaceBook Like Button Cache Error.

Facebook like button declared illegal

Eurozone:Germany.
19 Aug 2011 www.thelocal.de/sci-tech. Germany edition.
Old article, but interesting reading and very valid. Why do we allow FaceBook to track every visitors' browsing habits when so few people actually use these buttons. Each active button slows the load time of our site. Wouldn't it be smarter to simply activate such buttons when the user actually wants to "Like" the page or to "query" how many likes the page has? Luckily, I use Ghostery with everything set to "block" and it does stop thousands of integrated "stalker-ware" Co's such as facebook and twitter from knowing my every move because of people like us.

test if this page passes W3C CSS & HTML validation
(opens in a new window or tab)

Fin.

Website Administration Services

WebsiteAdministrator.com.au