The is a popular feature of Facebook that have been implemented by many websites.  The widget increases traffic and helps to publicize your stuff.  The Facebook official documentation about how to do this is here: http://developers.facebook.com/docs/reference/plugins/like. In general, the process is fairly simple.

Requirement

– You should have a Facebook account (this is actually optional for this example but will be useful if you’re implementing Graph API, plus everyone can register as a Facebook developer, so why not?).
In case you don’t know, you can get an account at http://www.facebook.com.

– Once you have an account, register as a Facebook Developer.  You can that here: http://www.facebook.com/developers/createapp.php.

Step By Step Example

Once you have the requirement, we’re ready to start.  Login to your Facebook account and go to the Developer Application (it should be on your Application bookmark if you have registered as a developer.  (Click the Application button on the left sidebar of your Facebook Home, then the Developer link should appear.)

Unlike a regular Facebook Application, you do not need to Create An Application.  Instead, you can let Facebook generate one for you and just fetch the code for the widget here: http://developers.facebook.com/docs/reference/plugins/like. Scroll down and you will see a Like button creator widget interface such as shown below:

Facebook currently offers three different styles.  Let’s try the styles

button_count

This is the most compact style, it simply shows a ‘thumbs up’ button with a square bubble box indicating how many users like your stuff.  Good is your space is limited.

In URL To Like, enter the website address you want to add the button to.  For this example, I entered: https://www.permadi.com/tutorial/facebook-like-button-example/.  (Note: You can have entered the root of your site if you do not want to use individual pages.  Later on, we will use script to customize the value of this URL To Like)  Then click Get Code.

Copy the code under the iframe section and paste it into the page.  (If you already are using XFBML, then you can use the XBML version).  Click below to see the result.  You should see a paragraph of text followed by the Like button.

https://www.permadi.com/tutorial/facebook-like-button-example/

Is user clicks the Like button, the stuff will appear in the user’s Wall, like below:

It is that simple.

standard

This style is wider than button_count.

It has the benefit of allowing user to Share without having to go to their Facebook page, after they click the Like button.

Here’s an example: https://www.permadi.com/tutorial/facebook-like-button-example/sample_standard.html.  Click the Like button then mouse over the words next to the Facebook icon, the Share option should appear like above.  If you enter something on the box, it will appear on your Facebook Wall and News Feed like below:

box_count

This is the least popular style for reasons I don’t quite understand.  It’s basically a boxy style that encompasses a more square-ish rectangular-shape.

You can see an example here: https://www.permadi.com/tutorial/facebook-like-button-example/sample_box_count.html

As you can see, it’s very simple to add a Like button to your page.  However, this could be a tedious task if you have many pages.  In the next tutorial, I will show more options (such as how to associate image with the news-feed). Read on:
https://www.permadi.com/blog/2010/11/adding-advanced-features-to-facebook-like-button/