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:

{ 10 comments… read them below or add one }

Presentation Skills Training September 29, 2011

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?

Reply

Presentation Skills Training September 29, 2011
Jason Manheim September 29, 2011
Presentation Skills Training September 30, 2011

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

Reply

Jason Manheim September 30, 2011

Thanks, glad it worked for you.

Reply

gabe December 19, 2011

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

Reply

Designpx January 14, 2012

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.

Reply

hody October 8, 2012

how do i put background color on the box?

Reply

Jason Manheim October 9, 2012

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

Reply

Josh K September 3, 2013

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..

Reply

Leave a Comment