How to Add the Facebook Like Button to your Website

The Facebook like button allows visitors to like your website (or an individual webpage). Setting this up is a little tedious but I’ve put together a step by step guide for you. First let’s take a look at how the Like button works and talk about why you should add it to your web site.

After adding the code to your website your visitors will be able to click the like button.  When they click the button the counter beside the button will increase by one.  The visitor will have the option to add a comment to their like (which will be displayed on their Facebook wall), and finally a like to your website will be placed on your loyal visitors Facebook wall for all their friends to see.

Add the Like Button to a Website

Note:  we will learn how to add a like button to individual pages and posts further down.

Step 1:  Get  an Application ID

Visit the Application Dashboard and create an Application ID https://developers.facebook.com/apps/ (open in new window)

1. Click Create New App
2. Enter your Website/Business Name in the Application Name, leave all other values blank and click continue
3. Copy your application ID

Step 2: Create and upload a Chanel File

Copy and paste the following code into a blank text file, save as channel.html and upload to the root of your website.

<script src="//connect.facebook.net/en_US/all.js"></script>

Step 3: Create and upload a JavaScript File

1. Copy and paste the text below into a text file.
2. Replace YOUR_APP_ID with your application id (click here to find it)
3. Replace HTTP://WWW.YOUR_DOMAIN.COM with the address to your website.  Note that the protocol http vs https and domain (does your website use www in front of the address?  If not exclude it) matter.
4. Save the file as fb.js and upload to the root of your website.

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : 'HTTP://WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

Step 4: Copy and paste the following code just under the body of your html page.

The following code should be pasted into a template file or into the body each page you plan on adding the like button to.

Once again change the domain to you website domain:

<div id="fb-root"></div>
<script src="http://www.lyndonreid.com/fb.js"></script>

Step 5: Generate the Code required to place the Like button on your Website.

1. You can visit Facebook’s developer website to generate the code you will place on your website.    Click here to open the page in a new window
   
   You are going to have three choices HTML5, XFBML, or IFRAME.  You are going to want HTML5 or XFBML.  Personally I’d go with HTML5 the only drawback to going this route is that older browsers do not support HTML5.  If you are targeting an audience that maybe using older browsers (check you analytics) consider using XFBML.
   
2. Click Get the Code (choose HTML5) *if you choose XFBML you will have to add the XML namespace
3. Copy the code from second text area.  It should look something like this but have your website address.
   <div data-href=”http://lyndonreid.com” data-send=”true” data-width=”450″ data-show-faces=”true” data-font=”verdana”></div>
4. Paste the code onto your web site where you want the like button to show.

Enjoy

You should now have a working like button.   The good news is that you have set up the foundation to add other social plugins so if you want to do more it will be much easier.

Not working for you?  Leave a comment below and I will help as soon as possible!

Putting this together was time consuming and tedious.  Please consider buying me a coffee to fuel my next post if it help you. In the spirit of honesty, I am just another Internet Marketer trying to make a few bucks. Your contribution is appreciated.