Popping open the hood: the road to a calmer Facebook experience

I want to write about how to get clear on the ways we are influenced by online corporations and the steps we can take to reclaim our humanity.

Facebook was the driving influence of me wanting to get into tech. I had signed up for the service in 2007 while in high school, and by sophomore year in college, I was using it all the time — we all were. Sunday night / Monday morning came around and the activity stream of party pictures from the weekend, you get tagged, you rank your experience against those around you. Conversations start with “So I saw that you liked Facebook.” Meeting new people ended “Add me as a friend on Facebook.”

It was all around me, the norm. I didn’t think much about it being an influence on my life because it was always there. Just an extension of me and my reality.  It’s like questioning your breath, food you eat, work you do. Until you start questioning.

For me, it usually starts with casual curiosity and merely naming the thing that’s so ubiquitously integrated in my life.

What is Facebook?

An easy enough question to answer, right?

It’s the place where friends connect online. Of course.

But how is it doing this? I couldn’t answer. And I realized that I couldn’t answer this (seemingly) simple question for an increasing amount of my time spent in the world, albeit digital world (is there a difference?).

So I start taking digital media, web development, database courses. Independent study and research group behaviors on Facebook and other social media sites.

I pop open the hood of these systems and look in. And they aren’t acting like I thought they would.

A place to connect with friends. That was at least my early experience with the service, what is advertised on their landing page (pre-logging in), and what their CEO said before the US Senate.

But it’s far away from this.

Beyond just feeling like this promise isn’t true, you can take a look at the UI and consciously evaluate what their designers (and of course, business people) are trying to do to you.

The app is riddled with more engagement hacks and more space (and thus potential clicks) for advertisers than the core service: connecting friends.

The next step is to start digging down into the actual components in their tech stack using Chrome’s web inspector.

To do this, right click anywhere in Facebook (or any webpage). In that menu, head over to Inspect. Here’s more info on the Chrome Inspector.

You’ll start seeing what Facebook internal calls the parts of their app.

I drew on some of my learnings from many years ago using Adblock to fight against LinkedIn’s Bloat UX.

To prototype a calmer version of Facebook, I like to first start with trimming the fat aka, taking out elements of the HTML. The quick and easy way to see what that feels like is to start deleting the elements right there in the inspector. For a more lasting solution (besides building your own, better version of Facebook – any takers btw?) you’ll want to add a Chrome Extension such as Stylish or Stylus.

What those extensions do is take the core CSS of the web service and override parts of it with your own custom stylesheet. It’s like wearing your own set of protective glasses when interacting with dangerous chemicals in a lab.

For most web services, that will get you most of the way there by intercepting the ids and classes of the html elements and putting your own CSS in the mix. If they are being really easy for you, they will call ads things like <div class=”an_advertisement”></div>.

Facebook is a bit harder, of course.

Back in the Spring of 2016, Facebook introduced sponsored content in the newsfeed which took the form of things like sponsored content, suggested post, and page stories you may like.

This was a two sided response to some changes that were happening. First, advertisers who were playing by the rules (or too traditional to know the difference) wanted to get more engagement out of their ads, running on the right hand side of the newsfeed. Nicely boxed in like most online advertising (harking back to the banner ad days of print and early web). The second was that pages and fake accounts were pretending to be real and promoting / posting, which was leaking into user’s newsfeeds with no warnings (pissing off both them and the FTC) that it wasn’t organic content (and not contributing to Facebook’s bottom line).

So Facebook designed a new way for publishers and brands to get their content into the user’s newsfeed (here’s their help article on it). It had to look and feel like real content. And not surprisingly, on the structural side, it acts like real content too.

Which makes it really hard to intercept with CSS. Actually, it’s not possible. Which brings us to using scripts.

There are Chrome Extensions such as Tampermonkey that allow you to write script (usually in Javascript) that allows your browser to interact with elements in the DOM in ways that CSS can’t.

Remember that little thing about the FTC saying that the ads have to be say that they are ads in some way? While Facebook hides the ad type on the backend (whether it’s best practice design or intentionally making it hard to run ad blocking), Javascript can read the HTML element text — such as “Sponsored” — and make modifications to the page — such as don’t show me an ad in the feed where I connect with my friends.

While this is a work in progress, here’s what I have so far between using Stylus and Tampermonkey.

I’m amazed at how I feel when using Facebook now.

I see my friends, family, and causes I care about.

I feel less anxious because I’m not getting bombarded with calls to action, FOMO, and colors that warn me that something is going to go wrong if I don’t click on it.

I’m starting to bring back my humanity to my experience of using the service.

Beyond some extreme issues with data privacy, I’m almost to the point of recommending Facebook.