Making Social Media Work for Me

2024-01-07

Welcome to the New Year! As with most people, I'm caught up in the New Year's resolution zeitgeist. I've tried to come up with a solution to thwart my habit of checking social media as soon as I crack open my laptop (Command+T "facebook.com", Command+T "linkedin.com", Command+T "twitter.com" should be inscribed on my tombstone).

Tl;dr: My goal is to remove the infinite scroll feeds from social media sites I frequent while still being able to use messaging on the platforms.

This will be quick, but all the same let's start at the beginning. I don't want to block social media outright, but I'd like to make it work for me rather than the other way round. My requirements:

I need to be able to access these websites on my laptop when I'd like
I don't want to see an endless, infinite feed
I do want to be able to use these platforms for messaging

With those in mind, what I'm really looking for is a tool to edit these pages upon loading, but remove content I don't want to see. After diligently searching Google for roughly 5 seconds, I found just the thing: User Javascript and CSS. This is a Chrome browser extension thatn allows you (the user) add custom Javascript and CSS for specific websites. This particular extension is a featured Chrome extension, so of course I trust it.

Next up is actually configuring the rules within the extension to do my bidding. The following sections outline the CSS rules I've put in place for each site. If you give them a go, let me know!

Facebook

/* Remove Facebook Feed */

[role=feed] {

visibility: hidden;

}

Instagram

/* Remove Instagram Posts */

article {

visibility: hidden;

}

/* Remove Instagram Stories */

[role=presentation] {

visibility: hidden;

}

/* Remove LinkedIn Feed */

.scaffold-finite-scroll--infinite {

visibility: hidden;

}

/* Remove LinkedIn News Sidebar */

#feed-news-module {

visibility: hidden;

}

Twitter/X

/* Remove Twitter Feed */

article {

visibility: visible;

}