Home Classroom C# .NET Streaming Events from a public Facebook Page for an ASP.net MVC Application

Streaming Events from a public Facebook Page for an ASP.net MVC Application

4607

After a long break from my first post, I would like to explain in this post how to get public events from a public Facebook page into an ASP.net MVC application without having to login to Facebook. I hope having a basic understanding about Asp.Net MVC will help you to understand this article quite well.

First let’s create an ASP.net MVC application in Visual Studio (I am using 2012 version in this post), go to File=> new=>project and you will be able to see the list of project Templates available, I will use “Asp.net MVC 3 Web Application” template under “web” category (Figure 1). Give a Name and the location for your application and click ok.

NewProject

 Figure 1

Then you will be prompted to select one of the sub templates available under Asp.net MVC3

subTemplate

Figure 2

Select “Internet Application” template and set the “view engine” as “Razor” (Figure 2) and click ok. After a while you will get a fresh MVC application.

FreshMVC

 Figure 3

Now hit F5 to start debugging on the newly created application

welcometoASP

 Figure 4

If you can see the screen on Figure 4 we are good to proceed further  :)

In order to get the Events from a Facebook page, you must possess a Facebook Application, since the app token of that application will be used to authorize your request. Go to https://developers.facebook.com/  and go to the “Apps” section(Figure 5)

Apps

Figure 5

From there click “Create New App” and create a new Facebook Application (Figure 6).

CreateNewApp

Figure 6

And make sure its “Sandbox Mode” is disabled under “Basic Info” heading.

sandbox

Figure 7

Then we need to get the “App token” of our newly created application, go to tools section from the menu bar and from the set of tools in the right side of the page select “Access Token tool” (Figure 8)

AccessTokenTool

Figure 8

From there you can get the “App Token” for the newly created application (Figure 9)

AppToken

Figure 9

Next, in order to refer to our public Facebook page we need its Facebook Id. The Facebook Id of the page can be taken easily by providing the url of the page to this website (Figure 10)

http://findmyfacebookid.com/

FacebookIdFinderFigure 10

Now we have all the components require to make the request for the events. Use the following format to make the request

https://graph.facebook.com/{0}/events?access_token={1}&limit={2}&after=1&fields=owner,name,description,cover,id

Replace the content as follows

{0}= Id of your Facebook Page

{1}= App Token of your application

{2}= Maximum number of events to be received

Under “fields” parameter you can specify the required details about the event, using the phrases in the Facebook Graph API

https://developers.facebook.com/docs/graph-api/reference/event/

ex:

https://graph.facebook.com/566125203483000/events?access_token=1459623080931717|QlAXMsfKQ0YO9i3iZwFsyb5cGbQ&limit=2&after=1&fields=owner,name,description,cover,id

If we call this url inside a browser we will receive a JSON result like this ( Figure 11).

JSONResult

Figure 11

Now we have received the Data we need, as the next step let’s see how this data can be formatted and displayed inside our MVC application.

First we have to prepare our model, a JSON string like this can be easily converted into a collection of C# object using “Newtonsoft.Json” Library. In order to install this package right click on the “FacebookEventApplication” solution in “Solution Explorer” and go to “Manage Nuget Packages”. In the package manager window select the “online” category and search for “Newtonsoft” in the search box. Then select the result “Json.Net” and click “install”.

Nuget

Figure 12

After installing Newtonsoft JSON, let’s write our model class. Write click on the project go to add=> class. Select “C# class” template and give a name for your model class (Figure 13)

New class

Figure 13

First add a using statement for Newtonsoft,

using Newtonsoft.Json;

Then create properties which correspond to the fields in the JSON result we got, markup each property with the respective name in the JSON string (Figure 14). A Dictionary property has been used for “CoverInformation” since the “cover” field in the JSON result has some sub fields.

Newmodel

Figure 14

Now we are ready to make the call for the Json result inside the Index method of our Home Controller.

newhome

Figure 15

First we should create a WebClient object(line 18).  The WebClient class is used to send or receive data from a URI. Then the url which we used in Figure 11 to get JSON data is defined as downloadUrl. Then we need to create a URI object, URI class is used to represent a URI. And the URIKIND is defined as absolute since we are giving an absolute address. After creating the URI we can start downloading the events details by calling the DownloadString method in the myWebClient object while passing the URI as an argument. If we observe the JSON result we receive in Figure 11, we can see that the JSON object we receive has several properties and the property which we need is the Array called “data”. So in order to separate that array easily, first let’s create a JObject from the “downloadedJsonResult” which is a string. Then in line 30 we have selected the “data” property of that object and assigned it to a JArray. Both JObject and JArray are classes provided by NewtonSoft JSON library. The next step would be deserializing this JSON array into a list of “FacebookEvent” objects. It is done in line 32. After getting the “listOfFacebookEvents” list we pass this list into our view.

Next we have to define a view to display this data. Since we are using the Index Action Method in the HomeController which was already in the default template, a view corresponding to this action method is already available.  Right click on the “Index” word in the Index action (Figure 16)  and Select Go To View

gotoview

Figure 16

Add the following Code to the view Body

ViewContent

Figure 17

Here using a foreach loop we iterate through the list of FacebookEvents which we passed into the view at the controller. We use Html.Display to generate a label to display the name of the each event. And after that we have to use an anchor tag which allows the users to browse to that particular event on Facebook. The “href” property of the anchor tag has been assigned with the url of the particular Facebook event. Finally we have added an image tag to display the cover photo of the event. The CoverInformation property we defined in our FacbookEvent class is a dictionary, we need to take the “source” element of that dictionary by passing “source” into square brackets.

Then we can press F5 and see the functionality of our MVC application

eventDisplay

Figure 18

We can click on the “Go To Event” link of a particular event and navigate into that event on Facebook.

SampleEventTwo

Figure 19

I hope you have understood my explanation on getting Facebook Events details into an ASP.net MVC application without logging to Facebook, and I hope it will be useful for you all. Please express your views, questions on this post since they help me a lot to make my future posts much beneficial for you all !. See you again soon with another article.

Happy Coding!

Comments

comments

Interested in anything related to IT, Microsoft Lover. Undergraduate at Faculty of IT, University of Moratuwa.

NO COMMENTS

Leave a Reply