The problem with requesting the URL from the server is that it returns the URL that the server uses (the ugly one, the one that hasn't been re-written), and when it comes to links and search engine optimisation, it pays to keep links to your site consistent. The answer is to supply your Facebook Like button with a URL generated by JavaScript. More about this at the bottom of the article, but for now, let's get started with adding a basic Like button to your website.

Start by visiting Facebook's Like button generator. Play around with the wizard to generate the style of Like button you desire. Get the code that's generated when you're happy.

1) Get the code as an iframe

2) Get the code as XFBML, Facebook's markup language

Use option 2. The Like button will have better facilities, like the ability for the user to include a comment when they click "Like". We also found that the iframe had a few display issues, and what's more providing it with a dynamically generated "src" attribute seemed to mess around with it unpredictably.

So, you should have a piece of code like:

Put this code where you want your Like button. This code may look useless at the moment, and indeed on its own it is. You need to include the JavaScript SDK for Facebook on your page.

Reading the Facebook documentation, it doesn't seem immediately clear which is the best way to include the JavaScript SDK in a website. Facebook advises that the most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. To us (and most) this means dumping a piece of code right there on the page, just above the XFBML snippet provided by facebook (an example of which is provided above).

The JavaScript SDK can be incorporated onto the page by including the following code. This code has been retrieved directly from Facebook's JavaScript SDK documentation page.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Note (and leave) the HTML <div> tag placed above the JavaScript.

Asynchronous loading allows all of your content to load before or at the same time as the Like button. This can be important, because generally the Like button will take some time to load.

We need to add a new attribute to the XFBML element provided by facebook. Give the snippet an "id" attribute. This will enable us to call a JavaScript that can identify and change values in the snippet. In this example, we've given this element the ID, 'fb':

Somewhere on your page, but below this snippet, place the following JavaScript: