Configure Facebook Webhook [WebSub Protocol]

his blog is about how to configure the webhook product in Facebook and integrate it in the ASP.NET Application.

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/