A Clean, Usable Facebook

Updated Dec 10, 2013 – Facebook completely re-vamped their design about six months ago and the new look and feel is actually manageable for me without the hacks listed below. I still know people using them, but I have not maintained these settings for the new Facebook.

Updated Aug 19, 2012 – Re-enabled header, removed groups photos specifically
Updated Aug 16, 2012 – removed “Pages and Ads” section
Updated Aug 8, 2012 – liberate tuteme ex inferis – added javascript

I am not a fan of Facebook’s user experience. Although I deactivated my account for a couple months and felt a state of blissful peace, I was eventually drawn back to it for social reasons. However navigating the super-busy UI felt like that scene from Event Horizon where the guy rips his own eyes out in the horror of his surroundings.

Things need not be so bad. I essentially need only the Close Friends list and a few groups. While in those views, I just want the content, not all the extraneous crap. Although it is true that most of that extraneous crap are Facebook’s efforts at monetization (see what your friends are buying, app stores, actual honest ads), I do not think of this as an ad-busting project. I just want a usable interface.

Fortunately, there is some pretty simple CSS that will clean things right up. First, click the button in the lower-right corner of Facebook called “Hide Sidebar” (thanks Facebook for including that control). Then you can overlay the following style rules on top of Facebook’s and you are left with nothing but the core content experience.

/* 
 * Column with ads, occasionally also has
 * useful controls but nothing I need 
 */
#rightCol { visibility: hidden; }
/* 
 * Removes friends faces in the groups views.
 * Unnecessary waste of pixels. Sorry guys. 
 */
.groupsCoverPhoto { display: none; }
/*
 * My face and name on the left. Isn't this also on
 * the upper-right? Why is it on the page twice? 
 */
#pagelet_welcome_box { display: none; }
/* 
 * Definitely don't need apps 
 */
#appsNav { display: none; }
/*
 * Not making Pages or Ads
 */
#pagesNav { display: none; }
/* 
 * No idea what this junk is for 
 */
#interestsNav { display: none; }
#pagelet_pinned_nav { display: none; }
#pagelet_friends_online { display: none; }
/* 
 * For the extra-spiteful, get rid of the Facebook logo.
 * You can still get to the Activity Feed from the "home" 
 * link on the upper-right 
 */
#pageLogo { visibility: hidden; }

 

To make this CSS stick, I am using Personalized Web, an extension for Chrome. After you have installed it, go to Window->Extensions, choose Options under Personalized Web. Add a New Rule. Name it “Facebook” and for “Match URLs” use:

^https{0,1}://.*\.facebook\.com/.*

 
Copy and paste the CSS, above, in the “CSS” section, click Save, and reload Facebook. Voila! As your eyes start to recover from the pain that once was inflicted by that over-busy interface, a beautiful simplicity emerges in which meaningful content is front-and-center and the side navigation is restrained and meaningful.

Update: One thing that helps tremendously is to clean up the sidebar navigation of all the groups that include groups you are a member of as well as your past companies and other oddball generated groupings. These are the list entries under Friends and Groups. I had previously cleaned this up with CSS, but Facebook keeps changing the IDs causing new groups to pop up despite my efforts to hide them. I do not know how they decide what to show in these lists but it is pretty weird. In any case, I have added some Javascript to the Personalized Web that accomplishes a couple of functions. Paste this code into the “Javascript” section of Personalized Web and click Save.

// Put the names of your lists you want to keep here.
// Use a comma to add more names
var OK_Friends = ['Close Friends', 'Family']
var OK_Groups = ['Poker Night', 'Pickup Soccer', 'Gaming Enthusiasts']

//---------------DO NOT EDIT BENEATH THIS LINE ---------------//

var lists = {'listsNav': OK_Friends, 'groupsNav': OK_Groups}
var ok_el, el, els

for (list_id in lists) if (lists.hasOwnProperty(list_id)) {
    el = document.getElementById(list_id)
    if (el) {
        els = el.getElementsByClassName('sideNavItem')
        for (j=0;j

 
Edit the first two arrays to contain the names of groups you want to see, and the rest will be filtered. This works OK, but the script runs after the page loads so you still have to see the groups in the list for a second. If the rules for hiding groups were specified in the CSS, the groups would never appear at all. To make it easier to permanently hide these list items, this script will output the CSS necessary to hide the list item on page load to the javascript console. In Chrome go to View->Developer->Javascript Console and reload Facebook. You should see a list of text that looks similar to what is already in the CSS section of Personalized Web. You can copy that directly from the Javascript Console and paste it into the CSS section of Personalized Web, and never see those unwanted groups again. To make it a bit nicer, if you have already hidden most of the groups with CSS and a new group magically shows up (you will see what I mean), the script will only output the CSS for the newly-appeared group.

Quick warning: I have not thoroughly tested this on Facebook, I imagine there are all kinds of things this could potentially break. Fortunately, it is very easy to disable and re-enable Personalized Web, so if you need more advanced features from Facebook you can just temporarily turn off the clean look.

Hopes this helps someone else out there!

1 thought on “A Clean, Usable Facebook

  1. Works like a charm.

    One additional thing you can do with this is add:

    #adsNav { display: none; }

    to make the Ads nav disappear.

    Thanks for the writeup and the code! Facebook is useful once more.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.