Blocking Facebook News Feed Ads with Greasemonkey

I hate ads, so I block them. If I want something, I'll search it out. I don't need marketers wasting my time trying to convince me that I need something I don't. Most of the time I have ads blocked by aliasing most known ad servers to 127.0.01 in /etc/hosts/. This only works when the ads are coming through a server that is listed in the file (say, ad.doubleclick.net) and not when the ads embedded in the page are served from the same server from which the original page was requested.

This is exactly the problem with the ads from Facebook, which just deployed a new ads system that has ads targeted on what you've listed in your profile. For example, if you listed Jane Austen novels as some of your favorite books, you might see text ads in the sidebar or in your news feed advertising "Jane Austen: The Ultimate Sappy Romance Collection" ... or something. So how to block these ads?

Greasemonkey is a Firefox (and IE, although I wouldn't know much about that :-) ) extension to inject arbitrary Javascript into web pages, meaning that you can manipulate a page, or parts of a page, automatically as you see fit. Its behavior is defined by scripts, many of which can be found at userscripts.org. If you're familiar with web design, you can write your own scripts quite easily. Mozdev has a good quickstart guide, and Mark Pilgrim has an online guide and a book if you want to research this further.

There are a few ways to do block Facebook's new ads. The first is using document.getElementsByTagName('div') to fetch all the divs in the page and then loop through them, testing them for known ad-serving attributes (for example, a className like 'social_ad_advert' (sidebar) or 'feed_item clearfix social_ad' (news feed) or an id of 'ssponsor', 'sponsor', or 'announce' (all banner ads)) [1] and then either hiding them with element.style.display = 'none' or removing the element entirely using element.parentNode.removeChild(element). A second is using XPath, which makes for much more compact code. [2] userscripts.org is awash in (mostly mediocre [3]) scripts to block Facebook ads, but the most comprehensive one I found was "Remove All Facebook Ads" which I'm using in my browser right now. The only suggestion I have for this script would be to use the window.addEventListener to trigger execution of the code rather than embedding it in an anonymous function, as explained in the quickstart guide (under "Tips").

Greasemonkey scripts are executed after the DOM is loaded, which means that all the ads will be fetched from their sources and displayed on the page before they can be stomped out, unfortunately. Therefore, to make the page load faster by not fetching and displaying ads in the first place, it would be wise to use an /etc/hosts blocking scheme instead of a Greasemonkey solution where possible. Greasemonkey should be used only as a last resort in combination with /etc/hosts where /etc/hosts can't block ads that aren't fetched from a server different than the one used for the requested page, as in the case of Facebook news feed ads.

[1] It would probably be faster to not test for the id matches and just using getElementById for those few cases outside of the loop instead (within try-catch blocks if the elements aren't guaranteed to be on to page and could potentially throw an error).
[2] I'm not sure about the efficiency implications of using one vs the other. Anyone care to comment?
[3] For instance, "Hide Facebook Ads" tries to do some browser detection... I'm not sure how large the market for IE4 Greasemonkey users is...

UPDATE:

Now using New Facebook Layout Ad Killer for the new Facebook layout

Argh, it seems Facebook has added another lame ad sidebar. Just extend the NFLAK script by looking for a document ID called 'fadbar' and hide it if it's there.

Firefox: Extensions and more

Here are some sweet Firefox extensions that I use (if this list isn't enough for you, there's more of them on the Extensions Download Page ):

• Colorful Tabs An easy way to distinguish between tabs when you have a million open
• Customize Google a MUST HAVE for frequent users of all Google services... ad blocking, encryption, etc.
• del.icio.us Social bookmarking site button in your browser! For those of us sick of managing bookmark files. (The classic (worse) version is here)
• FireBug If you develop web pages without this, you are either uninformed or massochistic
• YSlow Yahoo tells you why your site is slow (runs on top of FireBug)
  
• FireFTP: Why didn't someone think of this sooner? Great idea and execution of an FTP client within a browser.
• FireGPG Use GPG to encrypt, sign and decrypt email (or any web page text)
• Google Toolbar 3 Absolute bliss... allows you to add any arbitrary search box as a button in the toolbar and lots of other sweet features that I will not know how to part with
• Greasemonkey Inject arbitrary Javascript into a page; a great vault of these scripts is found at userscripts.org
• Nuke anything enhanced Ahh, the pure bliss of deleting something annoying off of a page. Unfortunately, it doesn't seem to want to work with Flash...
• Viamatic foXpose An OSX-style feature; puts all of your tabs into view at the same time when you hit a button in the chrome of your browser
• Video DownloadHelper this extension + YouTube = Napster
  

Other extensions of note:

• Forecastfox Have to put this one in; my buddy Jon wrote it: displays the local weather in your toolbar
• Fasterfox Increases your browser speed a minuscule amount and has more popup-blocking capabilities; a good review of it here
• Chickenfoot Greasemonkey++; saw this demoed... it's great, and only getting better; lots of applications throughout the interweb world
• Bugmenot Great for getting past login pages that you don't have a login or password for. This activity is illegal, also, perhaps?
• Adblock Does what it says. Allows contextual filtering of unwanted material from web pages
• Showcase The same idea as Viamatic foXpose, different implementation.
• SessionSaver Saves your tabs, text input, etc. from when firefox last closed and reinstates them in your next Firefox session
• Flashblock: 99% of the time, when a web site uses flash, you don't want to see it. This replaces the flash output with a little button that, if clicked, allows you to see the desired content
• WebDeveloper: Useful for those who need to debug web pages
• DownThemAll Great for pulling large quantities off of one page (for me, I use this mostly before I know I'm going to be stranded without internet access for a while)
• Chatzilla IRC client within the browser (FAQ)
• MeasureIt For measuring pixels, etc. on your browser screen... simple, but useful
• View Source Chart for visualizing HTML blocks in the code source
• Vimperator vim-like commands for Firefox
• BetterPrivacy prevents Flash cookies from being stored on your computer
  

Articles about Firefox extensions:

• A lot of these are taken from this Wired news article: The Firefox Hacks You Must Have
• Joel on Software (he likes Adblock, Web Developer Extension and IEtab)
• Computerworld

Other:

• For tweaking Firefox 2 to your personal satisfaction: Lifehacker's top Firefox config tweaks (mostly deals with about:config) and Computerworld's guide
  
• To search for something real fast, use the forwardslash key as in vi (or the single quote if you only want to search for links on a page). Ctrl+G moves you forward and Ctrl+Shift+G moves you backwards in searches.
• Here are instructions for installing firefox 2 on older Ububntu distros (pre-Edgy) that have 1.5 installed by default.
• For Google-Toolbar-like quickness built into Firefox, right click on your favorite search box and select "Add a keyword for this search"... you'll then be able to search, if you alias search to "g" for example, Google by typing "g <query>" in the URL box
• Set a master password for logging into sites: instructions here
• Get the source of a Firefox extension with these instructions