How To Embed Like Button In Your Website

Have you seen most websites have Facebook Like button? Have you ever wondered how the webmasters do it? Facebook Developers have several plugins that are helpful to make your website good looking and can interact to your visitors.

What is really a Like button? The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

This is a simple tip on how to embed Like button in your website. Of course you need to have a website first before you can place this button in it. Normally Like buttons are placed on top-left of a page.

What you need to do now? Please follow the steps below:

Let us assume that the URL of your site is http://www.mysite.com.
Select a page from your website to where you want to place a Like button.In our example, we will select the home page (index.html).
Open your index.html using your preferred html editor (I'm using Dreamweaver 8).
Click here to go to Facebook Developers page.
Type-in the URL of your site (http://www.mysite.com) in Steps 1 URL to Like.
Change the default settings if you want. Here is an overview of the settings:

Send Button (XFBML Only) - this is checked by default. Send button is available only on sites that uses JavaScript SDK. Unchecked the the box if you don't want to include the Send button or if you don't know what JavaScript SDK is.
Layout Style - determines the size and amount of social context next to the button. Options are:

Standard
Button Count
Box Count

Width - the width of the plugin, in pixels.
Show Faces - show profile pictures below the button.
Verb to display - choose either Like or Recommend.
Color Scheme - the color scheme of the plugin. Choose either Light or Dark.
Font - the font of the plugin.

Now click Get Code button and wait until Facebook finished loading the plugin code.
There are three types of codes that you can select. HTML5, XFBML and IFRAME.
Select HTML5 and you will find two codes to be placed in your index.html.
Copy the first script and paste it in your index.html right after the <body> tag.
Copy the code of the plugin and paste it to where you want the plugin to appear in your index.html
Save your file and open it in a browser to check if the Like button is visible.

Now that you have your Like button in your website, every time a visitor drops by and clicks the Like button, a story appears in the user's friends' News Feed with a link back to your website.