How To Put Facebook "Like" Buttons on Your Website

A Step by Step Guide to Adding Facebook "Like" Buttons to Your Web Pages.
Last month we talked about social media marketing for your website. One of the methods discussed was placing Facebook (FB) "Like" or "Recommend" buttons on a page of a website, using FB's button creating tool and "IFrames". The drawback to that method is that, unless you are a programmer, you can only create one "Like" button at a time.

A Better Way

This month we will discuss how to use the same Facebook button creating tool to create buttons that will work for any web page. In order to do this you will need to know a bit about HTML. You will not need to do any real coding, just some cut and paste. (If you are already a FB developer this blog will seem extremely simple to you.)

This method uses the JavaScript Software Development Kit (SDK), and because of that Facebook considers this an application, so there is a step Zero.

Step 0 - Become a Developer
Yes, there is a step "Zero". Before you begin you need to be a Facebook Developer. It is easy to do, and anyone can become one.

Go to the Faceboook search bar and type in "developer." The first item FB shows should be the Facebook Developer Group.

Select it and on the Facebook Developer group page, join the group.

Step 1 - Get An Application ID
Facebook considers "Like" buttons applications, so you need to get an application ID from Facebook. You should see a screen that looks similar to this image (if you followed that link):

• Enter anything into the name field
• The URL must be a directory (not a page) what you type should end in a "/".
  You can use anything even the root of your website for the Site URL.

Step 2 - Save Your Application ID
After proving you are a person, by typing in two words from a CAPTCHA image, Facebook will assign your application an ID. Copy that ID and paste it into a text file. You will need it later.

Step 3 - Build Your "Like" Button
Use the Facebook tool discussed last month to build your button code.

Do not add a URL into the field on Facebook's tool.

If no URL is provided, then Facebook will assume you want whomever clicks on the "Like" button to like the page they are currently viewing.

After filling out the form click on the "Get Code" button. This time you want to use the code in the "XFBML" box. Copy that code and place it into a text file, to be used later.

If you attempt to use the "IFrame" code without a URL, Facebook will place in a default URL for people to "Like".

Step 4 - Edit You Webpages

• Paste the button code from Step 3 onto any webpages that you want the "Like" button to appear.
  Place the code in your HTML where you want the button to show up.
• Copy the code shown below, or use the Download Code Link to get a copy.
• Put your Application ID from Step 2 into the FB.init line.
  Make sure the single quote marks are not deleted and surround your ID.
• Place the code with your ID into the bottom of each page just above the closing </body> tag.
  

The "Like" button code from the first bullet point can go anywhere in a web page's HTML. But the other code works with your page's code best if it is at the bottom of the page.

Step 5 - Upload Your web Pages
Upload your edited web pages to your web site and test them out.

Code for Step 4
You need to add the Facebook SDK code to your web pages. The best way to do it is by copying this code to the bottom of your page just above the closing </body> tag.

<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
  FB.init({appId: 'your app id', status: true, cookie: true,
  xfbml: true});
 };
 (function() {
 var e = document.createElement('script'); e.async = true;
 e.src = document.location.protocol +
 '//connect.facebook.net/en_US/all.js';
 document.getElementById('fb-root').appendChild(e);
 }());
</script>
Download the Code

That is it you are done.

Facebook Tip
Need to Find Your Facebook Applications? You can always find your applications again, by going to the developer page. The easiest way to do this is to go to the Faceboook search bar and type in "developer." Click on the first entry. Your applications are listed on this page - right of center. Look for the headline "My Applications".