Block Facebook Ads with CSS

(This is my experience evaluating Facebook for my daughter.  It turned into a technical exercise in CSS.  If you want the full narrative, read on.  If you just want the steps for using CSS to block ads on Facebook, jump ahead.)

Emma asked permission to create a Facebook account so she can keep in touch with some of her cousins and friends.  Emma has been very responsible using our family computer and does a good job keeping our rules about what to do and how to behave online.  So, Thelma and I decided that it was probably OK once I had a chance to check out and become familiar with the privacy settings and parental controls.

Even though I work for an online business and Facebook is a frequent topic of conversation when it comes to reaching out to and retaining online customers, I have to admit that I have rarely used the service.  I created an account for business purposes to become a "fan" of a client so I could keep tabs on some social marketing campaigns.  That's it.  Otherwise, I'm not interested in Facebook.  I've ignored every invitation to become someone's friend.  If you are one of the people I've spurned online, I'm sorry.  It's not you.  It's me.

It turns out that Facebook doesn't have any parental controls and the site requires you to be 13 years old or older to join.  Because I'm one of those people who believe you should be honest about user agreements and copyrights and the like, Emma won't be getting a Facebook account for a few more years.

How can I expect my child to be honest and moral when she's online if I'm willing to lie to create her an account?

There are all kinds of horror stories about people revealing too much information about themselves through their Facebook account and other social media sites.  Anytime I need to meet a new person through my work or conduct an interview, I start by searching for details about them online.  People need to be more careful about what they share.  I have to say, though, that the privacy controls on Facebook are pretty good if you're willing to review and update your settings.

The part that worried me the most about Emma using Facebook was the advertising she would see on the site.  There is no way to formally turn off ads within your Facebook setting, but most browsers give you the ability to create your style sheets that will control how your browser displays pages.  The style sheets are written in a language called CSS (Cascading Style Sheets).  I figured that (A) there must be some way to create a custom style sheet that will hide the advertisements and (B) someone smarter than me must have figured it out already and (C) that some will have posted a solution online.

Yep.

I searched for "how to block Facebook ads" and read a post from The Ausbury Blog that gave me most all the information I needed.  The post describes two methods.  The first is to download and install the Adblock Plus plug-in for Firefox.  If you prefer Firefox as Thelma does, Adblock Plus may be a good solution for you if you are willing to manually enter a bunch of settings.  If so, check out this post about how to block Facebook ads that includes instructions and an updated list of filter settings.

I wanted something more generic that would work for both Firefox and Safari, so I opted to create a style sheet instead.  The content of my style sheet is similar to others that I found online, but those didn't block all of the advertising content I saw, so I had to make a few changes.  Also, I use a Mac at home and at work.  I'm not sure how to modify the instructions to work on PC.  Finally, I have a copy of Google Chrome, but haven't tried to find a solution for it just yet.

Here's is what you do:

1.  Open a text editor of your choice.  Don't use a word processor.  I like to use TextWrangler.  Macs come with a free copy of TextEdit that you can also use with an extra step (#3 below).

2.  Enter the following text in your text editor.

#ssponsor, .footer_ad, .banner_ad, .social_ad, .ad_capsule, .sidebar_ads, .adcolumn, .admarket_ad, .sidebar_item.sponsor, .emu_sponsor, .home_sponsor, .UIHomeBox_Sponsored, .ego_unit, .ego_spo { display: none !important; }

3.  If you are using TextEdit, click on the Format menu and choose Make Plain Text.

4.  Save the file as "userContent.css".  (If TextEdit prompts you, click the "Use .css" option.)

You've now created the style sheet you need.  The next steps help you place the file in the right location and begin using it in each browser.

Firefox requires that your new style sheet have a specific name (already done) and reside in a specific location.  In the steps that follow, "~" is the universal symbol for your home folder.  In the Mac OS X finder it is usually represented by a small house icon and has your user name next to it.  "*" is a wildcard character.  The folder you need inside of the Profiles folder will be a string of letters and numbers followed by ".default".  It's probably the only other folder in your Profiles directory.

5.  Make a copy of your file and place it in ~/Library/Application Support/Firefox/Profiles/*.default/chrome/.

6.  Restart Firefox if it is already open.

Safari makes this a little easier because you can store the file wherever you want and name it whatever you want.  (I tested this with Safari v 3.1.2.)

7.  Open Safari.

8.  Choose "Preferences..." from the Safari menu.

9.  Click the Advanced icon.

10.  Select "Other" from the Style sheet drop-down menu.

11.  Select the userContent.css file you created in Step #4 (if you want a separate file for Safari and Firefox) or the copy from Step #5 (if you want to share files between Safari and Firefox).

If your experience is anything like mine, you'll now be able to browse around Facebook without seeing any advertising.

Let me know in the comments how this works for you.