Adding a Facebook Like Box widget on your website, usually in your blog’s sidebar, can get you more Likes. That’s because if a user enjoys your articles, it’s more likely that he will click the Like button on your sidebar, rather than searching for your Facebook social icon, going on Facebook, giving you a Like, and then coming back on your site.

Users like things which don’t require to much time do do. We are in the age of speed after all, no? So, a Like Box will really come in handy!

In this guide I’ll show you how to add a Facebook Like Box widget in WordPress, without using a plugin or going through your theme’s code. We’ll do some manual labor by creating our desired Like Box, and then adding the code in the Widgets area of WordPress.

Don’t worry, it’s way easier than it sounds!

Customizing the Facebook Like Box

The first thing you need to do is to go to Facebook’s social plugin and create/customize your Like Box. Here’s how it looks like:

facebook like box

  • In the Facebook Page URL, insert your own Page URL;
  • Choose the width and height. We chose 100 x 237, but it depends on where you want to add it, what’s your layout, how do you want it to look, etc.;
  • Choose the color: light or dark;
  • Check if you want to show the profile images of the recent people that liked your page;
  • Check if you want to show the recent posts you shared on your page;
  • Check if you want a header and/or a border;
  • After you finished, click Get Code.

You’ll notice that every change you make will be previewed, which is awesome because you can see how your Like Box will look like before you add it on your site.

Adding the Like Box code in a Text widget

After you press Get Code, this will appear:

facebook like box code

As you can see, you can choose from: HTML5, XFBML, IFRAME, and URL. The best option is HTML5, but if that doesn’t somehow work, you can try the IFRAME option.

Notice that the HTML5 option has two parts. You need to copy both of them, one after another. Here’s how:

Step 1. Copy the first part (JavaScript SDK). Just click somewhere in that grey box and the code will be automatically selected, so you can copy it quick.

Step 2. Go to your Dashboard -> Appearance -> Widgets. There you need to drag a Text widget in to your Sidebar or Footer (we don’t recommend it).

wordpress text widget

Step 3. After you dragged one, write a Title (e.g. Like Us!) and then paste the first part of the code.

Step 4. Go and copy the second part of the code, and paste it under the first part.

facbeook like box widget code

Step 5. Save it and check out your brand new Facebook Like Box widget!

Like I said above, if the HTML5 option somehow doesn’t work, try the IFRAME one by following the same pattern.

Here’s a video guide that we did for you as well:

https://www.youtube.com/watch?v=NfYtwxvlGG8

 

Hope you found this post helpful! If so, don’t forget to share!

If you have any questions or feedback, please leave a comment.


Leave a Comment