How to add the Facebook Recommendation Bar to your Website (and how to stop it from opening all the time!)

How to add the Facebook Recommendation Bar to your Website (and how to stop it from popping up all the time!)In this, the second in our series of guides focussing on the integration of social media plugins, this week we’re looking in detail at Facebook’s ‘Recommendation Bar’ by a) finding out if it’s as easy to install as Facebook claim, and b) conducting our own (rather non-scientific) tests to find out if it was worth all the hype.

Oh, and if you’d like to find out how to stop it from constantly opening then read on!

So what is this Recommendation Bar?

Officially launched on July 26th of last year, Facebook stated that this plug in would allow visitors to ‘like’ content and share it with their friends which in turn would significantly increase click throughs to other articles in your network. We’re happy to translate this typically ‘wooly’ description as follows:

When the Facebook Recommendation Bar is installed on a web page, you will notice it sitting at the bottom right (or left) of your browser window. Ironically, the default label displayed on this bar is actually ‘Like’ rather than ‘Recommend’ but this can be changed during set up if you wish; indeed it would make more sense!
  facebook recommendation bar

As a visitor reads the page, the recommendation bar opens at a pre-determined time (more on this later) and displays other ‘recommended’ articles based on the content that the visitor’s Facebook friends have already liked and shared on your website.

open facebook recommendation bar So far so good?

Well, sort of. In principal we think its a good idea. Research suggest that you’re likely to be interested in the same things as your friends and even if you’re not, the very fact that they have ‘liked’ a page or article may well encourage you to read it.

Either way, first impressions are that its a clever way to promote other content on your website which, as Facebok themselves suggest, should increase click throughs and readership.

Why do I hesitate?

Well, after installing this plugin and navigating around our website, one of the first things that struck us is that its actually quite annoying! This may have been exaggerated a bit because of course you naturally spend more time on your own website, but when it pops open it can hide whatever you’re trying to read at the time.

As I mentioned earlier, the point at which the bar opens is predetermined during set up but by default will trigger either a) when the visitor scrolls past the point where a particular tag has been placed within the HTML of the page or b) after 30 seconds. There is a third option which spcifies that the bar will open when the visitor has scrolled through a certain % of the page but this has to be configured during set up.

One thing that we noticed during usability testing is that people don’t just read a page from top to bottom; they jump around scrolling up and down perhaps just reading particular words or sentences that happen to catch their attention. Because of this, they were continually triggering the bar to open which is why it became annoying.

Having read similar comments on various blogs around the web, this is probably why uptake of what should be a very powerful plugin has (in our opinion) been rather slow. 

So, what’s the solution?

facebook recommendation bar read timeWell the solution of course is quite simple. When configuring the bar, just set the ‘Read Time’ option (the number of seconds the bar will wait before opening) to a high number. That way, you effectively stop the bar from opening altogether. But doesn’t that defeat the object of having it in the first place?

Try playing around with the various set up options until you find one that you’re happy with and don’t forget to ask your visitors what they think. After all, they’re the ones that will be using it!

To Set Up & Install the Facebook Recommendation Bar, follow these steps

1) Visit

2) Scroll down to the form on the left hand side and configure the settings that you’d like for your recommendation bar:

  • URL of the article: Leave this blank to default to the page that the bar is to appear on
  • Trigger: There are 3 options to make the recommendation bar open:
    • onvisible – the default value, opens when a user scrolls past the exact point where the HTML of the bar is placed on the page
    • X% – where X is the % of the page that has been scrolled
    • manual – use this option to manually trigger the bar (this is generally only useful if your page contains multiple articles)
  • Readtime: the number of seconds the recommendation bar will wait before opening (set this to a very large number if you want to have it always hidden)
  • Verb to display: Changes the label of the bar – ‘Like’ or ‘Recommend’
  • Side: The side of your browser window where the bar should be shown, either left or right
  • Domain: This is the domain for which you want recommendations to be shown for. Leave it blank to show recommendations for your current website.

3) Once you have completed the setup above, click ‘Get Code’ and you will be presented with two pieces of code to copy and paste into your web page. However, before you can do so you must replace the ‘APP_ID’ with an existing app ID or create a new app and assign it to your recommendation bar.

To create a new app, follow these steps:

  1. Ensure that you are logged in to your Facebook account and click on ‘Create new app’
  2. A small window will appear into which you must type your desired ‘App name’ and ‘App namespace’. Use something descriptive for your App Name e.g. ‘Web Design Directory’ and the App Namespace can be something like ‘webdesdir’. Remember the App Namespace needs to be unique. Finally leave the Web Hosting option unticked and click ‘Continue’
  3. At this point you may be prompted to varify your Facebook account by adding your mobile phone number. If not prompted we’ll assume you’re already varified and you can continue to step 4.
  4. The final step is to fill in one of those nasty Captcha codes and once completed you will be transfered back to the original plugin set up screen.
    Slight usability issue here we think because, assuming this is your first foray into the world of Facebook apps, you’ll be wondering where to find the App ID that you’ve just created.
    Well, if you look at the navigation bar at the top of the screen you’ll find an ‘Apps’ link. Click this and you will then be prompted to register as a Facebook Developer (if you’re not already). Sounds flash eh? Registration is just two clicks and once done you’ll finally have access to your App ID. Copy and paste into notepad for use in a moment.

4) Go back to the Recommendation Bar set up page and once again select ‘Get Code’.

5) Copy the content of the second box and paste it at the bottom of the <body></body> tag of your HTML, and then copy and paste the content of the first box right below it.

6) Hey presto, your recommendation bar should now be up and running!

avatar Name: James Briggs
About: James is a Digital Marketing Consultant with over 12 years of design, development, search engine optimisation and project managment experience previously fullfilling a number of senior roles for two of the South's most well established and successful digital marketing agencies before setting up WebSafe Solutions Ltd in 2009. In his own words..."I've planned, designed and developed countless websites and am proud to have helped hundreds of clients to get the very best from their digital marketing campaigns. Some would say I have an unusual blend of knowledge, skill and experience and for my sins I'm an absolute perfectionist!"
Posts by James Briggs (29)