Share This in jQuery

Share This icon Copyright Alex King (http://alexking.org)

Share This is an excellent WordPress plugin written by Alex King. The plugin provides a neat and customizable pop-up menu for allowing readers to easily share one of your blog posts using many of the social bookmarking or social websites out there. It’s an intelligent solution to the problem of having too many sharing icons that may potentially distract or irritate readers.

Since launching, Share This has become very popular, with many blogs using it. I recently began using the plugin for a site of mine, and was impressed by its usefulness. (And the icon project it launched) However, I had also decided to use the jQuery JavaScript framework (and its plugins) for this site, and since Share This uses Prototype for its JavaScript functionality, there were some conflicts.

So, I decided to do a minor re-write of Share This, altering only the JavaScript portion to use jQuery instead of Prototype.

jQuery?

I wanted to stick with jQuery for a variety of reasons, but mainly because I have more experience with it than with Prototype. I won’t get into an argument over which of the frameworks is better, and will instead stick to the “Unto each his own” line of thinking.

While jQuery generally works well with existing JavaScript, as it doesn’t alter the global namespace, and additionally has a “no-conflict” mode, some of the plugins that I wanted to use (specifically Thickbox) weren’t written for the no-conflict mode. The issue stems from the use of the “$” variable name. In jQuery, it’s a shortcut for the be-all-end-all function jQuery(), while in Prototype, it’s a shortcut for document.getElementById().

Share This in jQuery

Before I offer the download, I want to make it clear that this was a very minor change – no functionality was added or removed, as just the JavaScript portion was re-written (quickly) to support jQuery instead of Prototype. Again, it’s not better than the original Share This, only different. Furthermore, 100% full credit still belongs to Alex King, as this is barely a derivative work.

In order to use this version, you will need the jQuery framework as well as the Dimensions plugin. Their cumulative compressed sizes are comparable to the compressed size of the Prototype framework. You will need to link them to your site in your WordPress theme’s header.php file by adding lines like these, preferably between the head tags.

<script type="text/javascript" src="/path-to-jquery/jquery.pack.js"></script>
<script type="text/javascript" src="/path-to-jquery-dimensions/jquery.dimensions.pack.js"></script>

You can then replace the original share-this.php with the jQuery version in the zipped download. (You may want to backup the original file first, as always)

Download

Credit and Misc.

As mentioned before, all credit still belongs to Alex King for writing Share This in the first place. I haven’t really changed anything, just adapted it to work with jQuery and thought I’d like to make it available for everyone to use. It still works exactly as before, so configuring options and so forth isn’t any different.

What I changed was just the part of the plugin that outputs the JavaScript necessary to make Share This work. It’s just been changed to use jQuery instead of Prototype. I also commented out the parts of the plugin that link the Prototype framework (from WordPress) into the header. As mentioned before, you’ll have to link in the requisite jQuery script files yourself. Since it looks like WordPress will be moving over to jQuery, at least for the admin pages, this might be something worthwhile.

The JavaScript has been written in jQuery’s compatibility mode (using jQuery() instead of $), so you can continue to use Prototype on your site if you wish. As mentioned, this was a very quick rewrite, so not much has changed.

Some people have pointed out that Prototype is a lot larger than jQuery in terms of file size. This may be somewhat true, but when Prototype v 1.5.0 is packed, it comes in at only around 27 KB. jQuery packed is about 21 KB, but with the Dimensions plugin needed to make Share This work with jQuery adds another 4-5 KB, bringing the total size close to that of Prototype. So why use jQuery? Again, it’s just because I’m more familiar with it and like how jQuery expressions are formed, particularly with the ability to chain function calls.

Update

Bennett McElwee, author of many nice WordPress plugins (including some that I use on my own site), has already released a version of Share This in jQuery, seemingly two days before I published this post – what a coincidence! His appears to be more polished, though, as it doesn’t use the extra Dimensions plugin and also includes some nice effects. Definitely give it a try.

2 Comments »

  1. Great minds think alike…?

    The relevant parts of the Dimensions plugin are going to be added to the core in the next version of jQuery. When that happens (and WordPress updates its included jQuery to match) I will update my version of Share This to use it. You may well do the same for yours; and our two versions will probably end up almost identical. 🙂 Who knows, maybe Alex will update his original! He has done quite a lot of work on it since version 1.4 so he must be about due to make a new release.

  2. Thanks 🙂

Comments are now closed for this entry.