How to Add Facebook Like Button to WordPress

For years, Facebook has been one of the most popular social media sites on the planet. So, it does not surprise that most of the new bloggers already have a personal Facebook account. More often than not, bloggers will create a fan page on the social media as well where they have a chance of publishing content from their personal blogs.

Even if you haven’t been using Facebook extensively, you are probably aware of the like button. It has more power than it was initially thought. It’s become a way of measuring success online. One simple click on the button can trigger a chain reaction that will make your post viral. It will help people share the content, and make it much more appealing to newcomers. But you will have to work towards it.

Since there are so many social media and various services online, people have become lazy. Although it does take just one click to like an article and share it with real and virtual friends on the network, people are becoming less and less likely to do so. So, if you really care about sharing (and you should), adding a Facebook like button to your WordPress blog is a must.

How to add Facebook like button to WordPress

Yeah, we are aware of the fact that talking about something and actually doing it is not the same thing. But don’t worry; adding a Facebook like button to your site is easier than you might have imagined. It will take some time to prepare everything, but if you follow each and every step, you will have your own like button or box in no time. There are several methods of adding the button, so you just have to select the one you prefer.

Create a Facebook app

Unfortunately, Facebook developers made it a bit harder for us to fully integrate the popular social media features onto our sites. They require everyone to have a Facebook app ID before you get to connect the features to the site you own. In some cases, you will be able to use a plugin or a code snippet without one, but it’s better to be prepared. It is not that much of a big deal, but you will have to follow a few extra steps in order to create your own Facebook app:

Create a Facebook app

  1. Log in to your personal Facebook account
  2. Visit Facebook Developers Page
  3. On the top-right corner, find “My Apps” menu
  4. Select “Add New” app
  5. Fill in the name of your app (for example “like button”) and your email address
  6. Click on the “Create app ID” button
  7. Facebook will prompt a security check so enter the characters you see on the screen
  8. Skip selecting categories for now and open the app dashboard from the left side of the screen

This will be more than enough to have your app ready for installing a Facebook like button on your WordPress site. Now, you should decide if you’re going to install a plugin which will handle the button for you or use the code to manually install it on posts and pages.

Use a free plugin

Since Facebook requires you to use its app just in order to show a like button, we know that dealing with additional code can be exhausting. So, to make it just a little bit easier, you should be aware that there are dozens of simple WordPress plugins that will put a Facebook like button on your site. Still, have your app prepared since all of them will ask you for the ID. It’s a drag, we know, but you won’t be able to have your button without it.

WP Like Button

PRICE: Free

WP Like Button plugin

This simple WordPress plugin will generate a like button for any site, fan page or even for every single post and page on your blog. Whether you want to display a like button on the homepage or specific pages, you can have it done in a matter of seconds.

There are four types of button layouts you can choose from, so there’s no need to worry about how it will look like on your custom theme. You even get to use a shortcode that will show a button anywhere you want.

Facebook by WebLizar

PRICE: Free

Facebook by WebLizar plugin

If you want to display a nice Facebook like box with live streams and friends’ images, look no more. As long as you have prepared the app ID, Facebook by WebLizar will do everything for you in just a few seconds.

  1. Go to Plugins -> Add New
  2. Search for “Facebook by WebLizar”
  3. Install and activate the plugin
  4. Navigate to Appearance -> Widgets
  5. Find “Facebook by WebLizar” widget and drag it to any widgetized area
  6. Fill in the details and copy the app ID from your Facebook application

After saving the settings, your new Facebook like box will appear as a widget on the sidebar, footer or any other area that you might have selected. Just in case you want to display the box in your posts and pages, it will be enough to use [FBW] shortcode and the plugin will do the rest.

Manually add a Facebook like button

If you aren’t afraid of a few lines of code, Facebook like button can be added anywhere you want even without installing additional plugins. The developers have prepared everything for the users, so it suffices to open the specialized tool and set a few options to your likings.

Customize the button

Facebook Like Button Configurator

Facebook will automatically generate the button code for you and show you how to embed it into your blog.

  1. Go to the Facebook Developers Page
  2. Scroll to the Like Button Configurator section

The configurator lets you choose a few options for your new like button. For starters, enter a specific URL which the users will able to like. For example, you can type in the URL to your homepage or maybe your Facebook fan page.

Don’t forget to choose the width of your custom plugin. Select a layout, action type and the size of a like button. You can see a preview just below the options so feel free to play around with the settings until you get what you like.

Just by checking the box, you can include the share button as well. It’s up to you but since it just a click away, and it can help you get extra shares, we suggest including the other button.

Get the code

Unfortunately, there are no many options to try out, and you won’t be able to use custom colors, icons or anything similar to that. But once you personalize the button to your likings, click on the “Get code” button which will open a lightbox with the code that goes on your site.

As you will notice from the new window, there are two different ways of adding the code to your site. Since JavaScript SDK method requires you to add two different pieces of code to your site, it will be more suited for experienced users. Instead, it is much easier to use the iFrame method, but in that case, make sure that you have included the URL you want to be liked:

iFrame Facebook like button

  1. Switch tab to iFrame
  2. Copy the entire code
  3. Navigate to Appearance -> Widgets
  4. Add a new Text widget
  5. Paste the code into the Text editor

Don’t forget to save changes after pasting the code and open any page where you can see widgets. If you have done everything correctly, you should see the Facebook like button on the location you selected.

If you are comfortable with WordPress files and you are aware of risks when modifying the code directly from the Appearance Editor, you can also add the code to any template file that you like. For example, you can go to Appearance -> Editor and find the single.php template. There, you could add the button to the code and show it on every post, on any location that you prefer.

Just in case the iFrame method doesn’t work for you or you want to embed the like button by using the JavaScript SDK, here’s what to do:

JavaScript SDK Facebook like button

 

  1. Switch tab to JavaScript SDK
  2. Copy the code from the step #2
  3. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
  4. Copy the code from the step #3
  5. Place this code wherever you want the plugin to appear on your page (Text widget for example)

Add the like button to every post with a dynamic URL

The previous methods will work nicely, but it will let user like only that one particular URL which you need to specify in the settings. If you are looking for a way to add a like button for every post separately, you will need a different approach and a modified code:

  1. Go to Appearance -> Editor
  2. Edit single.php file
  3. Copy and paste the following code into the spot where you want the button to appear:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo
urlencode(get_permalink($post->id)); ?>&layout=standard&show_faces=false&width=350&amp;action=like&amp;colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

Don’t forget to save the changes and reload any of your posts to see the Facebook like button. Now, every post will get its button, but the most important change is that the URL will be created dynamically. What that means is that each post will get its own URL. So when a user clicks the button to like it, that specific post will get all the attention. Awesome, isn’t it!?

Conclusion

Whether you want to add a simple like button to all of your posts or just show a like box that will attract Facebook users, you should not leave out the feature from your blog. As Facebook is still one of the most popular and active social media sites, the chances are that you will greatly benefit from adding a simple button on the site.

Just like you, we would also be much happier if Facebook made things a bit easier to handle. But until the moment when everybody will be capable of clicking one button directly from WordPress to add all the buttons they wanted, have this article in the bookmarks and start sharing.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *