Introduction
Webhooks are a way to get your application to produce a certain behaviour depending on the occurrence of a specific event. Webhooks contain the data or the payload that you would need to identify the event to trigger the corresponding behaviour.
For example, imagine you created a bot that monitors the price of a certain product on an ecommerce website. Once the price hits a certain value on the website, the bot will notify you that such an event has occurred. Now, it may be so that the price takes a lot of time, maybe even days, to reach that value that the bot is set to look for and until that time, the bot is always in a running state monitoring the price. This will be an inefficient approach since the code would have to be running 24x7. If you're running it on a cloud server, it's going to be an expensive bot for not that substantial value that it provides.
But what if the website itself sent a notification to your bot? That would mean that the bot just has to live on a server and doesn't need to be active. It has to be active only when the notification is received from the website. The event will be sent as a POST request to the URL where your bot exists and then the bot does its work. Cool, right? And handy!
This will also give your bot a real time behaviour.
Working with Facebook Apps
Facebook allows developers to create apps that interact with Facebook for various purposes. To do this, Facebook created the Graph API which helps in facilitating actions on Facebook for your app. The Graph API Explorer is an excellent tool that helps you run APIs on the browser. It also helps you to get the correct URLs and structure your requests.
Here's a quick list of things you need:
- A Facebook app.
- A program that can accept HTTP requests. I'll be using Node.js here with the Express.js framework to handle the requests.
- Ngrok to expose your localhost on the internet.
This tutorial assumes that you know how to set up basic Facebook apps.
So, let's get cracking.
1. Create a server.
Here's the Node.js code that creates a server and listens on port 5000
.
const app = require('express')()
// express middleware
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
const PORT = 5000
// start server
app.listen(PORT, () => console.log(`Listening on port ${PORT}`))
Run this code and the server will be up listening to any
incoming requests.
2. Start Ngrok on the same port 5000
.
To do this, run the command ngrok http 5000
. On running the command, the following view will appear on the terminal:
Here, you can see which URLs are being forwarded and the requests that have been received on those URLs. You want to use the HTTPS URL for this purpose since it's a requirement set by the Graph API. For this example, it is https://7ac66c7f726f.ngrok.io
3. Setup the Webhook product.
On your app dashboard, scroll down to Add Products to Your App. Look for Webhooks and click on Set up
.
At the pane on the left hand side, click on Webhooks
. You should see something like this
4. Handle webhook endpoint.
Before we add a callback URL, we need to add some more code. This step handles the requests coming to the webhook endpoint. While registering a webhook, Facebook will send a request to the URL that you provide along with the endpoint and it will expect a response from the endpoint, which is the challenge
code. This has to be echoed back to Facebook only then will the URL be registered.
app.get('/webhook', (req, res) => {
const VERIFY_TOKEN = "random string"
// Parse the query params
const mode = req.query['hub.mode'];
const token = req.query['hub.verify_token'];
const challenge = req.query['hub.challenge'];
// Checks if a token and mode is in the query string of the request
if (mode && token) {
// Checks the mode and token sent is correct
if (mode === 'subscribe' && token === VERIFY_TOKEN) {
// Responds with the challenge token from the request
console.log('WEBHOOK_VERIFIED');
res.status(200).send(challenge);
} else {
// Responds with '403 Forbidden' if verify tokens do not match
res.sendStatus(403);
}
}
})
The final code is as follows
5. Subscribe to an object
Click the drop down menu and select any object you want. I'll select the User
object here and then click on Subscribe to this object
which will open this modal
Enter the https URL from Ngrok along with an endpoint. The endpoint can be anything and it should be able to receive HTTP POST requests. The string in the Verify Token
field can be anything. It is just a security measure put in place to see that the request is coming from the right source to the right destination. You may or may not choose to put a check in the code. Then click on Verify and Save
. This will then take you to a page where you can choose the subscriptions you need.
The GET request is only for registering the callback URL to an object. To handle actual events, make sure to write a POST route to the same endpoint (in this example, webhook
). This route will handle the behaviour of the bot/app.
Most of these subscriptions are available after verification, but if you click on the Test
button, you'll be able to see a sample request sent to your endpoint.
Click on Send to My Server
and you'll see the request.
If you open Ngrok's web interface, you'll be able to see the details associated with each request on your browser.
I hope this tutorial helped you in setting your own webhook with your Facebook app. I certainly had some trouble getting it done myself and so, I though of writing up this blog to help anyone else save time.
Thank you for your time. Until next time, ciao.
You can reach out to me on
- Email: kevinam99.work@gmail.com
- GitHub: @kevinam99
- Twitter: @neverloquacious
- LinkedIn: Kevin A Mathew
Top comments (6)
Thanks for documenting this in detail, Kevin. Bookmarking this for whenever I need to work with Facebook apps.
Looking forward to more of your posts here!
Thanks so much for going through it, Shawn.
Amazing explanation Kev, very well written
Thanks so much for going through it, Julius. I appreciate the feedback.
An amazing and a very helpful article especially for the beginners.
Hi, @shri121 . Thank you for going through the post and sharing your thoughts. I'm glad it helped you.