How to Add A Facebook Like Button to WordPress

The best way to get your visitors to share your awesome content is to make it easy. And the easiest way for them to share with the friends and followers is a simple button on your site. Luckily for us, all of the major social networks allow us to integrate their sharing buttons. In this article I’ll show you how to add the Facebook Like button to your website.

Table of Contents

1. Customize Like Button
2. Choose Integration Type
3a. Intregrate iFrame or URL
3b. Intregrate HTML5 or XFBML
4. Test The FB Like Button Integration

Before we start, it’s important to note: Sometimes, Facebook doesn’t show the right thumbnail image, or the right title by default. To prevent that issue, you should add Facebook Open Graph Meta Data to your WordPress site. You can test what will be shared by entering your URL on this page.

Ok, let’s get this party started…

Step 1 Customizing Your Facebook Like Button

Facebook wants the Like button on as many website as possible, so they can collect as much data as possible, so they make it very easy to integrate the button. Go to this page and select the options you want (screen shot below). You will need to create a FaceBook developer account before you can create a Like Button; it’s quick, easy and free.

There are 6 things you have to do to customize your new Facebook Like button:

1. Enter the URL of your website, this is the URL that visitors will “Like”.
2. Define the width of button area. In most cases you can leave this blank to keep the default width.
3. Choose a layout – the live preview will change to show the new design
4. Pick an “action” – this is the text on the button and your options are “Like” and “Recommend”
5. Choose to share your friend’s faces along side the button (for social proof)
6. Choose to include the “Share” button

Once you’re done customizing click on the “Get Code” button.

Step 2 Choose Integration Type

After you click on “Get Code” you will presented with an inline popup. At the top of that popup you need to choose your integration method: HTML5, XFBML, iFrame or URL.

Here is what each one is best for:

The iFrame and URL versions are the simplest, easiest to install and provide the least amount of interaction data, but you will be able to track referrals. These best used for one-time buttons, not ones that are to appear throughout your site.

See step 3a on how to integrate these.

If you’re using the HTML5 or XFBML integrations and you’re comfortable with code then:

• you’ll be able to register an event whenever someone clicks the Like button
• people will have to option of adding a comment after they click the Like button
• you’ll be able to track referrals

These two options are best suited for putting into your WordPress theme files so the buttons can be displayed throughout your site.

See step 3b on how to integrate the HTML5 and XFBML options.

Step 3a Intregrate iFrame or URL

These two are the easiest. Simply copy and paste the code into your website where you want the button to appear. See screen shots below.

Step 3b Intregrate HTML5 or XFBML

These two are a little more difficult, but it’s still copy and paste. In the inline popup that contains the code it also has very clear instructions on where the place each code segment. I have highlighted the important points in the screen shots below.

Step 4 Test The FB Like Button Integration

Now that you’ve pasted the code where it should and saved the files it’s time to test. Go to a page where the button should appear.

And You’re Done! If everything is integrated properly you’ll see the Facebook Like button on your site ready go!

If you encounter any problems leave a comment below and we’ll try to help figure it out!