Adding Facebook Like button on Website is as easy as 1-2-3

I was using a Plugin for Facebook Like button. It was working but not correctly. I cannot add comment using that. Only Like functionality was working. I tried to fix that was cannot. Recently I tried to get code directly from Facebook and it is very easy to setup.

For adding Facebook Like Button as you see below the post content, just add the below code on your page.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo 'http://www.satya-weblog.com'. urlencode($_SERVER['REQUEST_URI']);?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Replace "http://www.satya-weblog.com" with your web address. If you are using different server side language then remove PHP tag and put your way of doing the same stuff. Easy, right?

For more follow the documentation and online tool on Facebook.

Update (29/08/2010): Iframe version does not give option for Comment with like button. First day it was working when I have added it and written this post. After that when I checked then I cannot comment with "Like". So, allowing Like plus comment, I have tested FBML version. It is also easy.

Advantage with the Iframe method is - it is easier to use and you do not have to bother for creating Application. I saw few very busy sites are using this method. May be it is faster than the FBML. Earlier I have tired the FBML method with Facebook connect and it was really slower. Today with the code discussed below, I does not see any problem. Also, one you add the FBML JavaScript, you will use the same code for other FB widget/plugins.


<fb:like show_faces="false" width="300" font="verdana"></fb:like>
<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>

Line 1 is the code which display the Like button. So, place it where you want your Like button to show up. All other JavaScript code (line 3-15) are for enabling the FBML on your page. 'your App ID' is the Application ID you need to get for this to work. You will get the Application ID when you register for your Application. To register your application head towards - http://facebook.com/developers/

Update (09-09-2010): I have tried the FBML method as this gives option for comment and also I thought that once I can have FBML JavaScript part then I can use that in Fan plugin also. But the FBML code was not working in IE. So, I have replace it with IFrame.

Comments are open for an year period. Please, write here on Facebook page.