Ash Clarke

Software Engineer. User Interface Developer. Gamer. Nerd.

How to Hide Facebook Ads in Google Chrome with Stylish

| 9 Comments

After my post on hiding ads in Mozilla Firefox, I decided to do a follow up using Google Chrome. 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 16-09-2012 */
/* Hide ads on Home */
#rightCol #pagelet_ego_pane_w,
#pagelet_ads_when_no_friend_list_suggestion { display: none; }
/* Hide Right Column Footer on Home */
#rightCol #pagelet_rhc_footer { display: none; }
/* Hide ads on Timeline and Photo View */
.fbTimelineSideAds,
#rightCol #pagelet_side_ads,
#fbPhotoSnowliftAdsSide,
div[class*=snowliftAds],
.ego_section[data-adblock-hash],
._24q .ego_column:not(.egoOrganicColumn) { display: none; }
/* Hide ads on Friend's Profiles */
#rightCol #pagelet_ego_pane .ego_column:not(.egoOrganicColumn),
[data-referrer*=pagelet_side_ads] { 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 #pagelet_ego_pane .ego_column:not(.egoOrganicColumn),
#MessagingNetegoSidebar .ego_column:not(.egoOrganicColumn) { display: none; }
/* Hide ads on Lists */
#pagelet_ads_when_no_friend_list_suggestions .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 [16/09/12]: Updated css to hide an extra case of ads showing on photo viewer.

Author: Ash Clarke

I am a user interface developer based in central Reading.

9 Comments

  1. My facebook page shows the stylish icon but no number and there are still ads. Tried twice. No go.

    • Hi Diane, The number only shows up to show that the styles you have added are being applied. Have you double-checked the places where you type in the styles and the domain and things? – The screens on your computer should match up exactly to the ones in this post.

      I use this on a daily basis so when it stops working, I update the styles with new ones to make sure they are hidden again.

    • Hi Diane, did you follow all the steps exactly? It will only work if every thing is followed in this guide.

      I would double check that the "Applies to" area, on the Add/Edit style page, definitely says facebook.com in the text box and "URLs on the domain" in the dropdown box.

  2. awesome thank you very much!!

  3. Confirmed! It works great! For those having issues, you must put 'URLs on the domain' and not simply 'URL'… :-)

  4. muito bom mesmo

  5. An important uncle probably are not somebody, although somebody are invariably a good uncle.

  6. That’s great! Glad it has helped you!

Leave a Reply

Required fields are marked *.