What I wanted to hide and why:

• “People You May Know” — Lately, this has turned into “People you probably don’t know, but were have the same town and are 10-12 years younger than you!” and “People who live in the same city!”
• Invite Friends — I’m not going to bug people to join Facebook.
• Find Friends — I don’t want to import my IM and Gmail address book.
• Maybe sponsors and ads? — This is really a maybe. At first, I really wanted to block them, but then ads for Threadless started showing up. For now, I’ve just taken to “thumbing down” ads that I have no interest in.

When all was said and done, I had a much cleaner interface:

How I did it

Since I already had Adblock installed, I figured I would start there. The nice thing about Adblock now is that it can block based on CSS selectors. Now, you don’t need to know what that means, only how it works. In Facebook, for example, the “People You May Know” section is labeled as “pymk” in the source code (div.pymk) and the “Find Friends” is identified as, oddly enough, “findfriends” (div#findfriends)¹.

You may be saying “so great, but how do how do I block them?” Well, here’s how: Open up your Adblock filters. Here’s what I currently use (which you can download as an Adblock Filterset, which also includes blocking the beacon):

• ##div.pymk
• ##div.invitefriends
• ##div#findfriends
• ##div.adcolumn (if you really want to block ads)
• ##div#home_sponsor (because most of the time, it’s just a Facebook ad)

If there’s something else you want to block on the page, get ready to get your hands dirty. Goto View:Page Source, then do a search for the text in or near what you want to block. You should see something that looks like<div id=”somethingorother”>. Great, that “somethingorother” is what you need. Since this is an ID, we’d use this format in our filter: “##div#somethingorother”. If it was instead <div class=”somethingorother”> it would be “##div.somethingorother”.

But sometimes Facebook can try to confuse you.  For example, the “People you may know” section actually had two classes, “sidebar_item” and “pymk.” In this case, it was easy to figure out which one to use. (Had I used “sidebar_item,” I would have blocked other things, too.

Now, this might not be worth the hastle for you. That’s fine. There’s other ways. If you have the Stylish plugin (mentioned yesterday) for Firefox, there’a a whole page of easy-to-install scripts that can take care of some of this for you or even change the layout/style of Facebook. Just beware, many of those scrips are outdated and probably won’t work now. Though there is one that caught my eye: Cleanup Facebook. It might do too much for you though, it looks like it hides any non-default app boxes & news feed items as well as ads.

1. The reason the first uses a period and the second uses pound/hash is the first is a class and the second is an ID. This isn’t a technical write-up so I won’t go into too much detail about CSS other than that.