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
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:
- 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.
Download uBlock Origin here.
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.
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.
Why not ABP?
Because uBlock origin is lightweight in comparison, I like to keep my computer’s resource free when possible. See some stats:
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 blog post, 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.
Install Stylus here.
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 gallery.
I installed the Dusky Gray Facebook.
Play around with other sites, and see how you can get the perfect look & feel !