Seattle Community

Donna Gunter
Internet Marketing Strategist & Online Business Coach
Orange, Texas
Very helpful
out of 10
2 votes

How to Install the Facebook Like Button On Every Page of Your Site

Facebook is the most rapidly growing social networking platform, with over 400 million active users. With so many users and with people's preoccupation with Facebook...
Written Aug 28, 2010, read 4942 times since then.


Facebook is the most rapidly growing social networking platform, with over 400 million active users (and climbing quickly).  With so many users and with people's preoccupation with Facebook, it makes sense to use the "Like" button to help virally spread the word about what you do to others who are interested in you.

Once the button is on your page, any time a Facebook user visits your site and clicks on it, a link to your page is added to their activity stream. Then, all of their friends can see that link, and if interested, click on it and be sent directly to your page. When that second person clicks on the button, the button is personalized for them by showing which of their friends have already clicked it.  And then, when your friends click on it, a link to your page gets added to their stream, as well.  Easy viral marketing!

Here's how you can install the "Like" button on your site:

1.  Visit the Facebook page to create the button, found here.

2.  Copy the URL of the page where you want to install the button to the form in Facebook.

3.  Pick your features.  This is where you choose your layout style, whether you want to show faces, the width of the button (the default 475 pixels is fine), what you want the button to say (Like or Recommend), the font of the button, and the color scheme.

4.  Click "Get the Code."  You'll discover you have two options here, an i-frame or JavaScript (HFBML) version.  Here are the difference between the two:

Because the content inside the i-frame is hosted by Facebook, Facebook can determine whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the information in the i-frame is personalized for that user, like showing a list of your friends who have also "liked" the page.  If you're not logged in, you'll be prompted to log in or join.

The JavaScript version offers some extras. When you use this code, clicking the Like button will also show the profile pictures of your friends who have clicked on the Like button, as well as gives your visitors the chance to add a comment to the link when they click on the Like button.  There's also some extra programming involved if you select this option.

I suggest you use the i-frame because it's easier to configure.

5.  Highlight and copy the button code provided on the page for you.

6.  Return to the page where you want the button to appear.  In your HTML editor, you need to paste the code where you want it to appear on your page.  As you look at the code, you'll see that it references the page you selected on which your code will appear.  You'll also notice that the width of the box is set to 475 pixels (if you chose that width at setup) but there's no height set.  You might want to set the height at 75 pixels so that the button doesn't take over your page.

7.  Publish and "like" your page.  Save the page with the code and publish it to your site.  Go to your updated page and "Like" your page.  Your page must be accessible to any viewer.  If the content is password-protected (like in a membership site), an error message will appear when someone clicks the "Like" button on a page.

Connect the pages of your blog or web site with Facebook via the "Like" button. Share them with your friends and followers and watch the viral marketing happen!

Learn more about the author, Donna Gunter.

Comment on this article

  • Executive Director 
Clearwater, Florida 
Stan Dubin
    Posted by Stan Dubin, Clearwater, Florida | Aug 29, 2010

    Very, very helpful Donna. Thanks for putting this up here!

    I heard in the last week or so that Facebook was up to 500 million plus users. A half a billion.

  • SEO 
Richardson, Texas 
Prathap Rajamani
    Posted by Prathap Rajamani, Richardson, Texas | Aug 30, 2010