Making a Social Music Site in Drupal, Part II

At the end of Part I, we had decided on Drupal as the CMS of choice for Rifflet.com, a site where users can upload and share unfinished music they’ve recorded. Here’s where the problems started:

I initially installed Drupal 6.2 because GoDaddy, our hosting company, offered it as part of their 1-Click installation program.  If you’re not familiar, here’s how it works: instead of going to Drupal’s site, downloading the latest version, setting up a mysql database, uploading the files and running the installer script,  you can just tell Godaddy to install Drupal and let you know when it’s ready.  It’s nice, although to be honest, doing it the hard way only takes about 5-10 minutes.

So Drupal 6 was looking great until I went to download the Audio Module, which was to be the most important part of the site.  There is no stable version for Drupal 6. (There’s a development version, but it’s not recommended for use yet.)  No problem; I can just use the one for Drupal 5.  Not so fast. Drupal modules are not backwards compatible. Unfortunately, themes are the same way,and there aren’t exactly a ton of them for Drupal 6 yet (although the number is growing).

So that sucked. I had Godaddy uninstall Drupal 6 and I went back to Drupal.org and downloaded version 5.7 and got it running.  Now to pick a theme. After some looking around on Drupal.org I settled on one called, appropriately enough, Internet Music, which I liked for a couple of reasons:

• Fixed-Width. I think fluid-width layouts make for some ridiculously oversize lines that just plain suck to read on a big monitor.
• Two Columns. I’m not a fan of the left and right sidebars, although I do like the three column layouts with the content on one side and the sidebars next to each other.
• Nice Color Scheme. This site is supposed to be about all different kinds of music, so I didn’t want something that was too far in one direction or made the site look too techno-ey or rockin’, for instance. Think Flickr.

Note: if we had been building this site for a client, or if we had known at the beginning how big a project this was going to be, we probably would have built something from scratch.  But we didn’t. Sue us.

With the theme in place, it’s time for some basic customization. After heading to Administer>Site Building>Themes, I chose the Internet Music theme and clicked on configuration, which allowed me to upload a logo graphic directly to the site. I also had the option to add the site slogan and mission statement.   In this case the slogan, “home for unfinished songs,” was built into the logo .gif, so I left it out.  Probably not the smartest idea from a search engine standpoint, but we made up for it later on.

The Internet Explorer Problem

I like the Internet Music theme a lot, but it has its share of browser compatibility issues, which were made worse with my screwups tailoring for Rifflet.  Specifically, it looks crappy in IE.  Text was overflowing boxes, and perhaps dumbest of all, the rounded corners were made with the -moz CSS property instead of, um, any other way of making rounded corners.  I wasted way too much time trying to fix this particular issue and wound up settling for a giant cheat: IE7-.js, a javascript library designed to make IE work like Firefox and everybody else.  Not the smoothest fix, and I’m sure it slows the site down on IE, but it worked, and the stats eventually showed that most  Rifflet visitors weren’t using IE anyway.

Modules-Making Stuff Do Stuff

I already talked about the Audio module, which is the core element of Rifflet.  Next, I wanted to add some more features that would allow users to upload more information about their music and maybe share it with some other people.   Here are a few of them, in no particular order:

• Tagadelic:The biggest part of the site is searching through mountains of user-submitted rifflets to find something specific.  Tagadelic allows uploaders to tag their own music and listeners to tag the music they find.  The more tagging gets done, the better the search works, and the less work I have to do, which is awesome.
• Favorite Nodes: I wanted people to have a reason to register and build a profile.  With this module, users get a ‘Save to Favorites’ link under each rifflet that allows them to build lists and find stuff they like faster.
• Fivestar: A cool way of adding an ajax-based rating system to each rifflet.  You just listen (or not) and click how many stars you think a song deserves.  Like writing for Spin, with none of the guilt.
• Invite: An easy way of passing Rifflet along to a friend.  You click ‘Invite a Friend’ in the main menu and get a form to introduce Rifflet to some dude who is probably not so thrilled to get spam emails from you.
• SimpleMenu: Drupal sites can sometimes get information overload in the form of lots of menu items in multiple menus, expecially if you’re an admin.  SimpleMenu puts most of the menu stuff (you can control how much) in a nice javascript drop-down menu at the top of the screen, where it can hide away when you’re not using it.

There are lots more coming in Part 3.  And, I’ll write about promoting the site and what getting an interview on Gizmodo can do for your hit count.