Customize your Facebook Experience

Hirako2000
Aug 23, 2018 · 4 min read

Facebook, I don’t use that very often.

But when I do, I get pretty frustrated with what I see loaded on the page.

Official Facebook home page

Vanilla Facebook home page

First of all, maybe I’m biased but the UI looks terribly out of date.

It might just be a question of taste, but really, the best front end engineers in the world can’t build something a bit more appealing?

Let’s fix all of this, the major problem is what I don’t want to see:

Clutter
  • Poorly targeted Ads
  • Random Suggested pages
  • Prompt to play stupid games

Worth noting.. The ad we see here, that I already use Paypal, I would never click on this link to use the product more often. Beauty product? I’m male, never purchased any beauty product online, maybe it shows this as some of my friends are fans… and… I never ever played Facebook games.

So, sorry Facebook, but I want to get rid of all of that. How?

Enter uBlock Origin

uBlock Origin is a free and open-source, cross-platform browser extension for content-filtering, including ad-blocking. The extension is available most browsers.

Setup

Download uBlock Origin .

The default built-in filters will get rid of nearly all ads on all websites. It also comes with useful filters by default to prevent access to sites known as threats and hosting malware.

Result

1 annoyance down, 3 to go

Pick & Remove other clutter

We can continue to use uBlock Origin to remove the rest.

Right click on the element you want to see gone.

And click Block element

Then make sure to highlight the area you want to see disappear then click on the red area

It will show another window click on the Create button.

I do the same for those annoying games at the top, and boosting call to action widget.

Result

Clutter free

Why not ABP?

Because uBlock origin is lightweight in comparison, I like to keep my computer’s resource free when possible. See some stats:

Ad Block Plus vs uBlock Origin resource consumption

Why not uBlock?

Because some guy called Chris pretty much hijacked it from the original uBlock author, and what Chris does with the project is more business and advertisement oriented than development driven. See more on this, if you are curious.

Better look & feel

Now let’s tackle the ugly look and feel. That’s even simpler. We will use another browser extension to override the styles applied to site, using CSS overrides.

Enter Stylus

Install Stylus .

This tool automatically overrides any style we want. And the brilliant thing is that there is a community that creates and maintain plenty of styles for popular websites, so no need to create our own CSS and have to maintain them.

You can find Facebook skins, in this .

Skinning

I installed the .

End Result

Sleek

Play around with other sites, and see how you can get the perfect look & feel !

Hirako2000

Written by

Pseudonym — Code & UX — Edinburgh, Penang, Ho Chi Minh, Monaco, & probably elsewhere. Fiddling on http://github.com/hirako2000

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade