Daily Archives: June 1, 2010

Social Media

How to add a Facebook ‘Like’ button to your Website

You may have read about Facebook’s ‘Open Graph‘. This is Facebook’s attempt to takeover the web / make the web more social (delete as appropriate).

Put simply, the Facebook ‘Open Graph’ gives website owners the opportunity to add a Facebook ‘like’ button to their website. Here at WebEden.co.uk we added one last week to the bottom of our website builder homepage. It looks like this:

If you click on a the Facebook ‘like’ button, it automatically adds a status update for you in Facebook which tells your friends that you like WebEden.co.uk. Try clicking it to see what happens (not this one, the one on the homepage).

This is a great way to use Facebook to spread the word about your website, by getting your website visitors to promote your site to their friends and contacts.

You Can Do it Too

And the good thing is, that our HTML Guru Raybo has come up with some code for you to do this too.

If you want to add a ‘like’ button to your WebEden website, just follow these easy steps:

1. Insert an HTML Snippet

2. Paste in the Facebook Javascript SDK

3. Paste in the code of the ‘like’ button

The whole bit of code should looke like this:

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

<fb:like href="http://www.webeden.co.uk/" layout="standard" show_faces="true" width="450" action="like" font="verdana" colorscheme="light" />

Where it states http://www.webeden.co.uk you will need to change it to your website address.

Hey Presto. That should work!

Try adding a Facebook ‘like’ button to your Website, and let us know how you get on.

Published by: