Adding A Facebook Like Button To Your Site

If you look closely at the header of my website, under my phone number and email address, you’ll see I’ve added one of Facebook’s new Like buttons. There are all sorts of implications for Facebook’s developments in this area, not least that it moves Facebook from a destination to a platform enabling people to find things, communicate across sites without having to visit Facebook itself and thus fundamentally changing online marketing and advertising (at some point…) You can read more about how this will impact us all on the web here (Search Engine Land) and here (Web Pro News).

This post isn’t to get all excited predicting the future though – it’s to help you engage with this shift right now, by simply adding a Like button to your site and enabling your visitors to start sharing their support for you and connecting with each other – driving word of mouth and traffic to your site.

There are two methods and I’ll concentrate on the simple one – using an iFrame to add the button to your site. You could also use the XFBML method, which gives you much more control, but also requires you to be utilising the Facebook JavaScript SDK and my guess is that only the web developers amongst you will fancy that…

All you need is this page: Facebook Like Button Page. Scroll down to the form and enter the relevant details – your page/site’s address, choose a layout style (mine is Standard without Show Faces), set the width to match where you’re going to put the button on your page, choose the font to match your style and either the light or dark colour scheme. The code you will get will look something like this:

<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fianlockwood.net
&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;
font=verdana&amp;colorscheme=light" scrolling="no" frameborder="0"
allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px">
</iframe>

All you need to do is cut and paste the code into the right place in the HTML of your page/template, and the Like button will magically appear. The astute amongst you will notice that there are some things you can play with to affect the appearance, notably the use of a frameborder and the use of a CSS style to define the size and appearance of the iFrame that encompasses the button.

I made some slight alterations to the code for my site, as the button was sitting too close to the email address:

<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fianlockwood.net
&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;
font=verdana&amp;colorscheme=light" scrolling="no" frameborder="0"
allowTransparency="true" style="margin-top: 4px; border:none; overflow:hidden;
width:100px; height:25px"></iframe>

Notice that I have added an extra style element: margin-top: 4px; This gives me an extra four pixels space above the Like button, making things neater. In fact, you can add any relevant CSS style element to this, meaning you can position and size the iframe accordingly. I had to play around with the original code a bit, as it was pushing parts of my site’s design around and breaking it.

So, what are you waiting for? Get off and get people liking your site (right after you click my Like button!) 🙂