Adding a “Like This” button to a page or pages on your website is not a complicated process. There are two different methods for adding one. The older “iframe” and the newer “javascript”. The javascript method is better although more complicated, so unless you have a specific need for the iframe option I suggest you use it. For the purposes of this article I will focus on the javascript method.

Why should you do this?

With the “Like This” button users can comment on your website or page. They can share the page with those that share their Facebook profile. Provided they are already logged into Facebook, all they need to do is click the button, enter a comment and by clicking one more button post to Facebook.

Once posted the comment will appear in the user’s News Feed including a link back to your site. This is great from a marketing point of view and helpful in the process of building traffic to your website.

A “Like This” button can apply to an entire site, a single page or you can have multiple buttons on a page each relating to a specific item. That item could be a product, service or something else. What I am describing here is how to add a single button to a page or website (repeat the same on as many pages as you require).

Where do I start?

Before you start there is one vital piece of information which you require beforehand. This is your facebook id or facebook page admin id.

Login to your facebook account. At the very top of the page, next to the Facebook search field is your name, click on it. The page will change. Look at the URL showing for the page in your browser and it will show id= followed by a long number. That is your facebook id.

If you want your facebook admin id, login to facebook and select the relevant page. Then select “Edit Page” and then “Admin roles” from the menu. The admin id is visible in the URL showing in your browser.

“Like This” button basic components

The “Like This” button is specified on the page using a div statement. Several items are required. I suggest you specify them in the following order

1. Start with div tag
2. class=’fb-like’ This tells facebook that this is a “Like This” button.
3. data-href= This must be followed by the URL. The URL is the full path to your page. Do not just use your domain, you should include the actual page even if it is the default “index”.
4. data-send= Because we are using the javascript method your “Like This” button can have the additional “Send” button. Send if selected enables a visitor to send the page url to a friend by email. This is controlled by the “data-send=true” setting, “true” if you want this otherwise “false”.
5. data-width= The button(s) will occupy space on your page. You can control this using the “data-width=450” setting. 300 - 450 is a good range to use.
6. data-show-faces= Set to false if you do not want to show the faces of those which have liked this page or true if you do.
7. data-font= Set to your required font, the default is arial.
8. End with /div tag

Other options are available. These can be found on Facebook, in the developer section.

You also need to add a small piece of javascript code to your page. This is added to the main body of your page. I suggest immediately after the body tag.

You can get the javascript code from the developer section of Facebook. Search for "Like This button".

Adding a “Like This” button should be a two stage process. Ideally you should also add Facebook Open Graph settings too. This will be covered in a separate article later but more information can be found in the developer section of Facebook.