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 Like Box page 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.

FB options and preview

Like Box options and preview

The reason I’m using shortcode is so I can add other people’s Facebook pages into posts and pages when I reference them. Simply copying the code into you theme is probably a far easier option.

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.

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 a Genesis user.

// Add Facebook JS SDK to head
function fbsdk_head() {
  ?>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <?php
}
add_action( 'wp_head', 'fbsdk_head' );

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.

// Add Facebook SDK after head
add_action('genesis_before', 'facebooksdk', 9); 
function facebooksdk() { ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?
}

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. Of course, you’ll still need to add Facebook’s JavaScript SDK as described above.

Copy the following into your theme’s functions.php file.

function facebooklikebox($atts) {
  extract( shortcode_atts( array(
  'url' => 'http://www.facebook.com/internoetics', // YOUR FB page
  'width' => '300', // default 300px
  'height' => '63', // default is 63px or 556 with faces
  'colorscheme' => 'light', // light or dark
  'showfaces' => 'false', // true or false
  'bordercolor' => '#ffffff', // eg. #ff0000 is red
  'stream' => 'false', // true or false
  'header' => 'false', // true of false
  // 'forcewall' => 'false', // rarely used
), $atts ) );
return '<div class="fb-like-box" data-href="' . $url . '" data-width="' . $width . '" data-height="' . $height . '" data-colorscheme="' . $colorscheme . '" data-show-faces="' . $showfaces . '" data-border-color="' . $bordercolor . '" data-stream="' . $stream . '" data-header="' . $header . '"></div>';
}
add_shortcode('facebookbox', 'facebooklikebox');

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="http://www.facebook.com/flightpodcast"] will output:

[facebookbox url="http://www.facebook.com/flightorg" 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.

First Name:
Your Email Address:
 


If you liked this article, you may also like:

  1. Add a Facebook Follow/Subscribe Button to Your WordPress Website with Shortcode
  2. Embed Facebook Posts into Your WordPress Post or Page with Shortcode
  3. Thesis and the Facebook Like Plugin
  4. Facebook Share Shortcode for WordPress
  5. Open Graph Objects & Facebook – Creating Rich Snippets to Share on Facebook and Google Plus
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Trackbacks

  1. […] Facebook SDK code right after the opening <body> tag on your website. If you already use a Facebook like box or similar it’s likely that the code is already on your […]

  2. […] after your opening <body> tag. If you’re using Genesis, you can follow the instructions here (under the title of ‘Using Genesis’). If you’re not using Genesis, you can follow […]

  3. […] after your opening <body> tag. If you’re using Genesis, you can follow the instructions here (under the title of ‘Using Genesis’). If you’re not using Genesis, you can follow […]

Please leave a comment or question!

*