Add a Facebook Like Box to WordPress (with and without Shortcode)

The Facebook Like Box is a social ‘plugin’ that enables website owners to attract visitors, likes and support of their Facebook page directly from their website or blog. It can be styled in a minimalistic sense (see my like button in the right column) or it can be further populated with data showing how many users like a page and recent posts from a page.

The plugin is one of quite a few that are available from Facebook. We’ll look at them all at some point.

In terms of converting as many users as possible, a full featured like box is recommended – but this also detracts from your page design. Either way, if you’re a website owner, having the feature enabled on your site in one way or another is an absolute must if you want to maximise your reach and exposure (an individual is far more likely to come across something you’ve written on your Facebook wall than they are via other means of syndication, and it tends to drive unencumbered feedback/comments).

The code below will show you how to install a like box on a WordPress website, and I’ll also provide some shortcode for including the box if you’re a shortcodey kind of person.

If you’re not using a WordPress site, you can simply mosey on over to Facebook’s Facebook Like Box and generate the necessary code yourself. You’ll have to copy the provided code into the header and body of whatever CMS you’re using.

If you’re using WordPress, you can still simply use the tools on the Facebook plugin site to generate your necessary code (you really don’t need anything I’m providing below). Facebook will give you the option of having you render the like box on your page with XFBML (also available as HTML5 compliant code) or an iframe. XFBML (FaceBook Markup Language) is more versatile for a number of reasons, but for us, the importance comes from its ability to automatically rescale the height of the container. As far as I’m concerned, iframes should generally be avoided when the option exists.

Code generate on the Facebook plugin page

The downside of using XFBML as it applies to WordPress is the need to, and I quote, “ideally add FB’s JavaScript SDK right after the opening <body> tag”. Most WordPress themes don’t support a ‘hook’ in that location so we’re left with no suitable option other than outputting it elsewhere. I considered showing how to add that hook into your existing theme (via, say, a do_action('after_body'); and add_action('after_body', 'my_callback');) but this requires altering core theme files that are likely to change.

Edit: Code to Add a Hook virtually anywhere you want can be found here.

If you’re a Genesis user, you do have a hook after the opening body tag. We’ll come to Genesis options later on.

So, one option, and it’s certainly not best practice at all, is to add the JS SDK into the head of your document. You’ll want to copy this code into your theme’s functions.php file or your custom functions plugin. Don’t use this code if you’re using Genesis.

Using Genesis

If you’re using Genesis, it couldn’t be easier to add the FB SDK right after the body tag on your page (the hook is integrated into the framework by default). You have two primary options: via the Simple Hooks plugin or pasting the code directly into your functions.php file (the latter is preferred).

The genesis_before hook executes immediately after the opening <body> tag. The following screenshot is of the Simple Hooks genesis_before option box. It’s populated with FB’s JS SDK code.

Simple Hooks Plugin makes utilising Genesis hooks easy

Alternatively, and as a Genesis user, and as a preferred method, you can paste the following function into your theme’s functions.php file.

So, that’s the hard part. The rest is easy. Once done, you simply copy the second lot of code wherever you want your Facebook Like Box to appear. It’ll render based on the options chosen during setup.

Facebook Like Box Shortcode

As stated, I’m using shortcode to render like boxes on my site because I want to be able to quickly and easily display pages other than my own in posts and pages. Shortcode just seems like an easy way of accomplishing it. I style the shortcode parameters below based on my own default choosing and then alter it when necessary.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

Shortcode Examples

Available shortcode parameters are as follows:

url – The URL of the Facebook Page Like Box. Specify your own in the shortcode as a default.
width – the width of the plugin in pixels. Default width: 300px.
height – the height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.
colorscheme – the color scheme for the plugin. Options: ‘light’ (default) & ‘dark’.
showfaces – specifies whether or not to display profile photos in the plugin. Default shortcode value: true.
stream – specifies whether to display a stream of the latest posts from the Page’s wall. Shortcode default is ‘false’.
header – specifies whether to display the Facebook header at the top of the plugin. Shortcode default is ‘false’.
bordercolor – the border color of the plugin. Default is ‘#ffffff” (white).

The first example is a naked feel that I use on every page of this website. It doesn’t convert very well and doesn’t stand out very well, but it is neat and tidy.

[facebookbox url=""] will output:

[facebookbox url="" width="430" showfaces="true" stream="true" height="400"] will output:

There are literally countless options display available to you by altering the shortcode parameters.

I’ve displayed a large Like Box (on this page only) in the right hand column with the following shortcode:

[facebookbox width="250" height="700" showfaces="true" stream="true" bordercolor="#f5f5f5"]

If you want to use shortcode in a WordPress sidebar, you’ll have to paste the following code into your functions.php file (assuming your haven’t done it already and your theme doesn’t support it by default).

add_filter('widget_text', 'do_shortcode');

If you have any problems, please let me know.

Shortt URL for this post:


  1. Pingback: Add a Facebook Follow Subscribe Button to Your WordPress Website with Shortcode

  2. Pingback: Facebook Share Shortcode for WordPress

  3. Pingback: Embed Facebook Posts into Your WordPress Post or Page with Shortcode

Leave a Reply

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