How to stop Facebook from stealing your attention

There are times when you check Facebook to just fill a free minute or post something and then you find you’ve been pulled into the vortex of links worth clicking. You can unfollow everyone and everything until your timeline slows down, but then they give you trending topics, suggested pages, ads etc. Well, today you can switch your Facebook from looking like this:


To this:FacebookHackedDesign

You can still see that there’s more than your timeline if you look for it, but it’s not in your face and it will still become opaque when you hover your mouse cursor.

How do I get there?

  1. Install Tampermonkey plugin into your browser. I tested in Chrome, but there’s a version for some other browsers and the original Greasemonkey might work if you’re on Firefox. It seems like the Internet Explorer flavor is called Trixie.
  2. Add the following script to your monkey, go to Facebook and you’re done!
// ==UserScript==
// @name         Hide FB distractionpane
// @namespace
// @version      0.1
// @description  Hide distraction panel on Facebook
// @author       Filip Skakun
// @match        **
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
  var timeout;

  var styleElement = document.createElement('style');
  var declarations = document.createTextNode(
`#leftCol, #rightCol, #pagelet_ticker, #pagelet_canvas_nav_content {
  opacity: 0.1;
  transition: opacity 0.5s;

#leftCol:hover, #rightCol:hover, #pagelet_ticker:hover, #pagelet_canvas_nav_content:hover {
  opacity: 1;
  -webkit-transition-timing-function: ease-out;
  transition: opacity 0.1s;
}` );

  styleElement.type = 'text/css';

  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = declarations.nodeValue;
  } else {

  var headElement = document.getElementsByTagName('head')[0];

The script adds a little bit of CSS to Facebook to hide the left and right panels that have ads, news and infrequently used parts, leaving only the timeline and Messenger contacts visible. These panels reappear once you move your mouse cursor over them, which still keeps them readily available, but stops your gaze from wandering around the screen, so you can quickly scan the timeline and get back to what you were doing before.

Tagged , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: