For those of you who are unfamiliar with it, Thickbox is a javascript program that allows for displaying images, webpages, etc. in a popup frame over top the page, similar to lightbox and shadowbox. It’s a useful script which is even used by WordPress itself for things like theme previews for self-hosted blogs. Currently WordPress.com users can access Thickbox functions by putting the Socialvibe widget in their sidebar. The Thickbox functions can then be accessed, in their most basic form by adding class=”thickbox” inside the anchor tags for links, and most of the functionality on the Thickbox page is able to be used in WordPress.com blogs.

However Thickbox has a known issue where it will often appear underneath flash elements on webpages. Now there are documented fixes for this issue but they require the user to specify the wmode of the flash elements to transparent or opaque and specifying the z-index of the flash elements to something lower than Thickbox’s z-index. Now if your blog is on WordPress.com you can’t do those things. Luckily it seems some flash elements have been fixed by the WordPress team already, such as youtube videos placed into posts with the youtube shortcode. But one offender is blatantly not fixed, the MeeboMe widget.

Now this is a real shame, because if you want to use the MeeboMe widget it has to be on the sidebar, which depending on your theme means every Thickbox everywhere is going to end up under MeeboMe, and you’d just have to hope your readers are intelligent enough to scroll up or down enough to get the Thickbox to come out from under the widget, but what a pain that is. However I have come up with a solution for this quandry that works for me. More Thickboxes! Since Thickboxes can display other things than just images, like HTML files, we can use Thickbox as a container for the MeeboMe widget. Then instead of using the MeeboMe sidebar widget we can use the text widget to create a button that opens up a Thickbox with the MeeboMe widget inside of it. This way the MeeboMe widget only appears when the reader clicks on the button to IM you, leaving your other Thickboxed content to roam free without  MeeboMe appearing on top of it.

To accomplish this the first thing you’ll need is some webspace of your own to host a single HTML file. How much space? The HTML file is only going to be one 1KB in size. Some ISPs will give you a small amount of webspace which could be used and there are a number of free hosts out there that might work as well. It doesn’t have to be fancy just as long as it can support a simple HTML file. Once you have your webspace up you’ll need to make an HTML file with your MeeboMe widget inside. If you haven’t done this yet you can goto the MeeboMe website to get this code.  If you’ve already setup your MeeboMe widget then you’ll need to log into your Meebo account, and then click on Preferences > MeeboMe Widgets and copy the HTML code for the widget you want to use. Once you’ve done that open up a plain text editor, such as Notepad, and copy the MeeboMe embed code into it. Next save the file but instead of saving it as a .txt file save it as a .html file. For my example I named my HTML file “meebomewidgetpage.html”. If you do this right then you should be able to goto the directory where you saved the file and then you should be able to open the file and a blank webpage with the MeeboMe widget inside will open.

Once that is finished your next step is to upload the HTML file to your own webspace. Next make sure you know what the address of the file is on your webspace. It’s usually a good idea to try writing in the http:// address manually into your browser and making sure you can pull up the HTML file you made up in your browser. Once you have that done you’ll need to goto your WordPress.com blog and goto your blog’s Dashboard > Appearance > Widgets and drag the Text widget into your sidebar. (If you still have the old MeeboMe widget in your sidebar you’ll probably want to remove it at this time.) Once you’ve done that you need to use the text widget to create a link, using HTML markup, to the HTML file you uploaded onto your webspace earlier. You then need to click the save button in the text widget to save the link that will become your new MeeboMe widget button.

Now that you know how to use the text widget to create this button to access the MeeboMe widget you need to know exactly what HTML code to put into the text widget. Here’s an example using my own MeeboMe widget. Don’t be intimidated by the long HTML code, we’ll break it down into parts in the next section.

Now let’s break down the HTML code into parts so it’s easier to understand. First of all this piece of HTML code is an <a> tag, or anchor tag, used to make a link, the same as if you used the visual editor to create a link. However this particular link has had a few things added to it to effect how Thickbox interacts with it. First class=”thickbox” tells the Thickbox script that we want to use it to open the link inside of a Thickbox. Second title=”Click ouside this box to close” has been added to display the caption that appears on top of the Thickbox when you click the link. This has been added due to  a problem in the way the Thickbox is implemented on WordPress.com where the icon won’t appear when you’re inside a post or a page. This isn’t a big problem for images because you just click anywhere in the page to close it, but since we’re displaying an HTML file that you click inside of the Thickbox won’t close if you click inside of it, so this caption has been added to make things easier on your users, and it is also completely optional. Next you’ll see the href=”http://furluge.heliohost.org/etc/meebowidgetpage.html?KeepThis=true&TB_iframe=true&height=290&width=190&#8243; This is what the link actually referres to. The web address should look familiar to anyone who’s typed a web address into a browser. When you do this for your blog you need to change http://furluge.heliohost.org/etc/meebowidgetpage.html to the address of the HTML file you made earlier, otherwise your readers are going to end up sending all their IMs to me, and as much I like you, that’s just asking too much. 😛 The second part of the link ?KeepThis=true&TB_iframe=true&height=290&width=190 is something added for working with Thickbox. The ?KeepThis=true&TB_iframe=true part tells Thickbox that we want to open an HTML file in our Thickbox. The &height=290&width=190 part of it specifies the height and width of the Thickbox we’re opening. I’ve found the height and width settings in the example to be perfect for fitting the standard size MeeboMe widget and accomidating the “block” tab from the popular Adblock Plus Mozilla addon adds on top of the MeeboMe widget. Next target=”_self” just makes the Thickbox appear in the current browser window instead of opening a new window. Lastly the part that says Click me to launch MeeboMe! is what the link looks like to the reader, and can be replaced by anything you like, most commonly an image. An easy way to get the right HTML code for an image is to simply insert an image you want into the visual editor and then to goto HTML tab and then cut and paste the code inside the anchor tag for the link.

A lot of work, I know, but once you have it down pat you can use a little HTML, the text widget, and a little time in your favorate graphics editor to create a snazzy little MeeboMe button like the one you see below.

HTML Code	Output Example
<a title=”Click outside this box to close” href=”http://furluge.heliohost.org/etc/meebowidgetpage.html?KeepThis=true&TB_iframe=true&height=290&width=190&#8243; target=”_self”><img title=”Meebo-Icon-IM-button” src=”https://furlugedepot.files.wordpress.com/2009/08/meebo-icon-im-button.png&#8221; alt=”Meebo-Icon-IM-button” width=”220″ height=”32″ /></a>

Feel free to copy, save, and upload that button image to your own blog for use in your own blogs.  Unfortuantely if you want an icon that matches your own theme you’ll need to make one yourself. Enjoy your new Thickbox friendly MeeboMe button!