How To Add Facebook Like Button For Website

Not long ago, Facebook introduced new social feature for website and one of the popular feature is the 'Like' button. The Like button (Or 'Recommend') enables users to make connections to the website and share content back with their friends on Facebook with one click.



The basic Like button is available via a simple iframe, or a fuller feature via XFBML tag which requires use of JavaScript SDK.

To customize how website shows on the user facebook, website developer could add meta data on the page:

og:title - The title of your page; if not specified, the title element will be used.
og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

For example if you are creating a page about the movie 'The Rock' you would include this meta data:

<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Using iframe method is the simplest and easiest way to integrate this facebook like button in your website, simply copy the html code below and paste it on your website/blog.

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http://blog.neugan.com&layout=standard&
show_faces=false&width=450&
action=like&font&colorscheme=light
&height=30" style="border: none; height: 25px; overflow: hidden; width: 450px;"></iframe>

*Change the web address to your web address according.

Facebook actually let you customize the button in a few way,
action=like / action=recommend
layout=standard / layout=button_count
show_faces=false / show_faces=true
colorscheme=light / colorscheme=dark
font=arial (variety of standard html font selection)

If you decide to use the fuller feature Like button via XFBML tag, the code is similar like below,
<fb:like href="http://blog.neugan.com" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" />

Remember that the XFBML tag requires Facebook JavaScript SDK to enables you to access all of the features of the Graph API and provides richer set of client site functionality.