Add a Facebook Like Button to Your Website or Blog

This is a beginner’s tutorial and does not include information on how to add/edit your meta data in the html head tags. Adding the meta tags are not a necessity to add the like plug in to your website. – If that makes no sense to you, then you are in the right place!

This post will show you how to get the custom code for your site and how you may want to put it on your site. There are two ways to create the code for your website:

The Code Generator (recommended)

1. Go to Facebook “Like” Button Reference Page.

2. Skip right to the bottom of this page and you will see a form that looks like this and you will fill in your information like I have done for Virtual IT Assistants.

3. The get code will generate code like this:

Write the Code by Hand (simplest form possible)

1. Copy the following code

<iframe src="" scrolling="no" frameborder="0" style="border:none; width:230px; height:80px"></iframe>

2. Replace the with your real website or blog site address.

How to Get it on Your Website or Blog

Blogger: In a blogger blog, go to “edit layout”, click on “add a gadget”, choose the gadget for adding HTML/JavaScript, and then paste your code there and save.

HTML: Once you have copied the code, paste your code into your website’s html pages within the body of your page. It’s probably best to start with your homepage index.html or index.php. Always open a page in a browser before uploading to your live website.

WordPress: This works best on self-hosted websites: Go to widgets and create a new text widget and paste the code, and then save. Another option is to go to your homepage and view it in your wordpress site’s html view and paste your custom code. Preview the changes if you edit a page or post.

Notice that the code for the Facebook “Like” button starts with an “iframe”. This means you will not be able to use this code on a blog. I am still working on a simple way to add the like option if your blog is hosted here so stay tuned.