Themergency fooplugins

Hello Foobar Version 2


Foobar has recently had a MAJOR overhaul. And by overhaul, I pretty much mean a rewrite! If you do not know what the foobar is, it is the notification bar that is showing at the top of this page.

New Options Structure

The options for foobar have been completely rewritten from the ground up. This is a breaking change for anyone upgrading from V2. The reason for this change : there were just too many options and they were not organised in a logical way. So they are not different. Luckily, we have written this options converter, so you can enter your old v1.8 options, and we will output the new v2 options for you. 

Bottom Bars

Probably the most requested feature of them all. Bars can now be placed at the bottom of the page. Set the current foobar to the bottom. This can be done by setting the following option:

"position": {
  "bar": "bottom"

Check out the position demos from the documentation.

5 Button Themes

We have included some new button themes, so there are now 5 themes to choose from. Check out the themes demos. It is also very easy to create and use your own button theme!

Navigation Arrows

If your foobar has multiple messages, you can choose to display tiny navigation arrows when you hover over the message area. This allows the user to quickly navigate through all the messages. Check out the navigation arrows on the main documentation page.

Smarter Widths

One of the most requested features was the ability to have foobar messages that expanded to fit the browser window. The message area used to be set to 50% of the screen, and it was difficult to center the messages if you were using the left or right HTML areas. No longer! You can now set widths with “*” values, which means they will fill the space available. Check this out:

"width": {
  "left": "20px", "center": "*",
  "right": "20px", "button": "80px"

Check out the width demos from the documentation.


The foobar now has methods, so it is easy to integrate with. For example, if you want to force the current foobar to toggle, simply execute this code:



There are also callback events to let you customize the experience even further. This was added so that we could integrate nicely with other plugins in WordPress, like buddyPress. Here is an example:

"events": {
  expanding: function(o){
  collapsing: function(o){

Fewer Setup Issues

One of the biggest gripes we got from users was something like “the foobar is not showing up on my page” and the reason 9 out 10 times was the same : there were 2 versions of jQuery being added into the page. Normally, this does not break jQuery plugins, but foobar was written as a “static” plugin. This meant you did not need to bind the foobar to any element, as it didn’t really belong to any element, but rather belonged to the page as a whole. So we fixed this problem by providing everything through a new global variable:


Other Changes

Together with the above major changes, here are some other changes or improvements made:

  • Better Custom HTML Support (no hard coded line heights)
  • Better cookie support
  • True RTL compatibility
  • True random messages
  • Options to change social profile text and font
  • Using image sprites rather than separate images

Go Get It Now!

This version of the foobar is better than ever before. If you were unsure before, then there is absolutely no way you could resist to get it now :) Go and get yourself a copy.

Still Not Convinced?

Check out the documentation and demos!

  • Get Livefyre
  • FAQ

please put event example,

how to close foobar in 10 sec after expanding 


I've been waiting for this. I think I'm the first to comment!