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: