How to add facebook Like button to multiple posts or contents

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.

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 OneAdding 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.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">

document.write('<fb:like layout="button_count" show_faces="false" width="100"></fb:like>')

</script>

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.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">

document.write('<fb:like layout="button_count" show_faces="false" width="100"></fb:like>')

</script>

And both of the codes above will automatically insert your current web page address into the like button field.

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:

<!-- start www.websiteadministrator.com.au facebook like code-->

<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("href","www.websiteadministrator.com.au");

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><!-- 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.

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 theirfb_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.