How to Resolve Javascript Conflict from Sharebar Plugin

Recently we installed a great little plugin to use on our blog named Sharebar (Bob actually talked a little bit about it here). It adds a vertical floating box to the left of a blog post that contains buttons to several social networking sites like Twitter, Facebook, Digg, etc. It’s an effective tool for user engagement because it makes it dead simple for someone to post a tweet and/or give you a Facebook like on your blog post or articles.

But soon after setting up the plugin I discovered (almost by accident) a conflict in the ShareBar javascript with some of our pages, notably our product pages where we use a lightbox to display larger images of screenshots. When clicking on an image, instead of getting the lightbox, it simply opened the web page of the larger image. Not cool.

So I launched Firebug and found the following error on one of the product pages:

This error was coming from line 27 in the /wp-content/plugins/sharebar/js/sharebar.js file, and opening it up I realized a simple null check was needed for a quick fix. Line 27 is now on line 29, with the null check just before it:

And sure enough, that did the trick.

The root cause of this is a setting in Sharebar. The plugin allows you to display the Sharebar on posts and/or pages, with the default to show it on both. But I turned off the setting to show the Sharebar on pages; we only wanted the Sharebar on our blog posts.

Essentially, the line of code above is expecting the Sharebar to always be there, which is obviously a bug given the options to turn it on or off for pages and posts. I plan on forwarding this post to the Sharebar author in hopes that he’ll apply the fix, but in the meantime, if you run into this, now you know how to fix it.