What's an easy way to remove the Facebook apps sidebar?

Question

When I go into a Facebook game, there is always this very annoying sidebar which is different from the chat sidebar and it cannot be closed by any options or button selections.

I really dislike it because it encroaches on the game play screen.

This is the sidebar I am referring to:

I would like to know if there is an easy way to keep the sidebar disabled every time I visit the webpage. I am able to do it manually via Firefox and the development tools, but it is a little annoying to do it every time I visit the page.

So, my question is, is there any easy way to permanently disable this sidebar?

In case anyone is curious, and for those who will land on this page from a Google search, I will include my current method of disabling the sidebar via Firefox as it is quick and easy and it does not require the installation of anything; see my answer below for this.

Solution 1

Add AdBlock Plus to Firefox. Add Element Hiding Helper to Firefox.

1. Open Facebook, navigate to a game.
2. Click the ABP icon at the top right. Click Select element to hide.
3. Select the 'sidebar' thing you want to remove (rightCol)
4. Click Add filter rule on the popup window.

This is basically what your current method is, but this is automatic and permanent!

Solution 2

2 Solutions

---

Grease Monkey for Firefox

Steps

1. Download - the GreaseMonkey addon for Firefox can be downloaded here.

2. Install - after installation a monkey icon will appear near the upper right hand corner of the Firefox browser.

3. Create new script - click on the monkey icon and click create new script.

4. Fill the first form out - pick a name and for namespace put "https://apps.facebook.com"; skip the rest. Afterwards a window will popup for putting a script in.

5. Copy and paste the following script:

// ==UserScript==
// @name        Remove Facebook App Sidebar
// @namespace   https://apps.facebook.com
// @description Removes the Facebook App Sidebar
// @version     1
// @grant       none
// @require     http://code.jquery.com/jquery-latest.js
// @include     https://apps.facebook.com/*
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true); 
$(document).ready(function()
{
    $('#rightCol') .css('display', 'none');
});

6. Save the script.

7. Try browsing to the Facebook app page.

---

Using Only Firefox (Temporary Solution)

This method uses the Firefox developer tools (the element inspector) to the CSS of the sidebar element.

Steps

1. While in Firefox, press Ctrl + Shift + C to bring up the document inspector and then position the mouse between the sidebar and the scroll bar that is for the game window. It is very touchy and you need to be precise. You know you have the right spot when you see the area highlighted and the div#rightCol popup.

   

2. Click on it and then below you should see the console bring up the relevant CSS info for the selected element. Click under '#rightCol' and add the line 'display: none;'.

   

3. Close the development console and you're finished.

Comments

[Klik]

Ok... how did you make the gif? You've got a great answer, but I couldn't help but notice how nice it is to present something with a gif. Care to share?

[ᔕᖺᘎᕊ]

@Klik Look at my question at Software Recommendations: softwarerecs.stackexchange.com/questions/7019/make-a-gif-vid‌​eo