Facebook Development for Websites – Like Buttons

This article assumes that you have followed and completed our Getting Started tutorial successfully.

So, whats next?  Well there’s no point loading the JavaScript SDK and not using it!  So in this article we are going to go through one of the more simpler Facebook Development tasks – adding a like button to our website.

‘Like’ buttons are extremely popular and having one on your site is instantly recognisable, useful and not too taxing coding wise.

To make our task easier there is also a nice little ‘Like’ button generator on the Facebook Developer site – great!

So, firstly, you need to open the Facebook Like generator page linked above.

Now, we need to customise our like button so that people can ‘Like’ our website.

The first piece of information required by the generator is easy.  It’s the domain that we want people to ‘Like’, which is also the domain that we are hosting our webpage on.  If you are using a local development server then this needs to be “http://localhost”.  For a website which is hosted online it needs to be your website domain (for example, http://www.yourdomain.com).

The rest of the information that we need to add to configure our ‘Like’ button is all down to personal preference.  The ‘Like’ button will now work for your website no matter what we add now (assuming that you have entered the correct domain above of course!).

We’ll now go through these extra options:

Send Button – Well for this one, do we want people who use our website to be able to suggest that one of their Facebook friends also ‘Like’ your website.  Tick if you would like there to be a send button next to your like button or untick if you don’t want the send button to appear.  For the purposes of being ‘social’ I would suggest that you do have the send button option ticked (which is the default setting).

Layout Style – This can either be ‘standard’, ‘button count’ or ‘box count’.  Standard is the way that you will have probably seen on many websites.  It’s longer than the other two styles but it doesn’t display a count of how many people currently ‘Like’ your website.  In the early stages of your website development (or if on Facebook your website isn’t very popular at the moment) it may be advantageous to choose ‘standard’ so as not to give your visitors the impression that your site is not popular!!  However, as I have said previously, this is down to personal preference!  The ‘button count’ and ‘box count’ styles are basically the same style apart from button count is landscape and box count is portrait (and in a box).  These styles consist of the ‘Like’ button but also a count of how many people currently ‘Like’ your website.

Width – this is quite simply, the width of your ‘Like’ button.  You can customise this so that it fits neatly into your website.  The value you choose here will depend on the design of your website.  The width value is measured in pixels (even though this not obviously indicated on the generator!).

Show Faces – this is either ticked or unticked.  If you have ticked this option it will show the faces (small profile pictures) of a random selection of people that have liked your website.  If this is unticked, the faces will not be shown.

Verb to display – this is whether you want you ‘Like’ button to say ‘Like’ or ‘Recommend’.  Seen as though this like button is going to be for our website in general I would recommend choosing ‘Like’.  If you subsequently make a like button for, for example, a product, then you may wish to choose ‘Recommend’.  This doesn’t change the functionality of the ‘Like’ button in any way.

Colour Scheme – this can be either ‘light’ or ‘dark’.  These options basically translate to ‘white background’ and ‘black background’ respectively.  Your choice will obviously depend on the colour scheme of your site, but in most cases the ‘light’ (white background) will be the most suitable.

Font – there are a number of different font styles that you can choose from so that the font style of your like button fits in with your websites design.

Having completed all the fields we are now ready to retrieve the code using the ‘Get Code’ button.  Click it now.

When the dialog pops up you need to select the app that you have created for your website (this will already be selected if you only have one app).  You need to change the drop down box after “This script uses the app ID of your app:” to the required value.

As we have already initialised our page to use the Facebook JavaScript SDK we can ignore the first dialog box of code.

The code for the like button is in the 2nd box (“2:”) and this needs to be added to the section of your HTML code where you would like (;)) your ‘Like’ button to appear.

The code for our example (using yourdomain.com) is shown below:

<div data-href=”http://www.domain.com” data-send=”true” data-layout=”box_count” data-width=”450″ data-show-faces=”true” data-font=”arial”></div>

And, hey presto, you now have a ‘Like’ button on your website :).