Embedding facebook feeds using asp.net mvc

This post helps you to integrate and display your Facebook page’s social feed in to your ASP.NET website. Though the below steps are in ASP.NET MVC, they can also be used in any other service side language like Java etc.

With the increase in social media, it became a norm for businesses to display their social presence on their official website. As part of this people look to integrate their Facebook page’s feeds into their website

Implementation

This implementation uses, service side scripting language to call Facebook’s Graph API and get the posts feed. It is not recommended to use javascript ajax to call the API, because to call the API, we need to pass the access token. The access token is specific for each user and is to be kept secret. So if you use javascript, then it would be visible to everyone

Inputs required: You just need to have a Facebook page and credentials to manage it

Output format: Upon Graph API call, the output we receive would be in JSON format. So we can traverse through the JSON object and populate the values in our web page as we like.

APIs we use: We use Graph API provided by Facebook to get the facebook feeds. It’s a free API.

Steps:

1. Getting Facebook page’s access token
2. Calling the Graph API

###1. Getting Facebook page’s access token ###

To get the access token, first you need to login to Facebook developers site and create an app. Then App ID, Secret ID and then Access Token. For the complete process you can go through my post here – Creating facebook App ID, App Secret and Access Token

###2. Calling the Graph API ###

After you create the Access token, go to the Facebook Developer site then Tools&Support ->Graph API Explorer. Here you can test the API with your created token.

Here, you could see the FQL Query field. Enter the below URL there and submit. You can check the output JSON here itself.

YOUR_FB_PAGE_NAME_HERE/posts?fields=picture,full_picture,link,created_time&access_token=YOUR_TOKEN_HERE&limit=3

Calling the Graph API from ASP.NET MVC

Once the above FQL Query is finalized, append it to the graph api URL and form the final URL as shown below.

https://graph.facebook.com/YOUR_FB_PAGE_NAME_HERE/posts?fields=picture,full_picture,link,created_time&access_token=YOUR_TOKEN_HERE&limit=3

Any GET request to the above URL will give you the required JSON output. So make a Http Web request and get the JSON. Below is the sample action method code to make a web request in ASP.NET MVC. If you are using any other language other than this, then you can use your own code to make a simple HTTP GET request to this URL.

public ActionResult GetMyFacebookPageFeeds()
{
 var NumberofFeeds = 3;
 string PageId = "YOUR_FACEBOOK_PAGE_NAME_HERE";
 string AccessToken = "PLACE_YOUR_ACCESS_TOKEN_HERE";
 FBPostsModel posts;
 string FeedRequestUrl = string.Concat("https://graph.facebook.com/" + PageId + "/posts?limit=", NumberofFeeds, "&access_token=", AccessToken);
 HttpWebRequest feedRequest = (HttpWebRequest)WebRequest.Create(FeedRequestUrl);
 feedRequest.Method = "GET";
 feedRequest.Accept = "application/json";
 feedRequest.ContentType = "application/json; charset=utf-8";
 WebResponse feedResponse = (HttpWebResponse)feedRequest.GetResponse();
 using (feedResponse)
 {
    using (var reader = new StreamReader(feedResponse.GetResponseStream()))
    {
       posts = JsonConvert.DeserializeObject<FBPostsModel>(reader.ReadToEnd()); 
    }
 }
 return View(posts);
}

I hope it helps. Please do share and comment your feedback!