I have recently added the facebook “like” button to a website of mine, iPods Repaired, so I thought I would outline the process.
One thing that got me was how simple it was. Facebook provide the tools to build the button its just a matter of adding the code to the website. The tricky bit was finding the right information, lets face it, having Facebook in a search term throws back thousands of results.
I came across the Facebook developers page and it really couldn’t have been easier. Of the 2 options available I chose the javascript one. The first option and probably the easier of the 2 is using an iFrame but something in me just says no to iFrames if possible, plus I’m not one for the easy route.
There are 2 pieces of code to add to your site, the button code and the javascript code.
Firstly we need the button code so all thats required is to fill out the little form (see picture 1.1) and click the get code button.
Picture 1.1 - Adding the like button
Now this will only really benefit one page as the url is fixed in the widget. If you want to add it to multiple pages with each page having its own unique button then you need to amend the code slightly. Using PHP this is done by getting the current uri and url as follows.
The code will look something like this:
Add the following just above the point where the face book code will go and change the “Your URL” bit for <?=$url;?>.
$url = “http” . ((!empty($_SERVER['HTTPS'])) ? “s” : “”) . “://”;
$url .= $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
?>
This code gets the current page uri so each page the button sits on has its own unique “Like” option. This works well for pages where content is significantly different and specific, like an e-commerce site or blog.
Now the second part is the javascript code:
<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>
This little snippet can be found on the Facebook developer site too. Just add both pieces of code to your website and there you go!
