I had tossed that idea around a lot over the past year, since I run several websites that run on WordPress, but I had heard from enough people who ran into plugin/MU conflict issues that made things go ‘splody ‘splody that I opted not to. So instead, every time a new version of WordPress came out, I’d end up upgrading around 20 installs. Blech.

With version 3.0 of WordPress, the ability to create multiple sites using one install of WordPress is built right into the core, so no need to fool around with WPMU. The temptation was too great this time, so I decided to give it a whack. It was not what I would call a smooth process, but it wasn’t terrible either.

STOP: If you are already running WPMU and you just want to figure out how to upgrade your existing WPMU sites to WordPress 3.0, you’re reading the wrong article. Try this one instead.

Goals

What I wanted to get out of this was to have one main core install, but run multiple sites on their own domains that all pulled from that main core, so upgrading to later versions would mean upgrading one core instead of a dozen or two. These properties remaining at their current separate domain names (such as www.crankyhaiku.com, www.geekhaiku.com etc) was critical, both because of search engine optimization and for branding reasons.

Upgrading

The normal upgrade part was flawless, as WordPress upgrades tend to be these days. Automatic upgrade has never quite worked for me, so I always do a manual upgrade. It takes longer to upload the files, but it’s a pretty painless process. So to upgrade to 3.0, I did the usual:

• backup (which I didn’t actually have to do, since I automatically backup to the Amazon Cloud every night using Automatic WordPress Plugin) but I’m paranoid
• delete the wp-admin directory
• delete the wp-includes directory
• upload everything in the WordPress package – except for wp-content – to the web root
• hit the upgrade script to trigger the database updates

Flawless, as usual. Not so much as a hiccup. Now came the trickier part – adding the “Network” functionality previously available in WPMU to start to consolidate sites.

Creating a Multi-Site Network

I can’t speak for how easy or difficult this normally was with WPMU, so unfortunately I can’t tell you how this process compares to a normal WPMU setup. It wasn’t awful, but it was definitely buggy.

The WordPress documentation on Creating a Network walks through the basics well enough, so I suggest you start there so you know what to expect.

Note: You will not be able to go through the wizard in your WordPress admin until you deactivate ALL of your plugins. You can obviously re-enable them later, but I found that many of them did not keep their original settings.

I suspect this might be because I chose “network activate” instead of just plain “activate”. I had wanted to make those plugins available for all sites in the network, and didn’t realize that it would wipe out my existing snipe.net settings when I did so. Oh well. (Incidentally, that explains why you might see some weird stuff on the site until I have a chance to go through everything one by one. Double “related posts” bits at the end of the articles, Apture wasn’t working, etc.) All of the settings are fixable, but it may take you a little time to figure out what’s been lost, and what you have to do to set it back to the way it was before.

Editing Your wp-config.php

Beyond the setup in your WordPress admin, you’ll need to make a few changes to your wp-config.php file and your htaccess file. I hadn’t updated my wp-config for several versions, so I decided to use the wp-config-sample.php file and just pull my existing database variables over. Whether you use your old wp-config.php or start fresh with the stock WordPress sample, you’ll need to add the following to your wp-config.php, just above the comment that says “/* That’s all, stop editing! Happy blogging. */”

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'www.yoursite.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

If you followed my suggestion and read the WordPress documentation on creating a network (you did read that, right?), you’ll see that you have two choices for how your network will be set up: sub-domain (blah1.yourdomain.com, blah2.yourdomain.com) or directory-based (yourdomain.com/blah1, yourdomain.com/blah2). Make sure you think this one through before you get started, since there doesn’t seem to be an easy way to switch between the two.

As I mentioned, I didn’t want my sites to live at subdomain.snipe.net, or snipe.net/blogname – I wanted them to live at their own urls. I also didn’t want a bunch of crap littering up my document root. The easiest way to do this on Rackspace Cloud Sites is through a combination of setting up a site alias, and using mod_rewrite to handle domains:

• Set up a domain alias, like secondblog.com, and point it to originalblog.com
• Modify the mod_rewrite rules in your htaccess access file
• In your site preferences, point the blog url to the aliased domain name

If you’re not on Rackspace Cloud Sites, you can just follow the directions in the WordPress documentation.

Tweaking Your .htaccess

You’ll need to make sure the bit below is in your htaccess file – but your WordPress Network Setup wizard will point that out to you anyway

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule . index.php [L]

One thing to look out for besides having to reset your plugin preferences: when I created my Network, setting this site as the default, it automatically tried to set the url as snipe.net/blog. I’m not sure why it did this, and I’m certain I didn’t add it anywhere, but when I committed the changeover to Network, all of my urls were broken (since snipe.net/blog/ doesn’t exist). It was a quick change that you can handle via the Settings menu, but watch out for it and be sure to test your links once you’ve made the switch.

Importing Blogs

Now that you’ve got a Network set up, you have actually add them to the Network so that they’re using the same core. I expected this to be a much bigger pain in the ass than it ended up being. All I had to do was go to the original admin, go to TOOLS > EXPORT and download the XML file. Then go into my WordPress 3.0 admin, select the site I wanted to admin, and go to TOOLS > IMPORT > WORDPRESS, and upload the XML file. Worked perfectly, so far as I can tell.

Security Notes

Consolidating all of your WordPress sites into one multi-site install has many benefits, the most obvious one being that it’s easier to maintain one core install than updating every single instance of WordPress you run. That said, you may want to consider a few things:

While one install is probably more “secure” than multi-installs in the real world simply because you’re more likely to keep one site updated than dozens, there are a few things to consider.

If you run multiple WordPress blogs under the same user (the same account, in Rackspace Cloud Sites), all of the files are owned by the same linux user and group. This means that if one of your WordPress installs ends up compromised, either because you forgot to upgrade one of them, or because of a vulnerability in your hosting company, once an attacker has access to one of your blog installs, they have access to any other files owned by that user. Which means all of your other blogs, even the ones that are running current WordPress versions.

Along this same line of thought, if you’re running multiple WordPress installs under different users and you end up consolidating them to take advantage of the multi-site functionality, do so understanding that in this scenario, all of your blogs will be owned by the same user/group in the same webspace, so one vulnerability could easily turn into a much bigger problem.

Conversely, tracking down backdoors and maliciously modified files could potentially be easier, since you have fewer installs to search through.

WordPress has been much better about quickly patching holes, and being proactive about finding vulnerabilities. If your site ends up getting hacked, these days it’s more likely to be a vulnerable plugin, an outdated install you forgot all about, or a PC virus that added your FTP login to a botnet – not the core WordPress install itself. I say this with a certain amount of confidence, since I have restored at least two-dozen hacked WordPress sites (not mine) since the beginning of the year, and have therefore spent countless hours investigating the attack, identifying the vector, and writing up summaries to post to badwarebusters.org in an effort to help other people facing the same hack.

To be clear, running a multi-site install isn’t any riskier than running multiple blogs under the same user. But if you’re currently running your blogs under different users, you should at least be aware of how that could potentially impact you.

Final Thoughts

My thought is that it might have been smarter to install WPMU, and then upgrade to 3.0, since the upgrade process for a WPMU setup to 3.0 seems like it was a little less wonky, but I don’t really know.

I’ve really only just started playing with this during the fragment of free time I had today (work has been brutal for the past month or so). So far, pulling the theme in has been as simple as downloading them from their respective old WordPress installs and uploading them to the new 3.0 themes directory and activating them so that they’re available to the rest of the sites in the network.

And certainly, if you’ve found an easier way to get this done, please let me know in the comments.

Also check out:

If you’ve ever created a Facebook fan page, you’ve probably realized that the “reporting” that Facebook provides is basically useless. Because Facebook limits the Javascript you can use on Fan Pages, you cannot implement your own analytics packages on fan pages. Or at least, that’s what they want you to believe.

For Facebook applications, there is an FBML tag that will allow you place your Google Analytics code on the canvas page – but this FBML will not work on fan pages, application tabs, or anywhere other than the canvas page.

Fortunately, implementing Google Analytics on your Facebook fan page is possible, with a little PHP trickery. The basic gist of the workaround is to include your Google Analytics code as an image instead of placing the javascript into the FBML code.

Rather than writing something from scratch, it makes more sense to direct you to a post on the Webdigi blog that offers a free set of PHP scripts that will let you do exactly that.

The long and short of what the guys over at Webdigi are doing with their scripts is simply to call a PHP script instead of an actual image file in the <img src> code. This is not unlike the “tracking pixels” that are often used in email newsletters, since Javascript is not an option there either. So the concept isn’t new, but it’s not common knowledge that it works on Facebook.

The PHP script they are calling contains the Google Analytics code, and accepts parameters so that you can re-use the script on multiple fan pages (or different pages in an application) simply by setting different parameters.

When your Static FBML tab, application tab or non-canvas app page loads, it loads that “image” as part of the page. That “image” then pings the PHP script, which pings Google Analytics. This could be adapted for other reporting systems as well, using the same concepts.

The guys do a nice job with their script, and they even offer a wizard that helps you figure out what you need to put where.

I had rigged up a script a few months ago, but I never really had the time to package it for the general public, make it easy to configure, and so on, so go ahead and check out their script package.

Using this method, you’ll even be able to set up funnels and goals for your Facebook fan page stats, and Webdigi offers a great breakdown on how to tell the difference between fan and non-fan activity on your fan pages in your reporting.

Enjoy!

Also check out:

One thing they seem to have in common is that they’re all running WordPress, and a lot of them are hosted at the Rackspace Cloud.

Dear Alison,

Since we host hundreds of thousands of applications at The Rackspace Cloud, we have a unique vantage point from which we can identify security trends and patterns. Lately, the industry has seen an elevated level of attempts to take advantage of code vulnerabilities in the software powering websites. Hackers are a common and persistent threat to any website, but there are steps you can take to protect yourself and to make your websites and applications harder to exploit.

Please read over the important tips below. We have dedicated security experts who work to protect our infrastructure, but since we can’t fix or upgrade code on behalf of our customers, it’s important for you to know and regularly implement security best practices in the code you run. We need your help and involvement to ensure your own sites are as protected as possible. If you have any questions about security, please reply to this email and we’ll be happy to help.

HERE’S WHAT OUR SECURITY TEAM HAS RECENTLY IDENTIFIED:

1. The current data that we’ve collected points to application-based vulnerabilities being exploited. Hackers commonly scan sites for insecure applications, plugins, or other pieces of code and then work to take advantage of the software exploits they find.

2. Applications using the popular blogging software WordPress appear to be mostly targeted, but WordPress isn’t the sole target of the malicious groups / persons.

3. Your site does not have to be high-profile to be targeted. Hackers often scan random sites for signs of software known to be vulnerable (older versions of popular software with publicly known security holes, for example).

HERE’S WHAT YOU SHOULD DO NOW TO PROTECT YOUR SITES:

1. This is probably the most important tip: For any application you use, be sure to maintain the most current stable version. Often, an application might be updated to a new minor version solely to address a security hole that’s been discovered. Be sure to subscribe to any news lists and feeds available for your applications to make sure you are aware of updated versions as soon as they are released.

2. Many applications, like WordPress, have optional plugins developed by the community. Since these add-ons are often not as well vetted, it’s extremely important to carefully evaluate and manage third party application plugins, themes, or other functionality that is introduced to a running web application. Most hackers are exploiting these plug-ins

3. It’s imperative to choose strong passwords. Randomly generated strings of letters, numbers, and symbols are best. Avoid words and phrases in your passwords. The unfortunate reality: passwords that are easy to remember are also easy to guess. (Ex: Replacing o by the number 0 is not a recommended tactic.)

4. Change your passwords on a regular basis and change them immediately when you have any hunch that your site may have been attacked.

5. Be as restrictive as possible with users and file permissions. Remove write permissions from files that aren’t likely to change frequently. Some programs have install files that should be deleted after installation. If you’ve installed something or written code for testing purposes or experimentation, it’s best to remove it afterwards. Only keep the files and code on your account that are active and necessary.

As a site owner, you need to take an active role in guaranteeing security of your code and applications. The good news is that our support staff is happy to help you with any questions or concerns you may have. Recovering from a hack or exploit is extremely time-consuming and frustrating. The preventive steps outlined above can make a world of difference in keeping your sites secure.

Finally, if you suspect your site has already been compromised, you should take immediate action. This knowledge base article can help you through the right steps:

http://cloudsites.rackspacecloud.com/index.php/Recovering_from_and_Dealing_with_a_Site_Compromise

Sincerely,
The Rackspace Cloud Security Team

I want to preface this by saying there are a LOT of people that work at Rackspace that are absolutely awesome. The guys I know from Twitter are amazing, and helpful and care about customer happiness more than I can even say. None of this is their fault. This is NOT about them. This is about something fundamentally wrong with priorities at Rackspace, in my opinion.

I replied:

Too little, too late. I could have (and did) tell you all of this already.

And unfortunately, running the most recent version of WordPress doesn’t help. This week, I have personally had to repair 11 WordPress websites hosted on the RS Cloud that were hacked, all were running 2.9.1 and had very few plugins in common. The plugins they do have in common, like WP-Supercache, are plugins Rackspace suggests to keep the CPU-cycle raping down to a minimum. And WP-Supercache is a mature plugin that is very well supported so it seems unlikely (although certainly not impossible) that it is the vector.

And thanks to your logfiles not being able to be viewed in real time (as they are owned by root), this leaves web developers that actually have a clue very few options for forensically backtracking the vector.

I would like to know what Rackspace is doing to help developers isolate these issues? Are logfiles being programmatically reviewed for malicious traffic? Without SSH access and the ability to tail apache logs, we cannot do this ourselves within any kind of timeframe that will be useful in preventing or mitigating an attack. If I am going to continue hosting with Rackspace, I want to be assured that Rackspace is actually doing something to help us protect ourselves other than send emails that overstate the obvious.

Your support staff, at least most of the level 1 techs, are completely and utterly incapable of handling anything relating to hacks. They are slow and under-educated, regardless of how well meaning they might be.

You guys are in the position where you can help isolate these vectors. What steps are you taking? You need to up your game, or I’m bailing, and likely taking a lot of people with me. There is a lot of buzz going around about these vulnerabilities being specific to Rackspace Cloud, as it seems the vast, vast majority of the WordPress hacks have been on RS CS hosted sites.

I have confronted several of your higher-ups in the Cloud, including CTO John Engates, multiple times over the past year, begging for better tools to monitor security, offering to pay extra for them. Simple tools that even terrible, insecure Cpanel servers have. The entire purpose of Mosso, when it was created, was to target web developers – at least that’s how it was pitched to me. Web developers. Professionals. Many of us with over a decade of experience in this business. You deny us SSH and real-time Apache logs, but do nothing to provide us with any tools we would need without access to those basics – and then to add insult to injury, you send us a form letter that tells us to use good passwords and keep WordPress up to date? If your target is still the web development community, it’s time to nut up or shut up. We’re already doing all of these things, and we’re still getting fucked. It makes us look bad, it costs us time and money, and the trust of our clients.

Your customers are under attack, and I want to know what you plan to do to help us protect ourselves and our clients, or I am taking my business to a company that values my time and reputation.

I would not have published this letter to my blog if this were not something that I have been asking for, over and over and over, for the entire year I’ve been with Rackspace Cloud. I have tried to keep my issues with Rackspace off the grid, because overall I have felt like they’ve been trying to work with me to keep me happy. But this was just too much.

No one is sorrier than I am that it came to this.

Also check out:

Background

The MSWDS is one of only four significant annual events within the PHP community (others include tek, DPC and ZendCon), and this summit is a bit harder to get invited to. Unlike most other conferences, where all you need is the cash to pony up for a conference pass and a hotel room to crash in, invites are very limited and attendees are selected because they have had some interaction with the folks at Microsoft, and are believed to be leaders and influencers within the open source community. To be blunt, these summits cost Microsoft a lot of money, so they need to make sure they’re getting the best bang for their buck.

Keeping that in mind, it would be easy to assume that we were being brought out there so that Microsoft could pitch us on the latest and greatest Microsoft products, trying to get the movers and shakers of open source to drink the corporate kool-aid and switch to Microsoft products. While more acceptance of Microsoft products within the open source community is obviously a goal, they are making a concerted effort to learn from us – what we need, where they are falling short, and how we can move forward together.

Discussions and Format

The summit itself was a total of three days, with the last day being optional for those open source developers who were willing to sign an NDA to discuss some of Microsoft’s emerging technology. During the three days, different representatives from Microsoft’s product teams sat down with us and asked for our comments, thoughts and ideas about where they’re at, and where we think they should be going. We met with folks from the IIS Web Platform team, the SQL server team, as well as some representatives from Codeplex, Silverlight, Powershell, ASP.NET Ajax (which is not exclusive to ASP.NET, despite the name), and Bing maps.

We had a chance to air grievances, which was cathartic in some ways, but I think it was more important to us to be able to sit down with the actual teams who are working on this technology at Microsoft, and really get into the specific challenges we face. The approach was not generally pitchy, and with very few exceptions, a great deal of effort was put into making all of us from the open source community feel like respected authorities in our field whose opinions really matter.

Something they did this year which was apparently not done last year was to include representatives from well-known PHP-based projects who are not normally parts of the PHP community. I honestly hadn’t realized that the many of the folks over Joomla, WordPress and Drupal often don’t consider themselves as part of the greater PHP community, and getting a chance to discuss that with them brought up some interesting perspectives. I don’t think the guys representing these projects were there in an official capacity, but their point of view was one that had honestly not occurred to me before, so that was a really interesting and unexpected benefit. There was some debate on whether or not these types of projects should be a more involved part of the PHP community, with good points on both sides, but I think most walked away with some ideas on how to move forward in making those lines of communication more accessible and open.

My Perspective

Of course the ultimate question from Microsoft was “What would it take for you to switch to Microsoft products for your clients?” My smartass remark was, of course “A fucking miracle.” But everyone in the room knew I was joking. I hope. If we weren’t willing to work with Microsoft on improving their products to work with open source better, we wouldn’t have been there.

As often as Microsoft has been an easy target in the past, and as much bad blood as there may have been in the past, there are people at Microsoft that care about working with the open source community, and who are making progress to get there. It is our job as technology professionals to fairly evaluate technology and make recommendations based on what makes the most sense technologically and financially. It is NOT our job to make religious decisions based on zealotry.

That means that if and when Microsoft can meet my needs and/or the needs of my clients, it can and should be part of that evaluation or I’m not doing my job. Does that mean I’m ready to switch back? No. Not yet, anyway. But I believe they are listening, and I saw some things during this summit that make me far more likely to start including some parts of Microsoft’s products into the technology I suggest as being potentially viable for client projects, which is a far cry closer than I was last week. Specifically, some of the stuff I learned about Silverlight, Bing’s geolocation products and Windows Azure (Microsoft’s cloud hosting platform) was pretty impressive. As I get to play with these products a little more, I’ll be blogging about them with my fair evaluation of pros and cons, so stay tuned.

I’m also excited to see where the Microsoft Web Platform Installer product heads. Right now, the WebPI product is a very easy to use, slick solution for the less techy individual who wants to, for example, deploy a WordPress blog in 5 minutes or less and may not have the savvy to do the install themselves – basically a MS version of Cpanel/Fantastico, which we have had available to us as web administrators for over a decade. That product is less interesting to me right now, but some of the directions they could go in for more advanced users like us hold real potential. We had some suggestions that were well-received, and if they are actually implemented in the way I envision them, it could honestly turn the table and make some of the Microsoft web server products something that I could consider recommending, or even using myself. (I should also mention that Cpanel is the most horrific, insecure, hack-prone web control panel I’ve ever used, and I am NOT endorsing it as a solution.)

The reality is that competition inspires innovation, and Microsoft getting better means progress for everyone. I saw a post on Twitter that basically implied that open source representatives attending this conference were traitors or sellouts. I don’t see it that way at all. We have amazing open source products like Firefox because the open source community worked together to create a better product, and Microsoft responded by making vast improvements to Internet Explorer, building in more security and standards compliance. When we work together to innovate, everybody wins.

Another transition I’ve been seeing in Microsoft which was really made more obvious by this summit is that there is a less omnipresent feeling of “all or nothing” within many Microsoft departments. As open source advocates, we enjoy having choices. Previously with Microsoft, you’d get the most benefit from their products by committing to an entirely Microsoft development process (“drinking all of the kool-aid, since the best stuff is the sugary goop at the bottom”), with benefits sharply falling off if you opted to pick and choose. This philosophy has always been distinctly in opposition with the open source philosophy, and I believe was likely the cause for some of the distrust coming from the open source community. Seeing this transition into a paradigm of being able to cherry-pick what we like for some things and sticking with open source solutions we like better for others is a step in the right direction, in my opinion.

An additional unexpected benefit to sitting down with all these MS product people was that I got a chance to better understand some of the legal/licensing challenges Microsoft faces. I’m not making excuses for them, but I hadn’t considered some of the obstacles in the way of people at MS who care about working with us. Microsoft is a big target with deep pockets, and they have to cover their own asses. I was quicker to dismiss some of the corporate decisions as being “evil” prior to sitting down with some of them and understanding why they do what they do. Don’t get me wrong – some of their decisions (*cough*sudo*cough*) still don’t make sense to me and I believe they are wrong, but I think I have a better understanding of where they sit than I did before

Wrapping Up

Overall, I would consider this summit a great success, and I hope I get to participate again in the future. There are several people who really deserve a shout-out for all of the hard work that went into this and are directly responsible for it’s success. From the PHP community, Cal Evans was a co-host and an absolute rock star, always quick to make sure things ran smoothly and kick-start conversations and redirect us back when we went off on tangents. From Microsoft, Karri Dunn, Tonya Young, Josh Holmes, Peter Laudati, Lauren Cooney, and others were amazing. I may be forgetting a few – I am still a little wiped from the week and the traveling.

Was this an instant fix? Certainly not. Do we all have a lot more work to do before we’re “there”? Absolutely. But as Cal Evans put it on his own blog roundup, “The more people I get to know at Microsoft, the less I’m able to despise the company.” They took the time to find out what we think, even when it may not have been what they wanted to hear. Time will tell whether or not they actually act on it.

Other PHP Representatives Blog Post Roundups

I’ll be updating this list as more people finish their blog post roundups, so you can get take their on the summit. Many of them are far smarter than I am, so it’s worth reading what they have to say.

• Cal Evans (@CalEvans)
• Chris Cornutt (@enygma)
• Maarten Balliauw (@maartenballiauw)
• Rafael Dohms (@rdohms)
• Keith Casey (@CaseySoftware)
• Romain Bourdon (in French) (@le_vrai_roms)
• Marco Tabini (@mtabini)
• Sam Moffatt (@Pasamio)
• Helgi Þormar Þorbjörnsson (@h)

MS Representative Blogs

If you’d like to see more about the fabulous people at MS who are working hard to move the company forward in a way that works with open source, check out their blogs. I’m proud to call these guys friends, and as long as we continue to have people like this working for Microsoft, I think the lines of communication and cooperation between both sides of the aisle will keep moving forward.

• Dave Bost (@DaveBost) – Developer Evangelist
• Josh Holmes (@JoshHolmes) – UX Architect Evangelist
• Tobin Titus (@tobint) – MSDN Site Manager
• Peter Laudati (@jrzyshr) – Developer Evangelist
• Mark Brown (@MarkJBrown) – Product Manager for Microsoft Web Platform
• William Coleman (@will_coleman) – Developer Evangelist
• Lauren Cooney (@lcooney) – GPM for Web Platforms at Microsoft
• Jas Sandhu (@jassand) – Interop Strategy Evangelist
• Ruslan Yakushev (@ruslany) – Program Manager on IIS team in charge of FastCGI and PHP support
• Scott Hanselman (@shanselman) – Principal Program Manager Lead

Funnily, as I’m writing this, Futurama: Into the Wild Green Yonder has been on television, and the scene that just played is the one where Calculon says “I’d like to thank the academy, my agent, and most of all my operating system – Windows 7, for everything it –” at which point his OS locks up. Windows 7 is actually a great product, and I run it on my Mac using Bootcamp and VM Fusion, but I thought the timing was amusing.

Kool-aid photo taken in Belize by me – just thought it was funny. Lead post image by Eli White.

Also check out:

My friend Peter Bukowinski first brought the exploit to my attention, posting a link to Apple.Com’s iTunes affiliate search interface. The link he sent me led to a page that looked like this:

Notice that the url in the browser bar is actually apple.com – this was not a parody site.

Evidently, Apple’s developers had neglected to validate the data being sent through the query string. The actual url was:

http://www.apple.com/itunes/affiliates/download/?artistName=your+mom&thumbnailUrl=http://www.moneysavingmom.com/money_saving_mom/images/2008/09/02/joblogo.gif&itmsUrl=http://www.bjs.com/&albumName=a+better+blowjob

So by editing the variables passed through the url, you could have a little harmless fun at Apple’s expense:

As you can see, by editing the query string and changing the variables for artistName, thumbnailUrl and itmsUrl, we could make the page hosted on Apple.Com’s server display whatever mischief we want. The variables were being echoed out directly on the page without any validation, filling in the blanks in their iTunes affiliate page template: [image] Looking for [blank] by [blank]?

But What is XSS?

Honestly, if you’re a web developer and you don’t know what XSS is by now, you suck at your job and should probably go back to spanking it to porn in your mom’s basement and leave the coding to the grownups. It’s been around long enough that you forfeit your right to call yourself a web-anything if you don’t know what it is by now. That said…

From the Cross-Site Scripting FAQ on cgisecurity.com:

Cross site scripting (also known as XSS) occurs when a web application gathers malicious data from a user. The data is usually gathered in the form of a hyperlink which contains malicious content within it. The user will most likely click on this link from another website, instant message, or simply just reading a web board or email message. Usually the attacker will encode the malicious portion of the link to the site in HEX (or other encoding methods) so the request is less suspicious looking to the user when clicked on. After the data is collected by the web application, it creates an output page for the user containing the malicious data that was originally sent to it, but in a manner to make it appear as valid content from the website. Many popular guestbook and forum programs allow users to submit posts with html and javascript embedded in them. If for example I was logged in as “john” and read a message by “joe” that contained malicious javascript in it, then it may be possible for “joe” to hijack my session just by reading his bulletin board post.

Cross-Site Scripting is nothing new, not even on large, popular websites. While this example on Apple.Com resulted only in a humorous page being available under a large company’s domain, many XSS attacks can be far more sinister – and the attack had far more potential than our harmless prank, as users on Reddit.Com noticed that the exploit did allow malicious scripting including JavaScript injection and IFrame injection (thanks to @shocm for bringing the Reddit thread to my attention).

It looks as though Apple’s server sanitized the <script></script> tag, but there are at least a half-dozen ways to inject javascript without using a <script> tag, many of which are outlined on the XSS Cheat Sheet.

This type of exploit is a DOM-based exploit. Wikipedia does a good job of summing it up:

Traditionally, cross-site scripting vulnerabilities would occur in server-side code responsible for preparing the HTML response to be served to the user. With the advent of web 2.0 applications, a new class of XSS flaws emerged, however: DOM-based vulnerabilities come to be during the content processing stages delegated to the client, typically in client-side JavaScript. The name refers to the standard model for representing HTML or XML contents, called the Document Object Model or DOM for short. The model is the primary way for JavaScript programs to manipulate the state of a web page, and populate it with dynamically computed data.

A typical example is a piece of JavaScript accessing and extracting data from the URL via the location.* DOM, or receiving raw non-HTML data from the server via XMLHttpRequest, and then using this information to write dynamic HTML without proper escaping, entirely on client side.

Netcraft featured an XSS vulnerability on PayPal’s website discoverd by a Finnish security researcher in May 2008:

An exploit was reported in March 2007 on YouTube’s website, allowing a similar type of JavaScript attack:

And an XSS exploit of eBay was documented in this YouTube video, also in 2007, and Twitter has suffered several XSS exploit attacks as recently as this year. But those are just a small handful of examples from a really long list.

In fact, just today, an article came out in The Register, detailing an XSS cookie hijacking attack that affects many large websites, including Google and Facebook. From the article:

A security researcher has discovered a weakness in a core browser protocol that compromises the security of Google, Facebook, and other websites by allowing an attacker to tamper with the cookies they set.

The weakness stems from RFC 2965, which dictates that browsers must allow subdomains (think www.google.com) to set and read cookies for their parent (google.com). The specification also states that if a cookie for a subdomain doesn’t already exist, the browser should use the cookie belonging to the parent instead.

The arrangement makes it possible for attackers to steal or even alter the cookies that websites use to authenticate their users. Attackers would first have to identify an XSS, or cross-site scripting, bug in some part of the site they are targeting. But because virtually any subdomain will suffice, the scenario isn’t unrealistic, two web security experts said.

Apple’s development team responded quickly to the exploit on their site – a little too quickly in my opinion, since I was preparing to have a little more fun with it, but they had patched it by the time I got home. It should still serve as a reminder to developers of just how important data scrubbing and validation is, no matter whether your site is big or small, with 2 hits a day or 2 million.

XSS Vulnerabilities Compromise User Data – And Your Reputation

As the eBay exploit video shows (and as anyone on Twitter saw this year), XSS attacks are not just embarrassing – they can be used for phishing scams, tricking users to login to a fake site, exposing their login credentials or worse. PayPal and bank phishing schemes often prompt the user to “confirm” their bank account information or credit card information “for security purposes”.

Other XSS exploits may trick users into thinking their computer has been infected by a virus, prompting them to download “free software” to clean their system – meanwhile the software the panicking user is downloading actually is the virus. And even though you might never fall for something so blatantly obviously, lots and lots of people do, every day.

Often attackers will inject JavaScript, VBScript, ActiveX, HTML, or Flash into a vulnerable application to fool a user in order to gather data from them. Everything from account hijacking, changing user settings, cookie theft/poisoning, or false advertising is possible. New malicious uses are being found every day for XSS attacks. XSS exploits can even be used to facilitate “Denial Of Service” attacks (or DoS attacks), and potential “auto-attacking” of hosts if a user simply reads a post on an infected message board.

While XSS attacks themselves cannot compromise files on your server, XSS holes can allow Javascript insertion, which may allow for limited execution. If an attacker were to exploit a browser flaw (browser hole) it could then be possible to execute commands on the client’s side. If command execution were possible it would only be possible on the client side. In simple terms XSS holes can be used to help exploit other holes that may exist in your browser or server.

User-Submitted Data and Your Database

Trusting user variables without cleaning or validating them opens you up to a whole host of problems if your application is powered by a database.

For example, the following SQL command is used to validate user login requests:

[sourcecode language="sql"]$sql_query = “select * from users where user=’$user’ and password=’$pass’”[/sourcecode]

If the user-submitted data is not properly validated, an attacker can exploit this query and pass the login screen by simply submitting specially crafted variables.

For example, attacker can submit the following data as a $user variable: admin’ or ’1′=’1 . When this $user variable is glued together with the query, it will look as followed:

[sourcecode language="sql"]$sql_query = “select * from users where user=’admin’ or ’1′=’1′ and password=’$pass’”[/sourcecode]

Now, the attacker can safely pass the login screen because or ’1′=’1′ causes the query to always return a “true” value while ignoring the password value.

Using similar techniques, an attacker can retrieve database records, pass login screens, and change database contents, for example by creating new administrative users. Using similar techniques, a malicious attack will be able to execute arbitrary shell commands, read or write arbitrary commands, and more.

It is our responsibility to protect our users (and the trust they put in us, deserved or not), and XSS vulnerabilities open the doors to all manner of mischief. At their most benign, they can result in a site defacement. At their worst, they compromise the very safety and livelihood of the people that fall for them – not to mention the impact on your company’s reputation.

If you think your site is too small for hackers to bother with, think again. There are plenty of script kiddies out there that will happily run their exploit toolkit scripts and crawl page after page, testing for exploits. They are able to find common exploits in sites they have never physically even visited through this method. And once they find a vulnerability, word spreads fast.

It should also serve as a reminder to us as a internet users to be a little less trusting. It seems obvious, but we are so trained to respond to visual cues and prompts for activities we do every day – logging into a website, checking out with PayPal, etc – that we can sometimes become careless. We sometimes trust the big guys a little too much, assuming that because they’re that big, they’ve got to have their shit together. Even when we know better, our interactions online have become somewhat mechanical.

While browsers are getting better at helping us realize if we’re entering data into a site that is suspect, ultimately the responsibility falls back upon us to pay attention to what we’re doing and to whom we give our valuable information.

So as a developer, what can you do to protect your software and sites from XSS attacks?

Here are a few good places to start.

Stuff to Read:

• Learn more about XSS and how it works on the Cross-Site Scripting FAQ on cgisecurity.com.
• Learn more about Backdooring a Webserver using MySQL, which details how a user could read/write files to your server and execute commands using mySQL.
• Check out the OWASP (Open Web Application Security) website and stay up to date

Stuff to Do:

Always clean and validate ANY data you receive from the user

Use the appropriate escaping for the programming languages and databases you use

Educate yourself on as many examples of XSS (both theoretical and in-the-wild) as you can, so you know what to look for. Wikipedia details a few common methods worth checking out on their Cross-Site Scripting page. The only real defense you have against attacks is to keep yourself informed and current on what the bad guys are up to. This isn’t one of those things that you can read about once and rest on your laurels. You must be vigilant and aggressive about staying on top of what’s going on. It’s your job.

Bookmark and test your scripts against the code samples on the XSS Cheatsheet on ha.ckers.org. This cheatsheet is specifically geared towards exploits that can potentially get past standard filtering that developers might do on their data, such as strip_tags. Also check out the MySQL Injection Cheat Sheet and the SQL Injection Cheat Sheet.

Periodically check your webserver access logs and error logs and look for anything that looks like someone might be trying to find a backdoor. Look for people trying to pass data that doesn’t belong, sending variables that are common configuration file names, and so on.

Turn OFF error reporting displayed to the browser on production environments, and instead log errors to a file. Error messages can expose information about your file structure and your database structure.

Pay attention! Keep your ear to the ground on sites like ha.ckers.org and other (mostly) whitehat exploit blogs and communities. This is your livelihood. Do your job.

If you’re using open source software, make sure you keep up to date with new releases. Many popular open source projects (such as WordPress, phpNuke, phpBB, etc) are frequent targets for malicious scripting. Be sure to hide references to your software version numbers from the public, since certain versions may have exploits that are well known, and attackers will know exactly how to target your site if they know what version you’re running.

Shell out the $39 for the 300 page e-Book Detecting Malice, written by Robert Hansen (aka RSnake, on Twitter at @RSnake) and actually read it. I can’t believe I’m actually endorsing a freaking e-Book, but its really that good. I don’t know Robert personally, I’m not endorsing it as a favor or because I like him as a person. For all I know he eats puppies for breakfast. But his book is fantastic.

And finally, Test test test test test!

There’s even an interesting Twitter account that highlights high-profile XSS exploits – it’s low-volume, but it’s surprising how many turn up that never make the news.

Incidentally, something I discovered while having a little fun on Apple.Com’s site – if you do a Google Images search for ‘hot tar enema”, only four images come up, and one of them is a photo of Rush Limbaugh. I’m not even making that up. Also funny, since I tweeted about that this afternoon, my tweet is now the number one Google search result for “hot tar enema”. Aren’t you jealous?

Also check out:

If you develop Facebook applications, I strongly encourage you to check out their new Facebook Developer Roadmap, which breaks down upcoming changes in detail and let’s you know when to expect these changes to roll out.

I for one am thrilled to see Facebook finally trying to work with developers to give them a clear idea of what to expect and when. As someone who has spent the past two years writing Facebook applications and being frustrated by surprise platform changes, this is a giant step in the right direction from my point of view. Previously, it was not uncommon to get only a day or two’s notice – or no notice at all – regarding critical application functionality. If you’re the developer for one application, that’s inconvenient and annoying at best, if you’re obligated to maintain a dozen or so applications it can be utterly traumatizing.

From the look of things, Facebook is trying to streamline the way applications communicate with users, and is adding some features specifically designed to improve the flow of turn-based gaming and make it easier for users to find games amid the sea of applications in the app directory.

Overall, these changes bring new features to the application developer’s toolbelt, but changes to the newsfeed and Stream API also mean that several of the ways you were previously able to send messages to a user’s newsfeed/stream (the one you just updated in April to comply with their last round of newsfeed changes) will no longer be supported.

To put a finer point on it, if you don’t feel like extending your current applications to take advantage of the new features, you will still need to update them to get them to function as they currently do. If you do not update your application to use the Stream API, your application will NO LONGER send any messages to your users’ stream. More on this down below.

So here’s a quick run-down of what to expect in the next few months – I’m covering the issues that will affect current applications first, and then we’ll get into the good stuff that talks about new features and functionality, so you know what you have to update to keep your existing functionality before worrying about extending it.

Big changes to the Stream, old API not supported, templates disappear, new format

As I mentioned above, if you don’t care enough (or your clients are not paying you enough) to update your current applications with the new functionality these updates bring, you’re still going to have to spend some time in the code just to get them not to break.

As of December 20, 2009, when Facebook.showFeedDialog and feed templates are discontinued, if your application hasn’t been updated to use Stream.publish, Facebook.streamPublish, or FB.Connect.streamPublish, your application will no longer be able to send newsfeed messages.

These Stream API functions will be the only way to send messages to users’ streams and they are available right now, so I encourage you to start making the switch now so you have plenty of time to test and troubleshoot any issues that come up.

But wait – there’s more!

Stream stories will be rendered slightly differently, with only one image and few lines of text. Only the first image and first few lines of text will be rendered by default. A user can choose to expose the rest of the images and text by clicking a “See More” link.

Only one action link will be rendered, and it must be 25 characters long or less. “Formatting”-style characters (like “|”, “[", "]“, and others) will not be rendered.

Key Policy Change: In order to encourage intentional behavior, you will no longer be able to automatically pop up a Feed form for a user unless that user has explicitly indicated that he or she wishes to share this information. According to Facebook, “a user should never be surprised by a Feed form”. You can continue to render Feed forms through FB.Connect.streamPublish and Facebook.streamPublish.

In the Stream Roadmap page, they outline when it is appropriate to open a feed form:

• When the user has clicked a button that says “Share this”.
• When a user has indicated via your user interface that they want to share. For example, if a user wrote a review within your application, and they checked a box that said “Share with friends” next to your “Publish this review” button. If you pre-checked a “Share with friends” box and they unchecked it, a Feed form should not pop up.

Perhaps more importantly, they also outline when you should NOT prompt the user with a feed form (and therefore NOT allow your user to post the action to their stream):

• When a user takes an action that is a normal part of using your application, for example, achieving a new high score.
• When you present a user with a result or new information, for example, completing a quiz.

These last two will directly impact how a LOT of Facebook apps and games currently function. While it will no doubt have an adverse impact on monthly active users for the applications that currently trigger stream entries on these actions, it is most likely a response of Facebook users complaining about the tremendous influx of stupid quizzes that have been flooding their newsfeeds for the past several months.

Hopefully, the other changes detailed below will offset the impact of apps not appearing in the stream as often and will more than compensate for any loss in virality.

Check out the Stream Roadmap page on the Facebook Developers site for full details.

No more Profile boxes or Boxes tab

That’s right. Poof. Going forward (in the short term) application tabs will be the only way applications can integrate into Profiles. We will be removing profile boxes, application info sections, and the Boxes tab. Facebook says they are exploring additional ways to enable developers to integrate into Profiles.

Please note that it does NOT appear that Facebook will be moving application content currently in Profile boxes or the Boxes tab into Profile tabs for you. From the Profile Roadmap page on the Facebook Developer’s Wiki:

Where will users’ profile boxes go?
Profile boxes will not exist in the near future. Application tabs will be the only way developers can integrate into the profile. If integrations on the profile are an important part of your application, we encourage you to focus development and transition to application tabs.

(Timing: Late 2009/Early 2010)

So it looks like if you don’t make this change to your application yourself and you rely on Profile boxes or Boxes tab boxes for your application to work, your app will effectively just disappear from user profiles when this change goes live.

Application tabs will shrink from 760 pixels wide (today) to 510 pixels 520 pixels wide to accommodate a slightly revised design. Boxes, info sections, and the Boxes tab will be removed in the near future. This kind of sucks, in my opinion, but I assume they’re doing it to accommodate a new design with either larger ads or some sort of right-rail navigation. Still, that’s a 250 240 pixel loss of real estate. Bummer.

Update as of Dec 15, 2009: According to a recently updated roadmap page, they will be shrinking the tabs down to 520 instead of 510. This, along with other profile changes, is set to roll out early 2010 by their last estimate.

Slight Application Canvas page layout change. In order to make it clearer to users when they are using an application created by a third party developer, Facebook is going to slightly modify how the top-navigation is rendered on canvas pages:

Looks like they’re still tinkering with ideas on the new layout of Application Canvas pages, but overall this shouldn’t impact most applications too much. They encourage developers to periodically check the Canvas Roadmap page for updated designs.

Now then – we’ve covered all of the stuff that impacts your current applications as they are now. Let’s look ahead to some of the great new functionality ahead.

Email

Developers will be able to ask users to share their primary email addresses. This is a big deal because it was previously verboten to collect a user’s email address without specifically asking them to type it into a form and submit it. (Timing: Nov 2009)

New Application Counter (woot!)

The application counter is one of my favorite improvements laid out in this roadmap and is just one of many steps Facebook is taking to position itself as a gaming platform.

You will have the opportunity to increment your count to indicate to a user that they should take an action in your application, for example, take their turn in a game, or see a comment from another user on content they created within that application.

The count can be incremented by your application, and when a user clicks through to the application, the count will be reset to zero.

As we continue to see an influx applications leveraging Facebook as a platform for RPG and turn-based gaming, it seems Facebook is getting behind the idea and beginning to provide specific features to encourage growth in this area. (Timing: November/December 2009)

Games/Applications Dashboards

In fact, apps that are games will be separated by category from apps that are… well, applications. Plus, users have access to two different Dashboards, one for Games and one for Applications.

The Games dashboard will have a number of features that encourage users to find games their friends and playing, and to stay active in games they’ve started, including:

Recent games: Facebook will prominently display games that a user has recently played, showing the application icon and application name. Clicking on a game will take the user to the game’s canvas page.

Game News: There will be a text field next to each game on the dashboard where developers can set Game News. This area is free form and targetable by user, e.g. “You are ranked 17th among your friends. Austin’s score is the next highest at 28,400. Can you beat him?” or, “Your pumpkins are wilting – water them soon!”

Your friends are playing: Facebook will display some of the games that your friends are playing along with information about relevant activities in the game.

According to Facebook, an app cannot appear in both the Games directory and the Applications directory, and they’ll be reviewing Games listed in the Games directory to make sure they belong there.

All non-game applications will have similar functionality (your recent applications, application news messages, and applications your friends are using) in the Application Dashboard.

Application Notifications

Facebook is removing application-to-user notifications and user-to-user notifications. Instead, they encourage you to use other channels to communicate directly with your users, and to enable them to communicate with each other about your application.

Communication between you and your users:

They encourage you to use Email (once the user has opted to share their email address with you) for things like product announcements, newsletters, or billing and transactional communication.

If you want to notify users about an action they should take with your application (like taking their turn in a game), incrementing the Application Counter will be a good way to notify them.

The application news in the Application Dashboard will be a great way to share a brief message with a user while they’re exploring the Dashboards. You’ll be able to target these on a per-user basis.

Communication between your users and their friends:

The stream is the most powerful way to enable users to share their experiences with all of their friends.

The new Share flow will give your users the ability to send messages directly to their friends’ Inboxes, with attachments predetermined by you. This will be the best way to encourage one-to-one and one-to-few messages between users, and is intended to replace requests.

Users will still be able to invite their friends to check out your application.

The estimated timing on this is approximately 30 days after you are able to start requesting a user’s email address. (Latest estimate: November/December 2009)

Open Graph API: Incredible potential, or not at all?

The info on Facebook’s Developer page for this is a little vague at best. They state:

The Open Graph API will allow any page on the Web to have all the features of a Facebook Page. Once implemented, developers can include a number of Facebook Widgets, like the Fan Box, or leverage any API, which enable the transformation of any Web page so it functions similar to a Facebook Page.

For example, AwesomeTees might decide that strategically they would like to locate their brand identity at www.awesometees.com. AwesomeTees will install the Fan Box widget, which will allow any Facebook user to “Become a Fan” of AwesomeTees, thereby establishing an official connection to AwesomeTees. The user will then have AwesomeTees listed in their list of connections on their profile as Pages are represented today.

This isn’t that different than how it currently works, so that’s not really news. What is interesting is this one line n their description, further down:

Additionally, any content that AwesomeTees publishes on AwesomeTees.com will show up in the stream on Facebook like it normally would.

Wait, say what? It sounds like they’re saying that news updates that would normally appear on a website, and would have to be manually cross-posted to a brand’s Facebook fan page will somehow automagically appear. I would have to assume they will require some sort of XML or JSON standardized format that website news announcements will have to be published in, but there’s little detail out on this just yet. This feature is a ways off though, with initial versions not expected until the second quarter of 2010.

And finally – Verification goes away as a brand, becomes universal for all apps

According to the Principles, Policies and Verification roadmap, Facebook is doing away with paid Verification and is extending it out to all applications.

On December 1st, 2009 we’ll retire the Verification brand, as we scale what was a voluntary program into a universal requirement. There is no longer a submission process or fee, and there won’t be distribution boosts as the product will move towards more intentional user sharing. Starting today, we will suspend the processing of Verification submissions. All apps must meet Verification Checklist expectations and will be subject to review at any time.

So this means while you no longer have to shell out big bucks for your app to be verified, it also means that Facebook will probably be more aggressive about making sure all developer applications do meet their verification criteria, and will yank your app with ir without notice if it feels like your app isn’t up to snuff.

Full Timeline

To give you a little more perspective, here is the timeline of the upcoming Platform changes, based on Facebook’s Developer Roadmap and originally compiled by InsideFacebook.Com:

Late October 2009

• Simplified policies posted, verification program ended, and “extending verification standards to all applications”
• Platform Live Status tool launching, which will show “updates on platform stability and load”

November 2009

• New email permission API (developers can ask users to share their email address)
• Access point to invites will be moved “to either a filter in Inbox or surfaced in the Application and Games Dashboards”
• User-to-user Inbox APIs will be launched
• Stream story formatting changes (1 image shown by default, few lines of text, 1 action link)
• New “add bookmark” button

November/December 2009

• Notifications API (both app-to-user and user-to-user) will be removed (note: Facebook says this will happen “30 days after email permission is available”)
• Feed forms cannot be popped open without “explicit user intent” (note: this is a new Facebook policy)
• Application bookmarks moving from the bottom menu bar to the left side of the home page
• Counter API launching (counts can appear on home page application bookmarks)
• Applications and Games dashboards launching
• New application branding on canvas pages launching

December 2009

• All stream publishing APIs beside Stream.publish, Facebook.streamPublish, and FB.Connect.streamPublish will no longer be supported (December 20)
• Revamped developer site launching

Late 2009 / Early 2010

• Requests API will be removed (note: Facebook says this will happen “30 days after launching new Inbox sharing”
• Profile boxes will be removed (application tabs will be the only way to integrate into the profile page at that point)
• Improved analytics and APIs launching

Early 2010

• Open Graph API launching

Conclusion

So it feels like Facebook might finally, really be getting their shit together. This is arguably one of the biggest rounds of changes to the platform that we’ve seen in quite some time, and for the first time, they’re actually giving developers a head’s up and being very transparent about timing and impact.

All in all, the vast majority of these changes are great news for application developers. We’re getting tons of new features, new integration points and opportunities for viral engagement. The trade-off in what we’re losing seems to be well worth it, if all of these improvements come to fruition.

Also check out:

While there are different kinds of geeks, we assure you that buying any of this stuff as gifts for your favorite geek will definitely give you a charisma point bonus and earn you some nerd love.

Note: This was originally published on TehAwesome.net in Nov 2008. It’s being resurrected and reposted here, since I’ll be shutting down TehAwesome.Net soon, and it was too good to throw away.

If you’re a geek yourself and are just looking for some new toys or gifts for your D&D buddies, hopefully you’ll find something new here.

This list is long – it’s meant to be very comprehensive and offer up lots of choices for multiple kinds of geeks, including computer geeks, science geeks, physics geeks, design geeks and, yes, the more traditional basement-dwelling comic book geek.

Geek or Nerd?

There is a fine balance between something that is geeky, and something that is nerdy.

Geek: From the Jargon File entry for “geek“:

“A person who has chosen concentration rather than conformity; one who pursues skill (especially technical skill) and imagination, not mainstream social acceptance. Geeks usually have a strong case of neophilia. Most geeks are adept with computers and treat hacker as a term of respect, but not all are hackers themselves – and some who are in fact hackers normally call themselves geeks anyway, because they (quite properly) regard `hacker’ as a label that should be bestowed by others rather than self-assumed.”

Nerd: From the Jargon File entry for “nerd“:

“Pejorative applied to anyone with an above-average IQ and few gifts at small talk and ordinary social rituals.”

Examples:

Chicks Dig Linux t-shirt: geeky (which is good.)

“Engineers are Hot” notepad – nerdy (not so good)

The difference is hard to explain, but this article at wikiHow does a fine job at trying to help clarify. (The Warnings are particularly funny and accurate.) Fortunately, there is usually some crossover, so whether you’ve got a geek or a nerd on your hands, this guide should help. (I, personally, am probably a mix of both, although more geek than nerd.)

Caveat

This list does NOT cover items that would be considered “more useful than entertaining.” The items and stores listed here are, in general, not overly useful. It wouldn’t be possible to list everything useful that a geek might want, especially given the variety in the types of geeks you might have in your life. What a design geek might find useful is sometimes not at all the same thing a hardcore purist linux geek might find useful. So this particular list explores the fun and sometimes silly cultural toys that come with geekdom. If you’re looking for something useful for your geek and you’re not savvy in their field, you may be better off with a gift certificate to NewEgg so they can pick what they want. Without intimate knowledge of their gear and their setup, there’d be no way to guess what they will find more useful. Normally, gift certificates might seem a little impersonal, but your geek will appreciate the ability to select exactly what they want.

T-Shirts & Other Wearables

Maybe it makes me lame, but I love me some geeky t-shirts. I work in a casual office, so I can wear t-shirts every day, and my collection of geek/gamer/snark t-shirts is a thing to behold. Seriously, I have an entire dresser drawer devoted to geeky t-shirts.

While that may be a little sad, if you’re looking to beef up your geek/gamer wardrobe, there’s some great stuff out there these days. And, if you’re unable to find what you’re looking for, you can always give PleaseDressMe.Com a whirl and see if you come up with anything good.

And let’s face it, what geek has ever said “No no, I have enough t-shirts, thank you!”

Oh, and ladies, if you’re shopping for yourselves, most of these places carry babydoll styles as well, so you can wear your geek proudly without hiding your curves.

ThinkGeek – if you haven’t heard of them and you’re shopping for yourself, you probably shouldn’t be allowed to buy anything from them, but any geekwear list would be lacking without them. There’s something here for the code slinger, the sysadmin, the gamer, and the ‘net culture geek. And they sell all kinds of nifty cube toys and gadgets as well. And because someone had to do it, the perfect combination of technology and t-shirts, they even have a section devoted to illuminated tees: t-shirts that actually do stuff, like play sounds, detect wifi signals and display lighted life bars.

Jinx - Huge catalog = gamer heaven! The cake may be a lie, but these shirts are the real deal. (I’m so, so sorry for that horrible joke.) Lots of gamer gear, with a whole section devoted to Warcraft goodies, and oodles of old school D&D and RPG love. Jinx was the genius behind the Children of the Cron shirt that I covet so much (and they no longer make. Wah!) At least 40% of my geek shirts came from Jinx.

xkcd store – xkcd is a webcomic that appeals to geeks of many flavors, including computer geeks, physics geeks, math geeks and language geeks. (Truly, one of the funniest and most brilliant comics online, in my opinion.) Their store is very small, but not to be missed.

Penny Arcade – one of the staple web comics of any gamer (and plenty of non-gaming empathizers,) this store is small but has a few absolute gems.

Glarkware – A small, but brilliant collection of not-so-geeky-but-very-snarky shirts and stickers. My favorites here are their I ♥ Irony t-shirt, the stop-sign stickers (which I have used in my own neighborhood and can say they are the very definition of awesome) and the Urban Asshole Notification cards.

Update: Sadly, Glarkware has stopped carrying the fabulous stop-sign stickers and Urban Asshole Notification cards. That makes me a sad panda.

I will not use Comic Sans t-shirt – ‘Nuf said, really.

SplitReason – A fun collection of geek/gamer/pop culture shirts that are always cute, sometimes really funny, and other times a little cheeky.

NerdyShirts.Com – just what it sounds like! Lots of fun retro-gaming shirts here (Zelda was FTW before FTW existed!) And now, thanks to them, I have the Reading Rainbow theme song stuck in my head. Lucky for me, I have it in my iPod.

Honorable Mentions

Design By Humans has some eye-popping designs. I don’t personally shop there, as I’m not as fond of shirts with patterns that cover the entire tee, but that’s just me. Some simply stunning stuff there if that’s what you’re into, though.

Shirt.Woot is based on the same model as Woot.Com (a domain name I not-so-secretly covet and wish I had thought to buy years ago, like unobtainium dot com.) A new, exclusive shirt a day, and when its sold out, you’re shit outta luck – but many of my favorite geeks buy their threads at shirt.woot.

Jewelry

Made with Molecules -VERY cool sciencegeek jewelry shaped like molecules, made out of sterling silver. These are not only incredibly geeky, but also gorgeous! These are not cheap, but the quality makes these pieces worth every penny.

FractalSpin Geekcessories – Fun earrings, bracelets an other jewelery perfect for your favorite math, science or computer geek. Some of these pieces are actually made from actual capacitors and varistors! Perfect for the glamgeek!

Adorable sterling silver compass earrings and other engineering related jewelry can be found at GiftsForEngineers.Com. This site also has some really fun cufflink designs, such as cufflinks made from recycled circuitboards, or my favorite, the green level cufflinks that are made from real itty bitty levels.

ThinkGeek, of course, has some very cool necklaces, including two that light up – The Fuze Necklace (I own one – its delightful!) and the Crystal Cube Firejewel Necklace (which I just came across while researching this article and am buying NOW – so pretty with the glowwy and the sparkly and the oooooh…)

If your geek is a she-geek with a love for D&D, you MUST buy her the d20 Spiral Necklace. You simply must. Its beautiful and functional, and what geek doesn’t like that?

Not so sparkly, but still very cute, the broken image necklace is a lightweight pendant that looks like, well, a broken image. See for yourself! This would be a cute gift for your favorite web designer or graphic design geek.

Also at ThinkGeek, the Ring Thing (bottle opening ring) is a great gift for he-and-she-geeks alike. I’ve had mine for years now, and it’s come in handy at the most unexpected times. And yes, it really does work – you really can open bottles with it, although I wouldn’t recommend opening cases of them in a row. (Company BBQ, lots of beer, no bottle opener. My finger was a little tender by the time it was over, but BOY was I the hero.)

Mugs and Gadgets

W2 Pantone Series – These are unmatched for the design geek in your life. (Unmatched… get it? GET IT??) Super fun mugs, espresso cups and messenger bags in your print design geek’s favorite Pantone color.

My Cuppa Tea/Coffee from Suck UK – Color matching coffee mugs with shades of coffee and tea. Very cute! Frankly, a lot of their suff is really fun, and sorta geeky, like their alphabet ice cube trays, the alarm clock that runs away while beeping, to make you get out of bed to turn it off, or the Who Tall are You mirror, for your younger geeks-in-training.

If your geek is a coffee-lover, but more of a command line linux geek than a design geek, be sure to check out ThinkGeek’s Mug of Vi. Its okay if you don’t know what Vi is – they will. (Vi > emacs 4evah!)

Cthulhu-Themed

H.P. Lovecraft is an old favorite of many die-hard sci-fi geeks, and Cthulhu stands tall as the most well-known and revered of his mythos. Fortunately, thanks to teh intarwebs, there are oodles and scads of places to find the most awesome Cthulhu goodies:

H.P. Lovecraft Historical Society – If you buy nothing else for your favorite geeks this holiday season, you MUST buy the Cthulhu Christmas albums, aptly titled “A Very Scary Solstice” and “An Even Scarier Solstice.” The production quality on these albums is a thing to behold, and they are sure to brighten the face of any geek (albeit while darkening the rest of the room.) The set is sold together during the holidays as “An Unbearably Scary Solstice“, and comes with songbooks. Buy it now. It is the embodiment of awesome.

The HPLHS has piles of delightfully horrific gifts in addition to the albums mentioned above, but another personal recommendation is the What part of ph’nglui mglw’nafh Cthulhu R’lyeh wgah’nagl fhtagn don’t you understand? t-shirt. The reactions when a guy tries to get permission to stare at your boobs by asking “can I read your t-shirt” is always priceless. “Sure, if you can…”

My Little Cthulhu – an adorable action figure that even has a set of adorable victims (sold separately.)

Plush Cthulhu – there is so much fun stuff here, including Cthulhu plus toys, a Cthulhu hand puppet (the same kind used in the very funny internet show, Calls for Cthulhu), a plush Cthulhu holiday wreath, board games and more. Note: The Toy Vault doesn’t have an online store from which to purchase these goodies, but The Troll and Toad storefront seems to carry all these and more, including themed Cthulhu toys (Cthulhu as Elvis, Cthulhu as a superhero, Cthulhu as a rock star, etc) and additional Lovecraft monsters such as a Hound of Tindalos plush and a Nyarlathotep plush.

Movie, Game and TV Memorabilia

Forbidden Planet – This should go without saying, but Forbidden Planet has the most amazing collection of action figures and other chachke from just about every movie or TV show that would be meaningful to a geek, including (and OMG do I love this one) a Dark Crystal 7″ Chamberlain figure.

Archie McPhee Toys – One of my favorite toy sources, McPhee has some of the funniest and most unique toys for grown-ups, including a personal favorite, the Avenging Unicorn Playset.

WickedCoolStuff - another great site with tons of movie and TV-related toys, as well as some goofy novelty action figures.

World of Warcraft Action Figures – beautifully detailed action figures from the game World of Warcraft.

Adult Swim store – Cartoons are, of course, a staple of any geek’s media diet, and the best place for cartoons is Adult Swim on Cartoon Network. While most of the store is dedicated to selling DVDs and CDs from the network’s TV shows, there are some delightful apparel, print and action figure surprises in there too. (I personally think Assy McGee is one of the dumbest shows ever put on television, second perhaps only to anything Tim and Eric do – they are teh suck, but the rest of the action figures are teh awesome.)

Nerd Classics

I don’t care whether you’re a geek or a nerd, or whether your geek comes in the form of math, physics, science, computers or something else entirely – every geek used to read Mad Magazine – so what gift could be more fun than 50 Years of Mad Magazine, scanned into PDF in a two DVD set? Nothing, that’s what!

Music

Music is always a little tricky, since the variety in musical taste, even among geeks, is remarkably broad. There are a few genres of music, namely nerdcore and filk, that are particularly well-suited to geeks, however, and I strongly recommend any and all of the following artists. Even if your geek doesn’t absolutely love them, they’ll appreciate the tunes for the novelty alone. If they love the music, you’ll have introduced them to music that will welcome them with open arms.

Nerdcore (sometimes referred to as chip-hop) is hip-hop for geeks; rap for computer programmers, bloggers, gamers and ‘net junkies. Those of you who read Snipe.Net already know that I am one of nerdcore’s biggest cheerleaders, and these are my top picks based on lyrics, production value, and overall awesomeness.

MC Frontalot, MC Lars, YT Cracker, Optimus Rhyme (although they are not together anymore, you can still buy their music), Beefy and DevoSpice (formerly known as Sudden Death).

Not nerdcore, but still very geeky and fun: Pure Pwnage and Jonathan Coulton.

Prefer to Make Your Own?

Gotcha covered. These gift ideas from Instructables have some unique and sorta geeky ideas, with step by step instructions. Also be sure to check out the Make Magazine blog for a weekly lst of fun and nerdy do-it-yourself projects. Or, if your geek is a do-it-his-or-her-selfer and likes to make something out of nothing (or the shattered remains of something else), consider getting them a subscription to Make Magazine. And for the ecogeeks, there’s even a digitial-only subscription option that gives you access to the digital version.

And since we’ve moved to magazines, consider a monthly subscription to Geek Magazine, the most geek you can find in print, which covered movies, tech, music, games and more.

And finally, for the lego lovers, consider using the Lego Digital Designer and coming up with your own fabulous lego gift masterpiece. Freeware application Lego Digital Designer is a virtual Lego kit for your Windows or Mac desktop. Once installed, you can either use LDD to build your own masterpiece from scratch or—if you’re lacking patience—you can get a head start by using one of their starter models. With over 763 brick types to choose from, your LDD-design will have reached well beyond the limits of your normal lego kit. Once you’ve built the perfect prototype, you can upload the results to the Lego web site to order a custom kit with every brick you’ll need included! Lego Digital Designer is freeware, Windows and Mac only.

Box-Toppers & Stocking Stuffers

For smaller gifty-stuff, suitable for people you’re not willing to spend much money on, or for putting on the top of the “real” gift box as an extra something, these stickers and trinkets add that extra something:

Stickers are always a fun, relatively cheap (usually under $5) box-topper, and with all the hardware your geeks are likely toting, they won’t run out of places to put them. Thinkgeek has a great selection of stickers, and Jinx’s collection is perfectly tailored to the gamer geek. Note: the World of Warcraft Horde and Alliance cutout stickers are gorgeous, but larger than you might first imagine, 6″x8″, so just keep that in mind. I really wish they had smaller ones I could put on my laptop. Stickerton also has a small collection of geek stickers, and their anti-OS stickers (MSFT, LINUX, etc) are sure to piss off a few opposing factions.

Or check out the tutorial on Instructables.Com that teaches you how to make the cutest little computer bugs from old computer parts. These are seriously adorable, and pretty easy to make if you’re comfy with a soldering iron.

Or, if you’re not so much a DIYer, you can buy computer bugs here. And if you don’t like the geek in your life very much, you can buy them actual live bugs here.

And of course, the finishing touches are *everything* – so don’t forget to wrap your geeky goodies in the ThinkGeek wrapping paper, featuring gift wrapping paper with emoticons, binary code, mathematical equations and even Klingon.

So that’s our list – do you have your own sources for geek toys, shirts and other fun-but-useless madness? If so, leave it for us in the comments!

Also check out:

What’s Disqus?

Disqus is a commenting system that you can apply to any website. If you’ve got a static site that you want to enable comments on without mucking around with databases and scripting languages, Disqus might be something you want to look into. Disqus can also be used (as in this case) as a replacement for a standard commenting system like WordPress’ native comments. Oh, and did I mention it’s free?

I’d like to be very clear here with regard to what Disqus is NOT. Disqus is not a content management/blogging platform. It would not replace your WordPress or Movable Type installation, and the way by which you post new content. It handles only the comments, and is basically agnostic to your actual site content.

I’ve known about Disqus for years, but normal WordPress commenting was enough to do the job for me, so I never bothered investigating it much, but with the emergence of third-party login connections like Facebook Connect, Twitter’s OAuth, OpenID, and so on, I realized I wanted to offer these ways of authenticating to my site users. Hacking WordPress (or using several clunky and sometimes conflicting plugins) for each one of these authentication methods wasn’t something I had the energy to do, plus Disqus offers a few additional features I really liked, such as tracking “reactions” and the ability for users to upload a video response.

Disqus isn’t the only one doing this. IntenseDebate.Com offers very similar services and an almost comparable feature set. I set up an IntenseDebate account and even set up the WordPress plugin, but ended up a little underwhelmed, for reasons that are outside the scope of this article. If you’re interested in comparing the two, check out this wiki page by deuts.org.

Why Disqus?

What really convinced me that Disqus was stable and strong enough to give it a shot is the fact that Mashable.Com uses Disqus exclusively to handle their site comments, and that’s kind of a big deal. As a frequent visitor to Mashable, I always love being able to one-click login to reply, and seeing the “reactions” is always interesting to me.

I’ve already mentioned a few of the things I really like about Disqus – and for a full feature set, visit their website and click on the “This is why you should too” link on their homepage – but these were the key factors for me:

Ability for a commenter to use Facebook, Twitter, OpenID, Yahoo and other networks to authenticate and post. This was probably the most important factor. I had previously hacked together some Facebook Connection functionality, but it was a massive pain in the ass, and would cause the page to reload itself once on every page load in Firefox. Really annoying. Plus, I wanted to widen the net to OpenID and Twitter, without a lot of extra work. Logging in is still optional, but more features are available if the user logs in using one of the methods offered.

Facebook Newsfeeds. This was part of the reason I had originally hooked up Facebook Connect to the site in the first place – the ability to allow the user to post a notification to Facebook that they have just commented on my site. I am intimately, painfully aware of the effectiveness of the Facebook news feed in spreading content because of my extensive work developing Facebook applications, so this was a feature I definitely wanted.

Incidentally, when you sign up for Disqus, they give you an API key based off of Facebook’s new fourth-party functionality that lets services like Disqus create an application on the fly. IntenseDebate, on the other hand, asks you to manually create an application in Facebook and then enter your API key.

Ability to track Reactions. As I’ve mentioned, this is a feature I really like about Disqus. Reactions are similar to trackbacks, although my WordPress has never been great about capturing all of the places one of my posts might have been mentioned, especially social networks. Reactions let you mine social comments and mentions from places such as Twitter, FriendFeed, Digg, and YouTube, then display them with your comments:

“Record a video” option. While I absolutely do not expect anyone who visits this blog regularly to ever record a video response (and frankly it would probably be a little creepy if they did), this was interesting to me for another project I’m working on where that type of thing would totally make sense, so I figured I’d include it and see how it worked.

Response rating. The “like” functionality is something I think is useful to get an idea of who the people are who are contributing the most valuable comment content to the site.

Email notifications of follow-up comments. This is something I have had for a while on Snipe.Net by way of a WordPress Plugin called Subscribe to Comments – and it is such essential functionality, it actually surprises me that WordPress hasn’t made this part of the core yet. The Subscribe to Comments plugin worked fine, although it was a little on the clunky side to customize the look+feel.

So that’s what I was looking for. All of the functions above work as advertised, from what I can see so far, so I’m happy about that.

The Challenges

Everything was not exactly smooth sailing to start off with though, and I’m still trying to deal with some frustrations that come with Disqus. Depending on how customized your look and feel is, these may not even be issues for you, but since my site design is heavily stylized, it’s actually giving me some headaches. I’ll get into more detail in this section.

Import didn’t work. Disqus lets you import your existing blog comments from a variety of blogging platforms, including self-hosted WordPress installs, Blogger, Drupal, Joomla, Movable Type, Tumblr, Sandvox, chi.mp, Squarespace and more. I apparently was one of a handful of people affected by a temporary bug in their importer, and while it was frustrating at the time, they got it sorted the same day. I had emailed support, left a few blog comments on their blog and didn’t hear back, but they did eventually tag me back on Twitter. (Annoying that they didn’t respond with an acknowledgment of the issue before it had been fixed though. A “we’re looking into it” would have been nice, rather than leaving me wondering if anyone was there.)

Pain in the ass to style. The documentation on the styles used in Disqus is not exactly extensive. They basically tell you which CSS ids are used for a small handful of the elements in the Disqus thread block, but everything else you have to figure out on your own using Firebug.

Not a lot of flexibility in layout. This may not affect you at all if you’re using a pretty standard blog template. Mine was written from scratch, and although I still use a lot of the typical WordPress conventions (the HTML/CSS ids for the sidebar, for example), since you cannot actually modify the HTML that is output from the javascript calls, it can be limiting.

I had to take down my “Latest Comments” widget from the sidebar, since that was based on WordPress comments and it wouldn’t see any Disqus comments – but the Disqus javascript they provide to display most recent comments looked like braised ass in Marsala sauce when I tossed it into the sidebar. I may be able to work with it a little more, forcing my will through CSS alone, but this is time-consuming and even more annoying since there is no documentation on the styles being used there. I’ll keep plugging away at it, but if they let me define my own HTML containers for, say, the avatar and the text separately, it would be a lot easier.

Also, the “x comments” text that I usually have on the label over the blog image in both the blog post itself and on the category, homepage and tag pages is now basically sorta busted. Disqus uses javascript to fill in these areas, but you cannot customize the text from what I can see. Since my blog was designed with room for only “x comments”, not “x comments and y reactions”, this is making things look a little weird. I may have to actually redesign some of the sections to accommodate this issue, which makes me cranky.

In the Disqus admin, you only have three basic templates to pick from for your comments area display, none of which really rocked my socks. I picked the one that was the least weird-looking with my heavily stylized blog design, but as you can see, it still looks weird and amorphous. I’ll have to spend some time combing through the styles manually with Firebug to see how much I can improve that.

Also, protip: If your comment counts are not displaying properly on your index/category pages, be sure to check the box in the WordPress Disqus Advanced Options in your WordPress admin:

They don’t make it abundantly clear what checking that box does, but my comment count wasn’t being displayed on my homepage until I checked that box.

Some features a little buggy. For example, default avatar upload isn’t working. I expect this is a temporary issue, but it’s frustrating having a brandy new comment system and seeing the shitty gray default Disqus icon all over the place. It’s great that you can upload your own default icon for your site, but it’s only great if it actually works.

Also, in the custom CSS section of the Disqus.Com admin area, they suggest you use @import to import an externally hosted style sheet. Only that didn’t work at all.

And finally, for some reason, the comment count at the top of the blog posts pages isn’t working at all, which is why you just see “comments” in the masking tape area above the blog image, instead of “x comments.” Not sure what’s up with that, but I’ll be pestering them about it later.

Standard paranoia. Since the blog comments no longer live on my server, if something were to happen to Disqus, temporarily or forever (DDoS, network outage, bankruptcy, etc), I’d be shit outta luck, same as happens any time you rely on a third-party system to host your content. Again, my concerns are slightly assuaged by the fact that Mashable trusts them.

The API

If you’re feeling ambitious, Disqus has a rudimentary API set up, however their documentation on this is arguably worse than any I’ve seen, and I’ve wrangled some gnarly APIs in my day. I should rephrase that – the API function documentation is adequate, but they leave out some really important details. Every request you make using their API requires either a forum API key or a user API key – only they don’t tell you WHERE you’re supposed to find your API keys in the first place.

So you’ve got a shiny new car, and an operators manual – but no freaking keys. NO WHERE in your dashboard does it tell you what your user API key is, and without that, you cannot find out your forum API key, forum id numbers, or anything else at all.

If you’re a standard site/blog owner who just wants to add comments to your site, you will probably never need to even look at the API, but in the off chance you actually end up tinkering with the API, here’s how you find out ALL of your API key and forum id information. Hopefully it will spare you the frustration and headache I went through to figure it out.

If you were writing a script to access the API, you might use something like cURL in PHP. To test these functions out, you can just use a command line terminal or ssh terminal using cURL as long as the machine you’re logged into via shell has cURL installed. The API responses are in JSON format.

You need to perform these in order, since each step relies on the information you obtained in the previous step.

1. To get your Disqus User API key (which you need to obtain your Forum API key and everything else):
Login to Disqus.Com, and go to this url – http://disqus.com/api/get_my_key/

2. To get your Disqus Forum ID:
Via command line, type:
[sourcecode lang=shell]curl -0 -L “http://disqus.com/api/get_forum_list?user_api_key=_USER_API_KEY_”[/sourcecode]

You’ll get a JSON response that looks like this:
[sourcecode language='html']{“message”: [{"created_at": "2009-10-22 10:05:15.657635",
"shortname": "snipenet", "id": "123456", "name": "Snipe.Net"}], “code”: “ok”,
“succeeded”: true}[/sourcecode]

3. To get your Disqus Forum API Key for the Forum ID:
Via command line, type:
[sourcecode language='html']curl -0 -L “http://disqus.com/api/get_forum_api_key?user_api_key=_USER_API_KEY_&forum_id=123456″[/sourcecode]
where the Disqus Forum IS you obtained from step 2 is ’123456′. The message field in the JSON response should contain your API key, so you’ll see something like this:

[sourcecode language='html']{“message”: “LONG_STRING_OF_LETTERS_AND_NUMBERS”, “code”: “ok”, “succeeded”: true}[/sourcecode]

Now that you’ve got all THAT, you can actually move forward with interacting with the API, as per the documentation.

Conclusion

It’s a little early in the game to know whether or not making the switch to Disqus was the right one. Fortunately, reverting it back to WordPress comments will take a lot less work than switching it to Disqus did, if it comes down to that.

I think Disqus will work out very well, and I’m excited about the new features it brings to my site, even if some of the styling and layout limitations are frustrating.

But hey, if you actually made it through this long, drawn-out post, leave me a comment so I can test how well Disqus is working

Also check out:

At its most basic, the functionality we’re discussing is simply one or more text or image links that, when clicked, cause content in a set space to change. Some potential uses:

• Dynamic image gallery where the user clicks on a thumbnail to see a larger version of the image
• Video gallery that allows you to include thumbnails on the video that loads the selected video into a single player space. This can be particularly helpful in tightly designed Static FBML pages where you have limited space to display a lot of content.
• Or even using your Static FBML tab as a mini-site, replacing the entire tab’s content with new content to simulate multiple pages

We’re going to explore a few examples in this article, but it’s basically the same code regardless of how you apply it. First, let’s look at creating a micro-site within a Facebook Static FBML tab – see a live demo of the tab we’re going to create here.

Notice the navigation within the tab itself (Home, Specials, Locations, About). Clicking on them displays new content in the entire tab without actually reloading the page. This is an example of Facebook’s DynamicFBML, and you won’t believe how easy it is to implement. Seriously, you won’t.

So, okay… maybe that tab isn’t the fanciest thing you’ve ever seen, but it gives you a clear idea of how this works. How plain or sophisticated the design is depends entirely on you and how comfy you are in a graphics program.

If you dig the cool-looking button CSS in the test page, you can learn how to get that effect by visiting ZurbBlog’s post on Super Awesome Buttons with CSS3 and RGBA.

But here’s the great part: the code needed to create that tab is basically this:

[sourcecode lang='html']
Home
Specials
Locations
About

[/sourcecode]

Seriously. That’s it. That’s ALL there is to it. Naturally, I stripped out the extraneous text, images and styles from my demo for simplicity’s sake, but that’s honestly it.

This is arguably the one thing that is exactly as easy as it appears to be with regard to developing anything for Facebook.

This code is fairly straightforward, but let’s take a look at what’s happening here.

In the first part, we’re setting our links. For the micro-site, these are our navigation links. Everything here looks like pretty standard HTML except for the extra “clicktoshow” and “clicktohide” elements. (Note: The links do not have to be set before the content divs – you’ll set them wherever they make sense in your design. You’ll see an example of this further down the article in the image gallery sample.)

[sourcecode lang='html']
Home
Specials
Locations
About[/sourcecode]

The clicktoshow element allows you to specify the id’s of the elements you wish to show when the link is clicked. Conversely, the clicktohide element allows you to specify the ids of the elements you wish to hide when the link is clicked.

In our navigation elements, since the div that contains the homepage text is set as nav1 in our HTML, we want the clicktoshow for the Home link to be nav1 (since we want that div to show when we click on it.) Likewise, since we’re completely replacing whatever div is currently visible with the nav1 div contents, we want to specify everything that isn’t nav1 in the clicktohide.

Combining divs in hide/show

What’s particularly fun about the clicktoshow and clicktohide (other than their sheer ease of use) is the fact that unlike a more complicated true JavaScript version, showing and hiding two or more divs at the same time on the same click is simply a matter of specifying them in the clicktohide or clicktoshow parameters.

[sourcecode lang='html']
Oh
Hai
Oh Hai
Oh Hai SRSLY!

[/sourcecode]

In the snippet above, we’re using only three divs with four nav elements. By specifying multiple ids in the clicktoshow parameter, we can show multiple divs at once, so when you click on “Oh Hai SRSLY!”, you’re looking at nav1, nav2 and nav3 all being shown at once. Piece of pie.

Example Image Gallery

One more example that will hopefully get your creative juices going – let’s look at how to do an image gallery using only clicktoshow and clicktohide.

In this gallery, we have a set of thumbnails with one large space set aside in our design where the fullsize image will display. You can see a simple demo of this gallery here.

Now take a look at the sourcecode below. Notice that we’re using the exact same code as we used in the other examples - we’ve just changed the names of the divs so they make more sense semantically in a gallery.

[sourcecode lang='html']

[/sourcecode]

By the way – if you dig the images used in that sample gallery, be sure to check out the Great Pumpkin Roundup post that shows examples of some of the most amazing pumpkin carving you’ve ever seen in your whole life.

In a project for vitamin water, I needed to create what appeared to be a dynamic video player, using only the default Facebook media player, which doesn’t support options like having a playlist where people can click on a gallery of thumbnails and load the video into a single player. See below:

The code used to pull this off is almost identical to the image gallery example above. No foolin’.

But wait – there’s more!

An additional DynamicFBML function that you may find useful is Clicktotoggle, which is very similar to Clicktoshow and Clicktohide, except instead of turning visibility on and off by clicking on on different links, you toggle visibility on and off by clicking the same link.

Your takeaway

While I certainly hope that the code presented here will be useful to you, the concept of what you can do using clicktoshow and clicktohide is more important. You’re not limited to creating a micro-site or an image gallery. Get creative and have some fun with this. Not many people are being adventurous in their Static FBML tabs yet, so you have an opportunity to really wow your users with your newfound skills.

Additional Resources

• Facebook Developers Wiki – DynamicFBML/Visibility
• Facebook Developers Wiki – Clicktoshow
• Facebook Developers Wiki – Clicktohide
• Facebook Developers Wiki – Clicktotoggle

Also check out:

Right then. Moving on.

OAuth is an open protocol to allow secure API authorization in a simple and standard method from desktop and web applications. In layman’s terms, it is a system by which you can allow a user to authenticate with an OAuth-enabled service without providing you with their credentials to that service.

In my Twitter anti-social media douchebag service, DoucheNuker.Com, we use Twitter’s OAuth to validate the user and make Twitter API requests on their behalf, specifically sending a DM to the douchebag they are nuking, another DM to @spam to report them to Twitter as a spammer, and then a block request to block the spammer’s account from being able to follow them in the future.

Why OAuth?

Using OAuth allows you to write applications that access the Twitter API but do not require your users to give you their Twitter username and password. This is important for a variety of reasons:

• If the user changes their Twitter login, they do not have to update that information with you for your application to continue working for them
• Using OAuth puts the user in control – if they ever wish to stop using your application, they can disable it through Twitter instead of trusting your application to stop using their login information. Once they disable it through Twitter, any requests by your application will require them to manually approve the connection again.
• Increased sense of trust, since the user doesn’t have to worry about your application stealing their Twitter credentials and using it for nefarious purposes. I personally wouldn’t trust any web-based application that asks for my Twitter username and password, and given Twitter’s recent history of bad press regarding their security, more and more users are following that lead.

Definitions

Before I show you how to use Abraham’s shmancy library to connect to Twitter’s OAuth, you should understand the basics of how OAuth works and what it’s doing. And before we get too caught up in that, it’s important that we establish some definitions that you’ll see if you do any additional research into OAuth:

User: The users of your application.
Consumer: Your application, which you have registered with Twitter
Service Provider: The third-party service the consumer (your application) is authenticating against – in this case, Twitter.

These terms are used in much of the OAuth documentation, so they’re worth remembering.

So now that you know the lingo, how does OAuth actually work? For a detailed technical view of what gets passed back and forth, check out the core spec documentation on OAuth. Included in that documentation is the detailed chart below.

As you can see, the documentation frequently uses the terms defined above.

If that flow diagram seems a little overwhelming, don’t sweat it. I have a simplified version just for you (featuring a stoner Twitter user and a Twitter bird with a Thyroid problem), specifically with respect to the bits you need to know to set up your first Twitter application with OAuth. The other things OAuth does are important, but this is the stuff that directly impacts you, and that you need to grok to get started with your app.

I was absurdly and inexplicably tempted to randomly throw a Boba Fett icon into that diagram, but was afraid it might confuse people. That said, I have poor impulse control, so here’s a random Boba Fett icon, so I can sleep tonight. As my friend Jason Ramboz says, “Step 4, Boba Fett freezes the key in carbonite for transport.”

Moving on.

Now that you’ve got a good idea of how the basics of OAuth work, you’re ready to get started with Abraham’s great Twitter OAuth library. He does provide an example script in the downloadable code, but it might be confusing for people just starting out.

Getting Started – Registering Your Application with Twitter

Before you even start mucking around in any code, you have to register your new application with Twitter. You’ll need a name and url for your application in order to register it, and you’ll need to define a callback url. The callback url is the full url of the page Twitter should send the user to after it’s done authenticating. This file can be named anything you want, but make sure the one you create on your server matches the one you register with Twitter. All of these details can be changed later if you change your mind or need to update something.

Once you’ve registered your application, Twitter will issue you a Consumer Key and a Consumer Secret for your new app. You’ll need these to get your sample code from the Twitter OAuth library working. As you can probably tell by the name, your Consumer Secret should remain private and you should never give it out to anyone. It’s used in your code so that Twitter can identify your application when you’re making API calls.

By forcing you to send your consumer key and secret with your API calls, Twitter is able to determine which application is sending the API calls, and can verify that the Twitter user you are attempting to send API requests on behalf of has actually authorized your application to access their account. If the user decides they no longer want to allow your application, they can edit their allowed application preferences and your application will no longer be able to make API calls on their behalf.

You can access a list of all of the applications you have registered with Twitter – and links to edit their details or view the consumer key and consumer secret – by going to your oauth clients page on Twitter.

The Twitter OAuth PHP Library Code

You’ve got your consumer keys from Twitter, so now you’re ready to download Abraham’s Twitter OAuth library code. You can pull the code from http://github.com/abraham/twitteroauth. As I mentioned, he does provide an example script, but there’s not a lot of explanation given to it, so some people might be a little confused by it if its their first foray into Twitter applications with OAuth. We’re going to whip up something a little more straightforward and simple, so you can easily modify it to suit your needs.

Unpack/unzip the archive you downloaded from github. You’ll see the two main files, OAuth.php and twitterOAuth.php are in the top level directory, and there is a directory called ‘example’, that has the included example script.

For our example, we’re going to put the two OAuth files into a directory called ‘twitterOAuth’, which is a sub-directory of where the index.php and callback.php files live. As you may have guessed, the callback.php file is the one we’ve registered with Twitter as being our callback url. We’ll keep common configuration options such as the consumer key and consumer secret, and database credentials in a config.php file.

[source lang='php']/* config.php */

/* Consumer key from twitter */
$consumer_key = ‘xxhjgxhjxhhjgxjhjxgjyx768678xx’;

/* Consumer Secret from twitter */
$consumer_secret = ‘jhgjdfgfgjhj76jgjgjhxxxjhxxx’;
[/source]

Now we create the index.php file, which will be used to generate the authentication link, inviting users to authorize and login using Twitter.

[source lang='php']/* index.php */

session_start();

/* Destroy the session if the user is logging out */
if ((isset($_GET['logout'])) && ($_GET['logout']==’true’)) {
session_destroy();
session_unset();
}

/* Include the config file */
require_once(‘config.php’);

/* include the twitter OAuth library files */
require_once(‘twitterOAuth/twitterOAuth.php’);
require_once(‘twitterOAuth/OAuth.php’);

/*
Create a new TwitterOAuth object, and then
get a request token. The request token will be used
to build the link the user will use to authorize the
application.

You should probably use a try/catch here to handle errors gracefully
*/
$to = new TwitterOAuth($consumer_key, $consumer_secret);
$tok = $to->getRequestToken();

$request_link = $to->getAuthorizeURL($tok);

/*
Save tokens for later – we need these on the callback page to ask for the
access tokens
*/
$_SESSION['oauth_request_token'] = $token = $tok['oauth_token'];
$_SESSION['oauth_request_token_secret'] = $tok['oauth_token_secret'];

echo ‘

login using twitter | ‘;
echo ‘Logout

‘;
[/source]

The callback.php file is the script that Twitter sends the user back to after authenticating. Here you’ll probably want to set some cookies, store some user data in the database, and start letting the user do whatever it is your application does.

[source lang='php']/* callback.php */

session_start();

/* Include the config file */
require_once(‘config.php’);

/* include the twitter OAuth library files */
require_once(‘twitterOAuth/twitterOAuth.php’);
require_once(‘twitterOAuth/OAuth.php’);

/* check for an auth access token. If there’s no auth token set, go ahead and fetch one from Twitter,
* using the API call. */
if ((!isset($_SESSION['oauth_access_token'])) || ($_SESSION['oauth_access_token'])==”) {

$to = new TwitterOAuth($consumer_key, $consumer_secret, $_SESSION['oauth_request_token'], $_SESSION['oauth_request_token_secret']);
$tok = $to->getAccessToken();

/* Save tokens for later – might be wise to
* store the oauth_token and secret in a database, and
* only store the oauth_token in a cookie or session for security purposes */
$_SESSION['oauth_access_token'] = $token = $tok['oauth_token'];
$_SESSION['oauth_access_token_secret'] = $tok['oauth_token_secret'];

}

/* Connect to the Twitter API */
$to = new TwitterOAuth($consumer_key, $consumer_secret, $_SESSION['oauth_access_token'], $_SESSION['oauth_access_token_secret']);
$content = $to->OAuthRequest(‘https://twitter.com/account/verify_credentials.xml’, array(), ‘GET’);
$user = simplexml_load_string($content);

if ($user->screen_name!=”) {
echo ‘

SimpleXML. Using SimpleXML, we can call up any node values within the XML using $user->field_name, as you can see above.

I’ve included a print_r($user) so that you can see the full details of the array being returned, but you’ll obviously want to comment that out in your live code.

The output array will contain the following fields:

[source lang='html']SimpleXMLElement Object
(
[id] => 14246782
[name] => snipe
[screen_name] => snipeyhead
[location] => New York
[description] => Codemonkey, designer, author, speaker, blogger, swordfighter, Warcrafter, sarcasticgeek, scuba diver, blacksmith, crimefighter, Mentat, MBTI: ENTP, Totally NSFW
[profile_image_url] => http://s3.amazonaws.com/twitter_production/profile_images/303658881/Photo_4-rcrop2_normal.jpg
[url] => http://www.snipe.net
[protected] => false
[followers_count] => 4224
[profile_background_color] => 340100
[profile_text_color] => 3C3940
[profile_link_color] => 6C2125
[profile_sidebar_fill_color] => AEA797
[profile_sidebar_border_color] => 943A39
[friends_count] => 3756
[created_at] => Fri Mar 28 20:37:35 +0000 2008
[favourites_count] => 314
[utc_offset] => 12600
[time_zone] => Tehran
[profile_background_image_url] => http://s3.amazonaws.com/twitter_production/profile_background_images/22127710/twitterback2.jpg
[profile_background_tile] => false
[statuses_count] => 20570
[notifications] => false
[verified] => false
[following] => false
[status] => SimpleXMLElement Object
(
[created_at] => Mon Jul 27 01:50:36 +0000 2009
[id] => 2862508774
[text] => @elazar In case a name gets blocked/banned – when its reinstated (by someone claiming it, not spamming), it has a new ID#
[source] => Tweetie
[truncated] => false
[in_reply_to_status_id] => 2860170987
[in_reply_to_user_id] => 9105122
[favorited] => false
[in_reply_to_screen_name] => elazar
)

)[/source]

We’re not actually doing anything magical here yet, since that information is all available publicly via a user’s RSS feed, but the key line of code you want to look at in callback.php is this one:

[source lang='php']$content = $to->OAuthRequest(‘https://twitter.com/account/verify_credentials.xml’, array(), ‘GET’);[/source]

The OAuthRequest function is what actually sends the requests to the API, so you’ll be using this a lot. In the example above, all we were doing was getting the access tokens, but you’ll use OAuthRequest for just about everything else, too. For example, to send a Direct Message in Twitter, you’d use:

[source lang='php']
$params = array(‘user’ => ‘username’, ‘text’ => ‘this is a test message’);
$do_dm = simplexml_load_string($to->OAuthRequest(‘http://twitter.com/direct_messages/new.xml’, $params, ‘POST’));[/source]

To block a user, you’d do:

[source lang='php']$doblock = simplexml_load_string($to->OAuthRequest(‘http://twitter.com/blocks/create/username.xml’, array(), ‘POST’));[/source]

To send a status update:
[source lang='php']$content = simplexml_load_string($to->OAuthRequest(‘https://twitter.com/statuses/update.xml’, array(‘status’ => ‘Test OAuth update. #testoauth’), ‘POST’));[/source]

Important! Storing user IDs

Whenever you’re storing Twitter IDs in a database, be sure to store the Twitter ID number in addition to (or instead of) the Twitter username. While it may seem obvious to use a numeric value over a mixed alphanumeric, Twitter doesn’t expose user’s ID numbers without a little digging, so it might be easy to forget that they exist.

There are two main reasons why using the numeric ID is critical:

• Users can change their Twitter usernames. If they did this, your entire database could potentially be screwed up, since username key you’re looking for won’t match any longer.
• If an account has been suspended due to spam or imposters, it can potentially be available for registration again after a grace period. If a spammer had a username before, and then a legitimate user reclaimed it, your records could potentially have old data from the previous user’s account.

The second point above became crystal clear while working on DoucheNuker.Com. If a user account was suspended due to spamming, and then a legitimate user took it over, that new, legitimate user could potentially be considered a spammer in our database if we didn’t store (and query against) the ID number, too. When a username is reissued or reclaimed, it gets a new user ID number, so as long as you store and use the Twitter user’s ID number, your database can remain agnostic to name changes and reissues.

You’ll note in the Twitter REST API documentation that almost all API requests allow the option of using the username or the user ID, and some actually require the user ID and cannot be used with just a username.

Important! Error Messages and Throttling

You do not want to authenticate against Twitter every single time you load the page, but will instead want to store the request tokens in a database or session so that you don’t keep hammering Twitter’s API each time the page loads.

Remember that the although the Request Token you used to generate the authorization link will change often, a user’s Access Token and Access Secret Token do not, so you can safely store those in a database and use those instead of re-validating every time.

As of right now, Twitter is throttling validation requests to 15 per Twitter account per hour. This was implemented to improve Twitter’s security and make it harder for bad guys to brute force their way into someone else’s Twitter account. There is discussion about rolling this change back, or only throttling to 15 failed attempts per hour, but as of this moment, if you attempt to authenticate more than 15 times in an hour, you’ll get a message that says “Too many requests in this time period. Try again later.” There is no way around this message for now, so plan your application accordingly.

This limit is entirely separate from the Twitter Rate Limit that throttles the number of times you can hit the API. Whitelisting your account and IP address with Twitter will NOT circumvent this rate limit, so make sure you design your app in a smart way that will not attempt to authenticate more than absolutely necessary.

The default rate limit for calls to the REST API is 150 requests per hour. The REST API does account- and IP-based rate limiting. Authenticated API calls are charged to the authenticating user’s limit while unauthenticated API calls are deducted from the calling IP address’ allotment.

You’ll notice in all of API requests, we’re using SimpleXML to capture the value of the XML that’s returned. We need to do this in order to make sure we’re capturing any error messages that Twitter returns to us. Without error messages, when stuff doesn’t work as expected, we’re flying completely blind. Always make sure to plan your application in a way that handles errors intelligently. Let’s take a look at the API call to send a Direct Message again:

[source lang='php']$params = array(‘user’ => ‘username’, ‘text’ => ‘this is a test message’);
$do_dm = simplexml_load_string($to->OAuthRequest(‘http://twitter.com/direct_messages/new.xml’, $params, ‘POST’));

/* Check for an error response from Twitter */
if ($do_dm->error!=”) {
echo ‘

ERROR: ‘.$do_dm->error.’

‘;
}[/source]

Now we’re capturing the error returned from Twitter, and can handle this appropriately with our users. The error might be indicating that the user cannot send a Direct Message to someone they’re not following. Or there might be something else amiss – so you’ll want to make provisions in your script to help the user understand why something might not be working.

And that’s honestly all there is to it. Now that you’ve got the OAuthRequest function sussed, you just need to check with the Twitter API Wiki to determine the correct urls and parameters to send, based on what you’re trying to do.

I have to say, having worked with a LOT of APIs, including Facebook, Amazon, and at least a half-dozen others, Twitter’s API is actually the most well-documented and simplest to use. Surprising, really, since Facebook and Amazon have actual business models, so you’d think they’d invest just an iota of time into documenting their shit. I’ve gone into long tirades here on my blog about how miserably awful the Facebook API documentation is, and Amazon’s API is probably 10x worse. Twitter’s API is, overall, pretty accurate and up to date. If its your first foray into writing an application with an API, I think Twitter is actually a good place to start – before you graduate to Facebook and wish you were dead.

Recap – Important Links

• Register your application with Twitter
• List of all of your registered apps on Twitter
• Twitter API Documentation
• Twitter API Rate Limiting Documentation
• Download & Docs for Abraham’s OAuth PHP library
• OAuth official website

And that’s all there is to it. Please use your new powers for good and not evil. No annoying games, no “increase your followers” services, etc. If you have any questions, leave ‘em in the comments.

Also check out: