Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Minimal Facebook Messenger for Fluid
/*
Minimal Facebook Messenger
==========================
1. Make a Fluid (http://fluidapp.com/) instance of https://facebook.com/messages/
1. a. (You need to buy the paid version of Fluid to modify UserStyles)
2. Apply the below CSS as a Userstyles stylesheet
3. Like magic, you can now message without all the cruft of Full Facebook
Why?
----
I find more and more of my work and personal correspondence happens on FB Messenger.
It's nice to have a simple desktop client.
Facebook.com itself is far too heavy and distracting.
But Messenger works in [insert chat client name]!
-------------------------------------------------
Yes but if you want: file attachments, stickers (!), group chats, history,
search, and more, you will need the proper web client.
*/
#rightCol { display: none !important; }
#contentCol { min-width: 730px !important; }
#pagelet_bluebar { display: none !important; }
#pagelet_dock { display: none !important; }
#pagelet_sidebar { display: none !important; }
#globalContainer { padding-right: 0 !important; }
.fbx #globalContainer { width: auto !important; }
.emoticonsPanel div._5r8f.panelFlyout { right: -10px !important; }
.emoticonsPanel div._5r8f .panelFlyoutArrow { left: 248px !important; } /* Thanks Lars */
@markhowellsmead

This comment has been minimized.

Copy link

markhowellsmead commented Sep 15, 2014

Very cool :) Or on Mac, add your Facebook account to the regular Messages app as a Jabber account.

@cmod

This comment has been minimized.

Copy link
Owner Author

cmod commented Sep 15, 2014

mhmli: Yep, but if you want file attachments, stickers, group chats, history, search, and more you will need the proper web client. (Updated gist to include this.)

@samiare

This comment has been minimized.

Copy link

samiare commented Sep 15, 2014

The default app icon was bothering me so I made a .icns file that matches the iOS icon. If you're interested check it out here https://gist.github.com/samiare/7473f2167f8a16bfe1ca

@cmod

This comment has been minimized.

Copy link
Owner Author

cmod commented Sep 15, 2014

@samiare: Oh, brilliant. These are perfect. Thanks.

@JADugas

This comment has been minimized.

Copy link

JADugas commented Sep 15, 2014

Oi mate, question, I'm new to Fluid how do I attach the CSS?

@cmod

This comment has been minimized.

Copy link
Owner Author

cmod commented Sep 15, 2014

Window > Userstyles

@JADugas

This comment has been minimized.

Copy link

JADugas commented Sep 16, 2014

Perfect, cheers cmod.

@DarioFerrando

This comment has been minimized.

Copy link

DarioFerrando commented Oct 2, 2014

I made a new userstyle pasting that CSS and it's not working. Is there any other obvious step that I have to do before (misterious checkbox or something)?

@kewpiedoll99

This comment has been minimized.

Copy link

kewpiedoll99 commented Oct 2, 2014

it looks like you have to have a Fluid license ($4.99) to get userstyles?

@jnaecker

This comment has been minimized.

Copy link

jnaecker commented Oct 4, 2014

@DarioFerrando: Check you pattern. I should be something like https://twitter.com/i/notifications or https://twitter.com/*.

@aersoares81

This comment has been minimized.

Copy link

aersoares81 commented Oct 7, 2014

This is awesome, thanks for that, and thanks @samiare for the icon!

@DarioFerrando: Under "patterns", check for the URL. I uploaded mine here, take a look: http://d.pr/i/1kZaP

@larswinter

This comment has been minimized.

Copy link

larswinter commented Oct 18, 2014

Thanks, a great idea! I just added this so the emoticons popup doesn't force you to expand the window:

.emoticonsPanel div._5r8f.panelFlyout { right: -10px !important; }
.emoticonsPanel div._5r8f .panelFlyoutArrow { left: 248px !important; }

@cmod

This comment has been minimized.

Copy link
Owner Author

cmod commented Nov 7, 2014

@larswinter — Beautiful. Thank you! Rolled into the gist.

@eduardogarzasantos

This comment has been minimized.

Copy link

eduardogarzasantos commented Nov 7, 2014

This is fantastic! Thank you for posting this. Quick question: is the column with the ads still supposed to show up?

@carlosedp

This comment has been minimized.

Copy link

carlosedp commented Apr 1, 2015

WIth the UserScript below the application badge is updated based on unread messages:

Add a pattern: *facebook.com/messages*

window.fluid.dockBadge = '';
setTimeout(updateDockBadge, 1000);
setTimeout(updateDockBadge, 3000);
setInterval(updateDockBadge, 5000);

function updateDockBadge() {
    var newBadge = '';

    var regex = /\s*\((\d+)\)\s*/;
    e = document.getElementsByClassName('pls _1r fwn');
    for(var i = 0; i < e.length; i++) {
        // Only if there is only single class
        if(e[i].className == 'pls _1r fwn') {
            //console.log("Value: " + e[i].textContent);
            var text = '' + e[i].textContent;
            if (text.length) {
                //console.log('text: ' + text);
                var res = text.match(regex);
                  //console.log('res: ' + res);
                  if (res && res.length > 1) {
                    newBadge = res[1];
                }
            }
        }
    }
    //console.log('newBadge: ' + newBadge);
    window.fluid.dockBadge = newBadge;
}
@Grapestain

This comment has been minimized.

Copy link

Grapestain commented Aug 9, 2016

I've added these rules to make the message panels fit to the winow:

#contentArea { width: 100% !important; }
.wmMasterView  { width: 30% !important; }
._2nb { width: 69% !important; }
._2nc { width: 100% !important; }
.uiScrollableAreaBody { width: 100% !important; }
._4z0 { width: 100% !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.