Multiple W3C Valid Facebook Like Buttons

This is an update to my W3C valid Facebook Like Button script that provides the ability to use multiple Facebook Like Buttons on a single page such as a category listing with the added benefit of being W3C valid.

This version named Multiple W3C Valid Facebook Like Buttons has some exciting new features:

  1. The ability to use a single button or multiple buttons across a page. This useful for category pages where multiple like buttons need injecting into a web page.
  2. A new write method for displaying the like button that speeds up performance.

About my script

The standard files provided by Facebook for the Facebook Like button are not W3C valid, which if you are like me and you strive for perfection; will make you annoyed and wishing for coherent web standards. Well don't stress! I have created a simple Facebook like button that is W3C valid and sits nicely within the page, allowing for asynchronous transfer of the Facebook JavaScript files so your site won't feel the impact of downloading the script from Facebook.

Try it for yourself and download the multiple-facebook-like-buttons.zip at the bottom of this page. And please give me some credit or at least click my Facebook like button at the top of this website - I need the love too you know...

Enjoy!

Instructions

1. Open the facebook.js file and edit the API details within the fbAsyncInit function:

window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};

To get new Facebook API details you should visit the Facebook developers page at: http://www.facebook.com/developers/ and sign up to the service. After this is complete, you should be at your developer profile page, if so click the 'Set Up New Application' button. Alternatively Facebook may ask you to create your first app. Follow the instructions for both options and create a new Facebook application by providing a name such as 'My Website Like Button' and agree to the Facebook terms, then click 'Create Application'.

You will now have an App ID to use when editing the fbAsyncInit function. Copy the provided Application ID numerical string paste it into the fbAsyncInit function, overwriting the text 'your app id'.

Next edit the text:

innerHTML = '<fb:like href="https://www.jnorton.co.uk/'

Replace my domain name with yours.

You will need to do this for both the 'single' button mode and 'multi' button mode

Finally, go back to the Facebook page and click the 'Connect' tab on the application edit screen of your newly create FB app. Enter your website URL in the text field labeled 'Connect URL'.

2. The provided JavaScript (facebook.js) should be included within the BODY of your HTML document using the folllowing markup:

<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="/js/facebook.js">
</script>

This will include the facebook.js JavaScript file that is located within the js directory on your server's public HTML root. If you don't have a folder called this, create one using an FTP client and upload the facebook.js file to this folder.

That takes care of web page integration.

If you need more help then let me know. As it stands the Facebook like button is great to use but could be improved technically as it makes a web page behave strangely at times.

File attachments