1. Computing

How to Add a Facebook Like Button to any Website

Expanding "Likes" Across the Web

By

Facebook Like Button
© Facebook Like Button
Adding a Facebook Like button to a website is relatively easy, because the social network simplified the process to ensure that the Like function would become ubiquitous on the Web.

What Does the Facebook Like Button Do?

It's a small, clickable icon that lets people indicate that they "like" or enjoy any item of content. Clicking a Like button on Facebook sends a notice to your friends News Feed that you've made an approving click for something--page, app, comment, whatever. Any page you've "liked" also gets listed in your profile under "Activities and Interests."

Facebook lets other websites add Like buttons that do the same thing for their visitors--send notices back to Facebook for friends' news feeds and profile areas saying the person "likes" something.

So if someone clicks the Like Button on your website, it allows that person to share some of what they are thinking or doing on your site back with friends on Facebook. Basically, it posts a link and/or a comment to that page on their Facebook profile page

Technically, a bridge or link between your website and Facebook's is being created in the background when you add Facebook Like buttons to your site.

Code Snippet Is What Adds "Likes" to Your Site

Facebook offers a like-button code generator that automatically gives you two little snippets of code which you insert into your website to display the Facebook Like button. Facebook calls the code snippets social plug-ins, but they are more commonly known on the web as widgets.

You just add each snippet of code provided by Facebook into the HTML of your web page. One snippet goes on the page where you want the Like Button to appear, the other is an Open Graph tag that goes into the header

area of your home page's html code.

After you're done, if a user clicks the Like button and happens to be signed into Facebook at that time, a link to your web page or content on your site will appear back on that user's Wall on Facebook and be seen in their friend's News Feeds.

Adding a Facebook Like Button in 7 Easy Steps

  1. Step 1. Visit Facebook's Like Button page for developers. Decide what content on your site you want to associate or link to the Like Button. Copy that URL into the form on the like button creation page.
  2. Step 2. Pick the design and layout of the Like Button that you want for your page. Options include the size and layout of the text and button, and whether you want the number of "likes" to show. Click "Show Faces" if you want profile photos of everyone who "likes" your content to appear next to the like button.
  3. Step 3. Pick the language you want to appear next to your Like button. You can have "recommend" instead of "like," for example.
  4. Step 4. Click "Get Code" and select whether you want iFrame or XFBMF/JavaScript code. IFrame may be simpler, because XFBMF requires a user to have some JavaScript code installed on their computer, but either will work for most users. XFBMF has some extra features, such as allowing users to submit comments and showing profile photos.
  5. Step 5. Copy the resulting code and paste it into the HTML code on your own Website, on the page where you want the Like button to show.
  6. Step 6. Continue filling out the form on Facebook's like button creation page to get the other code you need. Provide your site URL and select the "open graph" tag type that will describe the content your like button is associated with on your site.
  7. Step 7. Type your Facebook ID, the numerical ID associated with your Facebook account, into the "admin" field. It's a long numerical string that starts with "fbid=" followed by numbers. (Sign into Facebook and right click on any photo to see your Facebook ID.) Finally, click "get tags" and copy the resulting code into the area after the tag of the HTML at the top of your site's home page.
  1. About.com
  2. Computing
  3. Social Media
  4. Facebook
  5. Developer Tools
  6. Adding Facebook Like Button to A Website

©2014 About.com. All rights reserved.