Add a Facebook Like (Share) Button to Your Site

Adding a Facebook Like button to your site is a great way to let visitors share your site with their friends.

Get started by going here:

http://developers.facebook.com/docs/reference/plugins/like

There is a form on this page that you'll use to setup your like button.

First, enter the address of your site.  If you leave this field blank, people who click your like button may end up liking something else entirely.

If you have a Facebook Fan Page and prefer visitors Like that page as opposed to just Liking your site, enter the address of that page instead.  The address of your FB fan page will always be facebook.com/thenameofyourpage.  

Make sure the Send Button option is turned off / unchecked.  This is a new option from Facebook that we don't currently support. 

Then select your layout style.  This will change the example layout shown to the right of the form. 

Decide whether or not you want to show the faces (profile pic thumbnails) of some of the people who've liked your site.  The design usually looks cleaner if you uncheck this box.

Set the width of the like button and description.  This defaults to 450 with the standard design (which would work just fine with most sites), but you may want to make it narrower if you're placing this in a 2-column layout or sidebar. 

Choose a button that says Like or Recommend, which font you want to use and a light or dark color scheme.  Then click the Get Code button to see the code you'll be adding to your site.

You may be prompted to "verify your developer account" at this point.  If so, the first step to take is just to log in to FB and enter all the above info again.  You usually won't have to verify if you're logged in.

If you're still prompted to verify, then you'll need to provide a cell phone number where FB can text you a verification code.  See their help site to read their explanation behind requesting this info.  

Regardless of whether or not you're prompted to verify, once you're able to click the "Get Code" button, you'll be presented with a dialog box.  

Select the iframe code and copy it.  This is important as the XFBML code will not work properly. 

Open your site in the editor and drag a Custom HTML element to a page.

Click within the element and paste the code there. 

Click out of the element and you'll see the like button with what may be a lot of extra white space beneath it.  If you do see a lot extra white space, pay this no mind as it will disappear after you publish the site. 

You're now ready to Publish this to your live site.  Once you do, you'll see your Like Button there waiting for you.  As people Like your site, you (and everyone else) will see how many have liked it.  And if people have previously liked your site on Facebook through some other Like button, you'll see that reflected in the numbers here. 

You can use this same button code on as many pages as you want.  That way visitors can like your site no matter which page they're on.