How to add the Facebook Like Box Social Plugin to WordPress using a WordPress shortcode and some CSS. Works with the Thesis theme, Genesis framework, etc.

Add Facebook Like Box Plugin to WordPress

Written by in Tutorials |

This is part 7 of 7 in the Facebook Social Plugins series:

We recently finished a re-design where the front page displays a Facebook Like Box similar to the following:

Join Us On Facebook

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. ~ Like Box

We’re going to recreate this so you can add something similar to your Thesis site. The easiest way to accomplish this is to create a WordPress shortcode that will display the Like Box wherever you insert the code. But first, let’s go over the Like Box attributes.

The Like Box Plugin Attributes

The default code that Facebook provides looks like this:

<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

The following attributes can be changed/added:

  • href – the URL of the Facebook Page you want Liked.
  • width – the width of the plugin box. Default is 300px.
  • height – the height of the plugin box.
  • colorscheme – like all Facebook plugins, the options are ‘light’ or ‘dark’.
  • show_faces – show/hide profile photos of people who have Liked your Page. Default is true.
  • stream – show/hide a stream of the latests wall posts from the Page.
  • header – show/hide the Facebook header.

Creating a Facebook Like Box Shortcode

Go to your themes functions.php file (Thesis Theme users can open up their custom_functions.php file) and add the following:

//ADD FACEBOOK LIKE BOX PLUGIN SHORTCODE
function fb_likebox() { 
	return '<h3 class="join-fb">Join Us On Facebook</h3><div class="fb-likebox"><fb:like-box href="http://www.facebook.com/Designpx" width="578" show_faces="true" stream="false" header="false"></fb:like-box></div>';
}
add_shortcode('fblb', 'fb_likebox');

Now, whenever you add [fblb] to your post or page editor, a Like Box like the one at the beginning of this post will show up.

Of course you need to change the href to your Facebook Page, specify the correct width, and add a bit of CSS; (Thesis users open your custom.css file) add the following:

.format_text .fb-likebox {
	border: 9px solid #eee;
	padding: 2px 2px 0 2px;
	margin-bottom: 15px;
}
.custom h3.join-fb {
	font-family: Georgia, serif;
	text-align: center;
	font-style: italic;
	color: #D7D7D7;
	font-size: 28px;
	margin: 0 0 -7px 0; /* you may have to tweak the negative margin */
	padding: 0;
	text-shadow: 1px 1px 0px #F1F1F1;
}

Enjoy this post? Consider sharing it:

  • http://www.influenceology.com/ Presentation Skills Training

    Love the tutorial but the actually facebook badge isn’t showing? I cut and past into coda and uploaded that way. Any idea why not showing?

  • http://www.influenceology.com/ Presentation Skills Training
    • http://designpx.com/ Jason Manheim
      • http://www.influenceology.com Presentation Skills Training

        Thanks Jason… that worked! I love your tutorials!
        Keep up the outstanding work!

        • http://designpx.com/ Jason Manheim

          Thanks, glad it worked for you.

  • http://colorbox.me gabe

    How would I insert the [fblb] into the nav bar on the far right?

    • http://designpx.com/ Designpx

      That’s quite a large box to put in your navbar. What is the site?

      If the menu is in your sidebar you need to enable shortcodes to work there by adding

      <code>add_filter (‘widget_text’, ‘do_shortcode’);</code>

      to your <code>functions.php</code> file.

  • hody

    how do i put background color on the box?

    • http://designpx.com/ Jason Manheim

      You can try .fb-likebox iframe {background: #999 !important;}

  • http://www.joshkopecek.co.uk/ Josh K

    Thanks a lot. This really saved me some time. I’d like to add that in WordPress it’s also very possible (and probably better) to bung all the javascript into a separate file and to use wp_enqueue_script() to load it, rather than putting it directly into a template file. That way WordPress loads everything in the correct order and you’re less likely to have conflicts..