How to Build your MVP Using the Facebook Groups API & Deploy as a Browser Extension
The story of how and why I built the Facebook Writing Prompts Group to power the StoryOrigin Chrome Extension.
When Facebook announced it was shutting down Parse, it was the nail in the coffin for one of my side-projects (okay, there were many nails to be fair). Parse lives on though… at least in the form of Facebook Groups. If you’re not familiar with them, Facebook Groups allow you to build a community around a particular interest, similar to old-school forums. With a Facebook group, you can authenticate users, moderate posts, and keep a user database.
Why should you use a Facebook group as a backend?
TL;DR: user acquisition and easier to “deploy” if you’re just learning to program.
It’s not the ideal situation in the long-run, but unlike old-school forums, Facebook provides an easy on-ramp to user-acquisition. Facebook recommends groups of interest to people and all they have to do is hit the “join” button. Note: to get “recommended by Facebook” your group generally needs to have substantial size (600+ people) and be relatively active.
The other benefit for someone like me (i.e. someone who just quit their job 2 months ago to learn programming) is that the Facebook Groups API is easy to deal with and you can start learning some of the skills you need to build database-backed applications without the headache of figuring out how to deploy a backend, authenticate users, choose a cloud provider, etc.
Make a “serverless” app with a Browser Extension
After you’ve created your Facebook group, now you need an application context to provide it in. This is where browser extensions come in. In case you’re not familiar, browser extensions are essentially web pages that you can install in your browser, so they are served locally rather than over the Internet. Instead of paying a hosting provider to serve your files, you just upload them to an app store (e.g. the Chrome Web Store or Add-ons for Firefox), and users can download your extension. To deploy a new version to your users, just upload a new set of files to the app store and they will automatically update on the client-side.
From my experience, I think combining the Facebook Groups API and a Chrome Extension is the easiest and fastest way to launch your MVP. Now, I’d hope you’re thinking the below.
Okay, okay. Let’s get to the good stuff… the code!
I’m assuming you’re already familiar with how to build chrome extensions in general, so I won’t cover that here. If you’re not familiar I recommend checking out this tutorial series on YouTube. I also built my Chrome Extension using React, which would have been much more difficult if I hadn’t found this blog post by Anatoliy Yastreb. It uses Webpack with multiple entry and exit points to create your build folder which you can install as an extension. Not super familiar with Webpack? I recommend this tutorial series on YouTube. Okay, with that out of the way, let’s get to it!
Step 1
Chrome’s security policy doesn’t allow extensions to download scripts from 3rd parties. So to download the Facebook SDK and access the Graph API, we need to add the following to our manifest.json file.
Step 2
We download Facebook’s Javascript SDK as shown in Facebook’s docs, except we call “https://connect.facebook.net/en_US/sdk.js" rather than letting it simply pre-pend the chrome extension protocol, which is “chrome-extension://”. Fill in ‘<your-app-id>’ with the app ID you get from Facebook when you create a new Facebook app. If you’re using building the extension with React, you can add the below to your componentDidMount in your App.js file.
Step 3
Now we need to define a function which allows the user to “Login with Facebook” (i.e. authenticate our application and provide us with a user access token). The Chrome API provides a nifty function “chrome.identity.launchWebAuthFlow(),” which will automatically launch a popup window for us and handle receiving the redirect URL from Facebook.
If you’re familiar with OAuth, then you may be thinking, “How are we going to get a redirect URL from Facebook if our app uses the Chrome Extension protocol ‘chrome-extension://’?” Great question! When we provide our URI inside our AUTH_URL, which is sent to Facebook, we use the chrome.identity.getRedirectURL() method, which creates a URL in the form of “https://<chrome-id>.chromiumapp.org/.” For those not familiar with OAuth, auth providers like Facebook need a URL using the https protocol. (Note, the URI generated by chrome.identity.getRedirectURL() is also what you will include in your Facebook app’s “Login with Facebook” redirect URLs in your developer account.)
When we receive the redirectURL from Facebook containing the user access token and seconds to expiration or errors, they come as parameters in the redirectURL (i.e. the stuff after the ‘?’ you’ll occasionally see in URLs). We get the user access token and expiration from the URL parameters and resolve our promise with them. If the parameters come back with an error, we reject our promise.
When you call the authenticateWithFacebook function, you can handle the resolve by saving the token and expiration time to Chrome Storage with chrome.storage.sync.set() and retrieve it later with chrome.storage.sync.get().
Step 4
Last but not least, we need to define our function for calling the Facebook Groups API using the access token we retrieved. If you’re not familiar with the Facebook api, check out their graph API explorer.
Step 5: Pat yourself on the back
Boom! Now you’ve got an app that you can deploy with zero configuration and no bills. Oh, and it’s integrated with a user acquisition machine! And hey, it didn’t even take that much code!
Case Study
A month before I left my job to learn how to program, I started a Facebook Group called the Writing Prompts Group, where people can share writing prompts and short stories on those writing prompts. Writing prompts are a great way to get inspiration to write; however, getting on Facebook can be distracting and it’s difficult for writers (especially ones like myself) to get motivated to start writing. So, I created the StoryOrigin Chrome Extension, which helps you build a writing habit by blocking distracting websites until you hit your writing goal for the day.
After I built the extension, I tied in the Facebook Groups API, so if you’re not sure what to write about for the day it can pull prompts from the Writing Prompts Group. I like to think it’s the ultimate habit-building tool for writing: motivation + inspiration. Check out the demo video below :)
Are you a writer that wants some problems solved? Have follow-up questions? Just want to say “hi”? Send me an email at evan@storyorig.in.
