OpenID Authentication Plugin for vBulletin 4

Recently I volunteered to help fix an existing project or develop an OpenID authentication plugin for the vBulletin platform. The group in need was UbuntuForums.org and I would have never known if it hadn’t been for Jorge Castro’s public request for help.

The Story

The existing plugin had been developed specifically for vBulletin 3.x, however, they are (as of writing this) in the process of upgrading their forums to vBulletin 4 especially wanted OpenID to be available when they make the upgrade. That’s where I came in.

Canonical, the company behind Ubuntu, provided me with necessary software licenses for vBulletin 4 and from there it was a lot of late nights attempting to simply get a successful OpenID process to occur.

Working a full time job doesn’t make projects like this as easy as I remember them once being… Nonetheless I was able to successful port the plugin to vB4 where there were several significant differences that took me some time to address and to be honest, the previous code was a bit more complicated to follow than it should have been.

One major change from vB3 to vB4 was the way templates work. I’d never worked with vBulletin before, but I’ve had an extensive amount of experience with phpBB and bbPress in the past. After getting over the frustration of how vBulletin prefers to store ALL template information (in the database rather than pull from template files) I was ready to begin the repair process.

One major annoyance was that vBulletin 4 kept a “deprecated” method intact for vb3 templates that haven’t yet been ported and the deprecated method would printout a warning on the live page letting you know that you should update your templates. That’s not a problem, but vBulletin likes to only release helpful information to License holding, account proving customers. I had a license yes, but was not the owner and unfortunately I was unable to get much of a response from the Ubuntu mailing list about getting access to vBulletin’s online support section.

For anyone having similar issues, I’ve posted the error message that I first came across below. If you got here, then you probably found the vBulletin post regarding this, but if you don’t have access like I didn’t then you’re still in luck…

Warning: fetch_template() calls should be replaced by the vB_Template class in [path]/includes/functions.php on line

While it was pretty clear that fetch_template() was deprecated, I was unable to get a clear usage example of how to use the new vB_Template class. I finally came across a post on StackOverflow that was exactly what I needed. Other issues that I had with fixing the plugin were some issues with SQL queries and were much more critical.

I wrote an article recently on how to debug PHP in real time as you’re using/executing a page or function… all through the very well known Eclipse IDE. If you’re interested in PHP development then you should certainly take a look at that post as it walks you through the setup and will make your life much easier. After tracing through the code over and over, each time finding new little issues and having to walk through the entire log in process again each time… I’d finally managed to get a successful authentication. So, I took a screenshot of my development environment…

vBulletin OpenID Plugin First Success

It wasn’t long after the first success that I was able to pin point other problematic spots faster and then from there everything just fell into place. In fact I had “full functionality” only about an hour after the first success. That didn’t mean that I was finished.

There were still a lot of minor issues that I’d found with the code. Array index out of bounds, corrupt query results in some situations causing a critical database error page to appear, unhandled invalid urls would take the plugin for a ride and ultimately crash, etc.

I’ve now worked out all of the issues that I came across from my own testing. Hopefully Ubuntu and Canonical won’t find any either and the upgrade can occur soon!

Download for Free

If you’re here for this plugin then I’m sure you’ve seen that there aren’t many (dare I say any) that are working, free or at least reasonably priced. Fortunately this plugin is based on an open source PHP OpenID library and Canonical apparently plans to maintain it from here on out in their source control service.

Before you download: I’ve posted a direct download the vanilla release that I first pushed to Canonical, however, its in your best interest to check for a newer version on their source control page for this plugin. That being said, feel free to continue on to download!

Download from me (last updated 2012-09-29)

Download from Canonical

Installation

This plugin contains a README and INSTALL file that should go into plenty of detail to help you install and get going in no time at all. The only thing that is left for you is to optionally improve on the simplistic log in form as seen below.

vBulletin Simplistic OpenID Login Form

While I do indeed love web design and development, I left the OpenID log-in form simplistic for one reason: Every web designer designs differently and its a waste of my time to put much effort into this when people who use it will likely want to use it in a way I never considered. The good news is that, it doesn’t appear in the header by default, so you can actually place this little form ANYWHERE you want. However, due to obvious reasons, you’ll likely find the header as I’ve done to be easiest as it automatically disappears one the user is logged in.

Conclusion

It’s been a fun month or month and a half that I’ve spent dabbling on this plugin. I’m always happy to contribute where I can to communities that I’m interested in or proud of and I consider this volunteer effort to be no different.

I’m also a little excited to see how the vBulletin community accepts this plugin. Will it be a boom or a bust? Only time will tell, but until then hopefully UbuntuForums.org will be enjoying OpenID functionality!

Making CSS UL Menu’s Browser-Consistent

If you’ve ever made a web site and wanted it to look consistent from one browser to the next, then you’re well away of the difficulties that are involved. Fixing these sorts of styling issues can be a major annoyance, however, I like to hunt down issues on my own pages from time to time and stand up to the challenge.

One issue that I can across today was dealing with horizontal menu positioning using unordered lists (<UL>) and some positioning. The positioning wasn’t consistent between browsers or even operating systems.

The bad

I started by opening the affected page in multiple browsers (Internet Explorer, Safari, Chrome, Opera & Firefox) on multiple computers (Mac, Linux & Windows) and getting some initial comparisons. There were 3 different variations and (oddly enough) the same browser didn’t necessarily render the same on a different operating system. So there I was. A puzzle… and I like puzzles.

Some of the first things that I inspected were font sizes and families. It occurred to me that different operating systems may differ in fonts, so it seemed like a good starting point. I tested this by forcing a common font: Arial. That wasn’t the problem. The inconsistencies remained consistent.

I also checked into the possibility that the <UL> or <A> elements were applying different heights. Typically anchor elements, <A>, use a display style of inline. If you’re implementing a menu similar to mine then you’re likely applying a block style, which permits better dimension definition of the element. Forcing height on these elements also did not resolve the issue.

I was running out of ideas, but then it hit me. Line-Height. While the other styles appeared to be consistent between browsers and operating systems, there was one style that I’d previously worked with and knew was certainly NOT consistent: line-height.

The good

After forcing a consistent line-height in my CSS, all browsers suddenly began respecting my intended styling. Sigh of relief.

On that note, its worth bringing up the success that browser competition has brought to HTML and CSS rendering standards over the past few years. The push for the fastest and most capable browser has brought a scattered group of browsers a little closer and the result is that we get to enjoy dealing with fewer and fewer bugs.

While your average Joe web developer may have dug around for hours for this issue to no avail, I must say… I thought it was nice to face such a subtle issue rather than being forced to use some crazy IE specific hacks like for legacy IE.

Ubuntu 10.10 Banner

38

Recently I was looking through the Ubuntu 10.10 banners and really liked the simplistic design of one by Anthony Scarth.

Curious about adding it to my blog (as you should now see in the right column), I fired him an email. Unfortunately he didn’t have a script prepared, but still offered up the images!

Taking a little time, I grabbed the old script for an Ubuntu 10.04 Banner, made a few modifications (and corrections) and got the banner up and ticking in no time!

If you’re interested in using one of these two banners on your site then you’ll be happy to know I’m posting easily linkable scripts to these two right here!

Orange
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/orange.js'></script>

Purple
<script type='text/javascript' src='http://www.kyleabaker.com/fun/ubuntu1010banner/purple.js'></script>

Copy and paste the style that you’d like to use into your blog or web site. If you have any problems just let me know.

Be sure to give Anthony a shout out and thanks if you like his design as well! You can find his email listed on the Ubuntu banners page linked above.

New WordPress Twitter Badge Plugin!

wp-twitterbadge-01

After coming across this nifty little Twitter Badge at Techie-Buzz while reading a Google Chrome OS article, I realized how cool their little Twitter link was and I instantly new it was going to be on kyleabaker.com as well. :D

wp-twitterbadge-01

After a quick look at the source code of the page, I had decided to build a quick plugin for WordPress to insert the same code. So the plugin process began.

I didn’t want to hard code it into the footer of my K2 theme, because I frequently update to the latest K2 theme nightly builds. This way would save me a lot of trouble and even make this neat little Twitter Badge available to thousands. And so…WP-TwitterBadge was born.

wp-twitterbadge-02

I traced the code back to an embeded script from go2web20.net and realized how n00b friendly this script would have been to install anyway even without an easier plugin to install it for you, but the fact that it would save me time in the future was well worth it.

Basically, if you’re not using the WordPress plugin, you just link the script and set a few variables. This made it very easy to make it customizable as well!

Just mimicking their own setup page, I was able to make a quick Options page featuring a live preview (as all of my plugins have so far ;) ). I even coded the preview with way less script than they used on their own page since extreme error checking is really not needed (everything is live so you can see the problems there).

wp-twitterbadge-03

At a rate of 20-30+ new downloads per hour I would say that this plugin is by far my most favored project…considering that it hasn’t been reviewed yet (no trackbacks thus far) by anyone whereas others already have.

If you’d like to checkout this little Twitter Badge on your own site, just head over to the plugin page or search for “WP-TwitterBadge” from your “Add New Plugins” page in WordPress and install it from there. If you like it, pass it on!

WordPress Plugin WP-UserAgent 0.8

wp-useragent-0-8-img1

I’ve just updated WP-UserAgent to version 0.8, covering a lot of ground over the past few days. As I’m working to reach a stable and solid 1.0 release, I’m also working towards a feature complete plugin.

Version 0.8 offers support for detecting ~90 different web browsers and ~35 different operating systems (counting each version of windows).

wp-useragent-0-8-img1

Easy access to WP-UserAgent settings is worked right into the Plugins page. No more need to search for options to edit!

Once you find the options page, you’ll find a cleaned up look and feel, along with a real-time preview of how your changes will appear.

wp-useragent-0-8-img2

If you’re in need of a cool geeky WordPress plugin, why not give WP-UserAgent a shot? It’s an interesting way to find out a few details about your subscribers and other visitors!

Find out more details, changelogs and downloads on the official WP-UserAgent plugin page.

NC State ACM/AITP Website Update

acm-aitp-site-upgrade-2009

I just finished (or reached the publishing or pushing live step) the update to the NC State ACM/AITP website.

The improvements over the previous design are pretty drastic when it comes to user interface and ease of use.

I ended up going with a K2 theme for Drupal since I’m such a big fan, but it just didn’t seem right for the site at first. I ended up going through and modifying a great deal of a barely and poorly done version that I came across online so I had to finish up most of it myself, but that just allowed for making it suit my (read ‘our’…for the club) needs.

acm-aitp-site-upgrade-2009

After working with the html and tweaking it hardcore until I got it clean so it passes HTML Validation inspection it was time to tweak the CSS.

This became a breeze with Opera’s Dragonfly developer tools. I was able to select an element and tweak the style sheet live so I could see real-time results. After making an adjustment it’s as simple as updating the actual stylesheet.

After tweaking the style almost obsessively for hours the first day I decided it was time for a break. It wasn’t long before I got back into the groove the next day and finished it up (for the time being).

I really have to say that I am in love with Dragonfly now. I’ve used Firebug in the past and to be honest I’ve never been a Firefox fanboy…it’s a good browser, but it’s not pushing standards support at the rate that I want and Opera is just better at a lot of the things that I use and need from a browser… anyways, I got used to Firebug a while back and Dragonfly vs. Firebug isn’t a fair competition because the both are still very different, but I find Dragonfly being easier to use ever second compared to Firebug.

After getting the code working it was time to push the update. As a result, the NC State ACM/AITP club now has a much friendlier outlet on the web!

Now I have the pleasure of tackling any smaller issues such as stylesheet problems. :D Updating the content will now be much less of a pain now that it can be updated directly from the browser for most everything.

WP-UserAgent 0.5.3.3 Released

I’ve just uploaded an update to my WP-UserAgent plugin that improves a great deal on the settings page in the administration panel.

This update also has several backward compatibility fixes. Just looking forward and trying to make sure everything works fine in other versions of WordPress since not everyone uses the latest version.

You can find a list of changes to version 0.5.3.3 and the download on the same page.

I’ve also updated the download page to reflect the browsers and operating systems that are currently detected.

If you know of one that is missing and would like to see it added then feel free to let me know in the comments on the download page. If you can post a user agent string sample as well then that would be great, but if not then it’s not necessary.

If you are using a browser and/or operating system that is not listed then please just post a comment letting me know what browser and/or operating system you are using. I should be able to do the rest. Thanks!

WP-UserAgent: A new User Agent plugin for WordPress, by me!

I’ve posted a modified WordPress plugin that you can download, extract and upload to your WordPress plugins folder to use.

I call it WP-UserAgent…a much more generic name than before. I prefer generic names. ;)

After activating it, it will show the operating system and browser of each user and comment for all of your posts and pages.

Enjoy and feel free to suggest improvements!

New Widget: Latest Snapshots

opera-desktop-team-latest-snapshots-preview-02

I just finished writing a new widget that may be helpful to some of you Opera Desktop Team enthusiasts. It reloads the latest builds every 5 minutes by default, but can be configured to any interval.

The widget is very simple, and if you want to test it before it’s available from the Widget repository then you can grab it from my site here.

The current version as of making this post is v1.0, but I’m going to be releasing an update soon to notify you when a newer snapshot build is available and also show in the widget the current build that you are using so it’s easier to reference. ;)

If you have any comments or suggestions please leave them on the widget page here. Enjoy!

Coding: Online Alarm

online-alarm-clock-log-in-2

I’ve been working on my Online Alarm clock that I start writing more than a year ago! Really, I’ve just been going back to try to finish more of the user interface and clean up more of the code.

The work that I’ve been doing to the user interface includes bringing the design into the years of Web 2.0 with cleaner, larger and simpler layouts.

Just take a look at the difference between the original log-in page (top) compared to the log-in page after I completed functionality and updated the styling to make it a little more Web 2.0 friendly!

It’s amazing to me how you can have a functional web application, but if you don’t make it look nice then it seems like it’s so much more difficult to navigate and use. User interfaces really help sell a product as well, so hopefully I can get this one setup nicely.

I had planned on uploading the source code to the Google Code page that I made for it, but I’m still waiting to work out some kinks.

Mainly, I’m waiting until I get the GUI finished a little more so I will know which MySQL fields are needed and should be installed by an installation script.

The script itself shouldn’t be too difficult, but I really need to map out the process before I start coding it so I can make the installation as simple as possible at the same time.

I’m thinking it will be as simple as uploading all of the files to your server and completing a setup form that just requires server credentials (of course) and an initial Admin username and password. That should be quick and easy and get everything ready to start using!

There is also the issue of completing the admin control panel. If I don’t complete it then the admin will have little control over the service unless they choose to edit everything via phpMyAdmin or something like that.

It shouldn’t be too long before I can bring this project to a version 0.1 level, haha. Then you’ll be able to download the source and do what you wish with it for free (hopefully submit bug reports and patches :P )!

Widget coding: Google Translator

google translatorIt’s been a while since I’ve worked on the widgets that I submitted to Opera Widgets. So I spent the last few days in my spare time just working on one of my most popular widgets…Google Translator. For the longest time it was handy, but not very well designed and the layout was poor…just a quick solution.

If you do translations from time to time or even often then you may find my widget very useful! You can convert text to and from many different languages and even web pages. The translations are done using ajax in the widget to fetch results from Google’s Translate service.

This widget, which is currently only available through Opera and Opera Widgets, happens to be a very popular widget and downloads count some where near ~82,000 at the moment.

I just uploaded version 2.1 yesterday, but the Opera team has to inspect the widgets to make sure there are no problems or possibly fraudulent activities going on in the background (kind of annoying since they don’t go live immediately and end up taking days, but worth the security).

Anyways, v2.1 included several improvements over the previous 1.42 (a.k.a. 2.0). An update notification is now included, the tabs are redesigned to match Gmail’s design a little closer, jQuery effects are now tied into the widget to make it more aesthetically pleasing to the eye, options were moved from a sloppy and quick side panel to the footer of the widget and can be toggled on and off, a more menu was added to pack in several more features that didn’t fit anywhere else (similar to Gmail’s more menu), useless images that could be replaced with css have been removed and a stylesheet has taken the burden off of inline styling which was never intended to be permanent..but a quick way to get the layout fixed right.

There are actually many many more changes and if you want to see a list then you can take a look at the changelog here.

I actually went above and beyond v2.1 almost immediately after publishing it. After creating a stable version (2.1) it was time to push the widget further, so v2.2 has many more fixes and updates. Optimizations are in progress and going well to reduce wasted code and duplicate elements that are not needed. There is actually a “Beta” version of v2.2pre1 on my Google Translator site. You can go a head and check it out if you want and see some of the updates from 2.1. It should be stable enough to use, but it’s not finalized just yet. ;)

Anyhoo, just wanted to update everyone who reads my blog! Hope you’re all using Opera or at least gave it an honest run. ;) It’s a great browser, but sometimes you just can’t break away from the chains that tie you to another piece of software (most of us that would be Microsoft, lol).

Stay cool!