How To Add Facebook Like Button

In this tutorial, we will show you how to add a Facebook “like button” to your website pages. Although there are two methods to add a like button – XFBML and iframe, we will be using the iframe method in this tutorial.

You will need:

- A Facebook Account
- Website or Web Pages
- HTML editor (only for HTML pages)

Note: In this instance, we’ll be adding a like button to individual html pages rather than pages, which are on a cms platform such as WordPress.

Most CMS platforms like this have a built-in page editor. If your site was created using html pages, you will need access to a page or html/text editor such as CoffeeCup HTML editor or Notepad ++ (Microsoft OS).

Step 1: Collecting Needed Info

When you begin to create your like button, you will need several pieces of information. You may want to copy and paste these items into a text file to make the button creation easier.

- URL to Like – This will be URL of the page where you will add the like button.

- Title – Page title

- Image URL – The URL to an image that represents the page. This will show up as the thumbnail in some places on Facebook. Images must be at least 50 pixels by 50 pixels. Square images work best, but you can use images that are wider than they are tall.

- Site Name – This should be the name of your site, not the slogan or description.

Step 2: Go to FB Developer-Like Button

Here you will see two forms where you can insert your information and add other details to create the two pieces of code that you will need to insert into your web page.

Step 3: Create Your Like Button Code

The first three bits of information you’ll need to fill in are the page url, the layout style, and show faces option.

- In URL to like section, you will add the page url where you will add the like button.

- In the layout style section, you will choose how the like button is displayed. The default setting is “standard”.

- In the show faces section, you will check or uncheck the box depending on whether you’d like user images to show beneath the like button when someone “likes” the page.

The next four sections are where you’ll fill in the width, verb, font, and color scheme.

- In the width section, you will choose the width of the button. The default size is 450px.

- In the verb section, you will choose (from the dropdown) what verb you’d like to display. You can choose either “like” or “recommend.” Since most people are familiar with the “like” term, you may want to opt for the verb “like”.

- In the font section, you may choose the font style you’d like to use for the like button as well any included text. Use the dropdown to choose from arial, lucida grande, segeo ui, tahoma, trebuchet ms, or verdana fonts

- In the color scheme section, you will choose light or dark from the dropdown menu. Choose light for a light button background or dark for a dark button background.

Once you are finished making your selections and inserting information, click the Get Code button.

Copy and paste the iframe code into a text document to save for use later. This code will be placed into the area of your page where you want your button to show.

Step 4: Create Your Open Graph Tag Code

The second code you’ll need is the tag code. This form will help you create the meta tags that you will need to add into your page’s header.

- In the title section, you will add the title of the page.

- In the type section, you will add the type of page. Use “article” for any URL that is an article, blog post, photo, video, etc. “Website” and “blog” should be used to refer to an entire site and should only be seen on the root of a domain.

- In the URL section, add the permanent URL of the page. When you use Open Graph tags, the like button posts a link to the og (open graph) url instead of the URL in the like button code.

- Like in the Step 3, add the image URL. This time, the URL will be used in the meta tag.

The last two items that will be used in the meta tags are site name and admin id.

- In the site name section, add your website’s name just as you did in Step 3.

- In the admin section, the admin id (or user id) is auto-generated if you are logged into Facebook.

Note: To see your user id, go to your home page and click on your name link (profile.) The link that appears in the address bar of your browser ends with approximately nine numbers. These numbers are your user id.

Check the information you have entered in the fields. When you are sure the info is correct, click the Get Tags button.

Add the code to your text file “note” for easy access later.

Step 5: Add Your Like Button Code

Take a look at your html page and decide where you’d like to place the button. We want to put the like button just after the last link in the article.

To add the button code, open the page with the editor, find area where you want to add the button, insert the button code, save the page, and upload.

It should look something like this but with your own info filled in, of course.

The iframe button code has a colored background in the image below.

Preview or view the edited page in your browser. This is how the button will look on the page.

Step 6: Add Your Open Graph Tag Code

Now it’s time to add the meta tags. Use the editor to open the page where you just added the button code.

After the tag and after any other meta tags, insert the tag code. It should look something like this example, with the “og” items being the newly added code with your info.

Save, upload, and review the page. Now your readers can like your new page.