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.
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.
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.
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.
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.
<!-- start www.websiteadministrator.com.au facebook like code-->
var fb = document.createElement('fb:like');
</div><!-- end www.websiteadministrator.com.au php facebook like code-->
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.
Simply change the "action" from "like" to "recommend" in the above code.
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.
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.
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)