How to add the Facebook Recommendations Plugin to WordPress using a WordPress shortcode. Use it on the Thesis theme, Genesis framework, WooThemes, etc.

Add Facebook Recommendations Plugin to WordPress

Written by in Tutorials |

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

To generate recommendations, the plugin considers all social interactions with URLs from your site. For a logged in Facebook user, the plugin will give preference to and highlight objects their friends have interacted with.

Facebook DevRecommendations

Now that you have your Like buttons setup (and even before then) you should have some people sharing your content through Facebook (if not, at least you’re sharing your stuff, right? ;)).

Facebook provides an easy way to feature what people are recommending (and how many people have shared it) via their Recommendations plugin. Like most of their plugins, there are a few attributes that can be customized; let’s go through them…

The Recommendations Plugin Attributes

The default code that Facebook provides looks like this:

<fb:recommendations></fb:recommendations>

The following attributes can be changed/added:

  • site – the URL the plugin will base its recommendations on.
  • width – the width of the plugin box. Default is 300px.
  • height – the height of the plugin box. Default is 300px.
  • header – whether to show the “Recommendations” header.
  • colorscheme – like all Facebook plugins, the options are ‘light’ or ‘dark’.
  • font – ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, or ‘verdana’.
  • border_color – this option should be available to all plugins but sadly, it is not.
  • filter – you can filter which recommendation URLs to show by listing a term. It will search for your term in the first two path parameters of the URLs.
  • ref – for tracking referrals.

Creating a Facebook Recommendations Shortcode

First, we’re going to create a shortcode so we can easily add the Recommendations plugin to our posts or pages just like I’ve done here →

A WordPress shortcode is the little bracket code that you insert into your post or page editor where you want whatever the shortcode calls to be shown. In this case, the shortcode we’re going to create will look like this: [fbrecommend]

Wherever we insert that bit of code, the Recommendations box will magically appear. But first, we have to create that magic.

Open up your themes functions.php file (for Thesis Theme users, open up your custom_functions.php file) and add the following:

//ADD FACEBOOK RECOMMENDATIONS PLUGIN SHORTCODE
function fb_recommendations() { 
	return '<div class="fb-recommendations"><fb:recommendations site="http://designpx.com/" width="300" height="300" header="true" font="" border_color="#d1d1d1"></fb:recommendations></div>';
}
add_shortcode('fbrecommend', 'fb_recommendations');

Let’s break this down. First, we’re creating a function called fb_recommendations. That function will return (or display/show) the following code:

<div class="fb-recommendations">
<fb:recommendations site="http://designpx.com/" width="300" height="300" header="true" font="" border_color="#d1d1d1"></fb:recommendations>
</div>

The code in red is the Facebook XFBML code that we customized using the attributes above. We then added a div with the class of fb-recommendations so we can make the Recommendations box float to the right using CSS; which can be done by opening your custom.css file and adding the following:

.fb-recommendations {
	float: right;
	margin: 0 0 3px 15px;
}

Tracking Which Plugin Generated Traffic

Sometimes we have more than one plugin on a page (maybe there’s one in the sidebar as well) or we just want to track which plugin is generating what traffic. We can do that by adding the ref attribute to the XFBML code like so:

<fb:recommendations site="http://designpx.com/" width="300" height="300" header="true" font="arial" ref="post-1436" border_color="#d1d1d1"></fb:recommendations>

I just added the post ID of the post I added the plugin to so when someone clicks on a link in the Recommendations box, the referrer URL will look something like the following:

http://designpx.com/thesis/facebook-recommendations-plugin/?fb_ref=post-1436

Enjoy this post? Consider sharing it:

Itech Minder October 17, 2012

Thanks to information,great job.keep it up.