tc-fb-r

How To Add Facebook Recommendations Bar To WordPress

Bobby Holland Blog, Social Media 2 Comments

The Facebook recommendations bar is a great way to integrate the Facebook graph into your WordPress blog.  Having the recommendations bar operating on your WordPress site can help engage your readers, increase your pageviews due to more articles being read per visitor, and also opens the door to get people to send links to your blog into their news stream on Facebook which can dramatically increase your traffic and exposure.

Adding Facebook Recommendation Bar to your WordPress Site

I was able to add the Facebook recommendation bar to my site at TabletCrunch.com pretty easily by taking the following code right before the </head> tag in the header.php:

<div data-read-time=”5″ num_recommendations=”4″></div>

Once I added that code and updated my header.php, I now see the new Facebook Recommendation bar appearing in the lower right hand corner of all my articles.  Here’s a screenshot (or view this article and look to the lower right hand corner, after about 5 seconds the recommendation bar will pop up).

Setting up your Facebook Recommendation Bar in WordPress

Setting up the recommendation bar for your WordPress site is pretty simple, but you first need to ensure that you have Facebook open graph markup running on the articles (single.php) in your blog.  This is usually accomplished whenever you are running one of the many Facebook plugins on your WordPress site.  The way I’m taking care of this is by running the SEO Facebook Plugin  on Tablet Crunch which you can see at the bottom of any article.

You first need to visit the Facebook Recommendation Bar plugin page.

Then I deleted Facebook’s default URL and left it blank.  You need to leave it blank if you are adding it to the header.php of your WordPress site so that it will default to whatever article is currently being viewed (recommended…).

For the “Trigger” I left the value at at OnVisible.  That means, the clock starts ticking as soon as your page finishes loading.

The “Read Time” I put at “5” which means the recommendation bar will pop up after 5 seconds.  According to Facebook documentation, the lowest value you can enter is 5 seconds.  I actually wanted something more like 2 seconds, but can’t make that happen.

Verb is self explanatory – do you want your bar to read “Like” or “Recommend”?

Side is also self explanatory – do you want the bar to appear on the lower right or left hand side of your of your site.

Domain:  also leave this field blank since you are adding the code directly to the header.php.

Now go ahead and add your code (or just copy and paste the code below) to your header.php, placing it directly before the </head> tag.

<div data-read-time=”5″ num_recommendations=”4″></div>

The only additional attribute I added was the “num_recommendations” because I wanted to show 4 articles instead of the default 2 – you can take this number up to “5” max.

And that’s about it.  Go ahead and try it out and let me know in the comments below how it goes.

And share a link to your site so everyone can come and check it out!