Configure Facebook Webhook [WebSub Protocol]

Facebook added a product called Webhooks to subscribe to the changes and receive updates in real-time without calling the API. This blog is about configuring the webhook product in Facebook and integrating it in the ASP.NET Application.

Webhooks basically work with the protocol named as WebSub, which contain three main components,

Publisher
Subscriber
Hub

In the case of Facebook Webhook, the user who wants to get notified for the newest post updated on the page is the subscriber. Publishing and hub part will handled by Facebook itself.

Configure the end-point in ASP.NET Web API

Create the ASP.NET application. Create get/ post-end-points for Facebook like below,

public class WebHookController : ApiController
{
public class WebhooksController : ApiController
{
#region Get Request
[HttpGet]
public HttpResponseMessage Get()
{
var response = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(System.Web.HttpContext.Current.Request.QueryString["hub.challenge"])
};
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/plain");
return response;
}
#endregion Get Request
#region Post Request
[HttpPost]
public HttpResponseMessage Post(Feed data)
{
try
{
//You got the data do whatever you want here!!!Happy programming!!
return new HttpResponseMessage(HttpStatusCode.OK);
}
catch (Exception ex)
{
return new HttpResponseMessage(HttpStatusCode.BadGateway);
}
}
#endregion
}
}

Here, [GET] end-point will be called once you subscribe to the Facebook Webhook with the hub.challenge token. You should echo back with the same for verification purpose. The post is the endpoint which you are exposing to get notified on the updates.

You can get the complete code in the Git.

Create WebHook

Now, we need to Configure Facebook.

Go to the Dashboard of your Facebook Application - https://developers.facebook.com/apps/

Select the Webhooks products.
New Subscription > Page .

Callback Url
API URL needs to give here. In our case its "api/webhooks". Note: You need to give http/https URLs. "localhost" is not allowed in the app. You can use ngrok for exposing your port public.

Verify Token
Once you verify this you will get hit in the get endpoint we configured with hub.challenge in the query. We are returning back to the same challenge at the endpoint.

Once Subscription is created, select names you're interested in and subscribe.

You can test the sample notification by clicking the "Test" button. On the test, you will be able to see the model of the request that we have created in the application model named as "Feed" in the post request.

Enable Page subscribe to your app

Open the Graph API Explorer - https://developers.facebook.com/tools/explorer/

On the top right Combo Box, select your Application

Just below, in the Token ComboBox, select your Page.

Select the verb POST for the request

Enter the path
{your-page-id}/subscribed_apps

Submit
You should get success.

We are done with it! Now try adding a new post to the page and check to get notified.

Reference

https://developers.facebook.com/docs/graph-api/webhooks/
https://www.w3.org/TR/websub/

2 Comments

Join the conversation! Your thoughts help the community grow.

Nihat Fide3y ago
Hi, It does not request to the endpoint with The api v13. Is there ant solution did you encounter like that problem?
Nihat Fide3y ago
Hi, It does not request to the endpoint with The api v13. Is there ant solution did you encounter like that problem?