I have a love/hate relationship with Google Chrome. It’s fast now and again, but I still love to hate it. In addition, while I was writing this, Chrome managed to bluescreen my PC (my first bluescreen in about 3 years).The Chrome version of this add-on isn’t exactly the most user-friendly either.

To start on the road to ad-free Facebook on Chrome, visit the web store and search for stylish. It’s the first result, so click the “Add to Chrome” button to install.

Once installed, make your way to Facebook and click the new S icon in the Chrome toolbar. Select the “Manage Installed Styles” link.

You will be greeted by  an ugly screen that allows you to add new styles. Click the “Write new style” button to start the fun.

In the “Add New Style” screen, fill in the name field with “Facebook” or anything you like.

Fill in the “Code” field with the following:

/* Updated 12-02-2012 */

/* Hide ads on Home */
#rightCol #pagelet_ego_pane_w { display: none; }

/* Hide Right Column Footer on Home */
#rightCol #pagelet_rhc_footer { display: none; }

/* Hide ads on Timeline and Photo View */
#rightCol #pagelet_side_ads.fbTimelineSideAds,
#rightCol #pagelet_side_ads,
#fbPhotoSnowliftAdsSide { display: none; }

/* Hide ads on Comment View */
.UIStandardFrame_SidebarAds #pagelet_ego_pane .ego_column:not(.egoOrganicColumn) { display: none; }

/* Hide "People you may know" on Comment View */
.UIStandardFrame_SidebarAds #pagelet_ego_pane .egoOrganicColumn { display: none; }

/* Hide ads and sponsored stories on Message View */
#MessagingNetegoSidebar .ego_column:not(.egoOrganicColumn) { display: none; }
/* Hide ads on pages */
#rightCol #pagelet_ego_pane .ego_column:not(.egoOrganicColumn) { display: none; }

Your window will look like this (You can use the resizer at the bottom-right of the field to increase the viewable area of the text field).

Before clicking save, click the “Specify” button in the “Applies to” section. Select the “URLs on the Domain” option and fill in “facebook.com” (no quotes) in the field next to it. You do not have to click “Add” at this point as that adds a new rule.

Go ahead and click “Save” on the left of the screen and, after it has saved, click “Back to manage”.

You should now see your newly created style on the right.

When you visit Facebook, the ads should now be gone and a little [1] will appear on the S icon in the Chrome toolbar to show how many styles apply to the currently viewed site.

Hope this is helpful for all the Chrome users out there. If you don’t want the style to apply anymore, just click the “Disable” or “Delete” button in the “Manage installed styles” screen.

UPDATE [02/12]: Updated css to hide ads on “pages”. Thanks “J Greener”!

If this sounds like you, I will now let you in to a secret way of hiding them that no company ever wants you to find out…

Not really, it’s just CSS styles. First step is to download the Stylish add-on for Mozilla Firefox.

After you have installed the add-on and restarted Firefox, visit Facebook.com.

In the bottom right corner of Firefox, there will be an S icon.

Clicking this will open up a menu, where you can choose to “Write a New Style”. Click the “For facebook.com” option.

This will bring up a new window where you can enter your new styles to override the Facebook developers’ defaults. I have added a screenshot to show where the new styles go.

Now you can replace the text in the window with the following rules:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("facebook.com") {

/* Updated 12-02-2012 */

/* Hide ads on Home */
#rightCol #pagelet_ego_pane_w { display: none; }

/* Hide Right Column Footer on Home */
#rightCol #pagelet_rhc_footer { display: none; }

/* Hide ads on Timeline and Photo View */
#rightCol #pagelet_side_ads.fbTimelineSideAds,
#rightCol #pagelet_side_ads,
#fbPhotoSnowliftAdsSide { display: none; }

/* Hide ads on Comment View */
.UIStandardFrame_SidebarAds #pagelet_ego_pane .ego_column:not(.egoOrganicColumn) { display: none; }

/* Hide "People you may know" on Comment View */
.UIStandardFrame_SidebarAds #pagelet_ego_pane .egoOrganicColumn { display: none; }

/* Hide ads and sponsored stories on Message View */
#MessagingNetegoSidebar .ego_column:not(.egoOrganicColumn) { display: none; }

/* Hide ads on pages */
#rightCol #pagelet_ego_pane .ego_column:not(.egoOrganicColumn) { display: none; }
}

Click the “Preview” button and you should see the ads disappear in the background. Click “Save” and the window will close. The styles will now be loaded when you visit any part of Facebook.

Let me know if this doesn’t work, or stops working. The styles above are heavily dependent on how Facebook developers have named the Ad elements on the site.

If they, therefore, realise another lovely update the ads might suddenly reappear and I will have to spend another 30 seconds writing a new style and 10 seconds updating this post : )

If you feel you can’t trust this, or it looks like something messed up, you can find the “Uninstall” (to remove it) or “Disable” option by right-clicking on the style when visiting Facebook.

UPDATE: Added styles to hide new ads on the new timeline profile.

UPDATE [02/11]: Updated with new css to reflect recent code changes by FB devs.  Thanks, “R Preston Berrett”.

UPDATE [02/12]: Updated with new css to reflect changes to the FB site. Added better comments to explain what each bit is doing.

UPDATE [02/12]: Updated with new css to hide ads on “pages”. Thanks “J Greener”.

Turns out there is a ridiculously simple fix for this. Just apply relative positioning to the parent div and suddenly, everything falls back into place.

I can’t be thankful enough for how easy this fix is.