1. Code
  2. Widgets

Facebook Like Box Widget for WordPress


If your website has a Facebook page then it's a good idea to promote this to your readers by displaying a Facebook like box on the sidebar of the blog.

In this tutorial we are going to create a WordPress widget which displays your Facebook like box. With this WordPress widget you will have the option to display the box header, show your latest fans and show your latest Facebook stream.

Facebook Pages

Facebook Pages have been around for a while now and they have recently been converted to use the new timeline feature to bring even more exposure to your previous posts on your profile.

A Facebook Page is the same as a personal page but you can not friend other people, this is because Facebook Pages are for businesses to connect with their customers.

Facebook Pages give you a more dynamic relationship with the public figures and organizations you are interested in.

If you have your own business you too can create your own Facebook Page.

Facebook Like Box

A Facebook like box is a social plugin which enables Facebook Page owners to display a like button and a status stream on their own website.

The like box means visitors to your site can:

  • See how many people like the page and which of their friends already like this page.
  • View your recent status updates.
  • Like your Facebook Page without leaving your site.

Here is an example of Wptuts+'s Facebook like box.

To create a Facebook Like Box for your Facebook page you need to register a Facebook app to be able to use the Facebook open graph API.

Now you see what the Facebook like box is we can understand how to turn this into a WordPress widget.

WordPress Widgets

Before we start coding the widget we need to understand what a WordPress widget is and how we can use the WordPress Widget API to easily create WordPress widgets.

A WordPress widget is a piece of PHP code which will run inside a WordPress sidebar.

A WordPress sidebar is a registered area in your theme where you can add WordPress widgets.

WordPress widgets can easily be added to sidebars by going to the Widget page in the Dashboard and navigate to Appearance -> Widgets. From this Widgets page you are able to drag and drop widgets into a sidebar of your choice. The widget should have some sort of Admin form so you can edit the data shown by the widget.

WordPress WP_Widget

To create a WordPress widget all you need to do is inherit from the standard WP_Widget class and use some of its functions.

There are three main functions that need to be used for the widget to work these functions are form(), widget() and update().

The WP_Widget class is located in wp-includes/widgets.php.

WordPress Starter Widget

Below is the boilerplate of a WordPress widget, when you create a new widget just copy and paste the below code as a starting point for your widget.

Creating Facebook Like Box Widget

We are going to create a WordPress widget to allow you to easily add and change a Facebook like box on your WordPress blog.

The benefit of using a widget is for the flexibility it will give you. The choice that you have on your Facebook like box allows you to completely change the functionality just by placing different attributes on the like box.

The Facebook like box takes the following attributes:

  • data-href – The URL to your Facebook page.
  • data-width – The width of the like box.
  • data-show-faces – A true or false value which decides if you will show people who like your page.
  • data-stream – A true or false value which decides if you will show your latest status updates.
  • data-header – A true or false value which decides if you will show the find us on Facebook bar.

These are the options which we need to make sure the user can change in the widget admin screen, so they can change the look of the like box directly in the WordPress dashboard.

Now we know what to expect from the Facebook like box we can start coding.

Facebook Widget Constructor

First we are going to register the widget on the widget_init action.

The register_widget function will call the pu_facebook_widget class. In the constructor we can create the widget by passing through arguments to the WP_Widget constructor.

Widget Function

The widget function is called to output the widget in the sidebar. This is where we need to collect the data input from the user on the dashboard and display the widget on the website.

Use the following function to display your Facebook like box.

You may have noticed we add an action to the wp_footer to run the function add_js. This is where you will need to add the Facebook JavaScript to get the like box to work correctly.

Update Function

The update function is used to update the WordPress database when the widget admin form is submitted.

This is where you will need to place any validation needed on the values from the form. This takes 2 parameters, an array of values sent to be saved and an array of values which are currently stored. The return of this function will be the new values stored in the database.

Form Function


The form function is used to create the form on the widget dashboard. This will need to be pre-populated with the current values in the database and make it easy for the user to change the values to change the widget behaviour.

You do not need to add a submit button as WordPress will automatically add it for you.


That's all you need to create a WordPress plugin which creates a widget to display your Facebook like page. All you have to do now is install the plugin, activate it, add the widget to a sidebar and fill out the form with your page details.

You can download this plugin from Download Facebook Like Box Plugin

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.