A Sample Facebook App using Facebook C Sharp SDK

In previous tutorial of this series, we learnt the basics of Facebook C# SDK and how do we implement it in our asp.net website. Now let’s move further and create something meaningful out of it. If you haven’t tried Facebook C# SDK before, it’s strongly recommended that to go through the previous tutorial.

Recap of the last article:

  • Creating and configuring Facebook App
  • Setting up Facebook C# SDK
  • Getting User Access Token
  • Obtaining User Email and Friend List

Continuing from where we left off i.e getting friend list, let’s move further and obtain some more user information and more importantly get our hands dirty with POST actions available through Graph API.

To explain the various Graph API GET and POST actions, we will try to develop a real world app for better understandability.

I didn’t put much pressure on my mind, and got an idea for a stupid, simple app that’s already been developed by many on Facebook – Finding which sports star is the user. (Not too much realistic 😛 but will do for this tutorial)

Here’s the design view for our app:

You can download the whole project to get the design code.

Working of the app

The idea is simple, we will obtain all the athletes liked by the user and guess what, then we would RANDOMLY choose a sports person. Now when we have the name of the sports person from the list, we would display his picture. User would have options to share it as a text status, or a photo with description. They could also tag their friends in the photo before sharing.
Additionally, the user can share our page on his timeline. Also, he can share his experience or doubts on our Facebook Page i.e give feedback.
The status label at the end will help you being notified of what’s going on and moreover it would display the result of various POST actions.

Getting Access Token, Name, Friends and Favorite Athletes

Here’s the page_load, login, logout and GetUserData method.

 

 

Status – Connected

Update
1 Corrigendum: The expiration time of access token is in seconds and not milliseconds.
2 You can now see a video walk-through of the app at the end of the post.

On Page_Load we would detect the status of the user – connected, not connected or redirected from Facebook. On GetUserData method we access user’s name and friends for populating our CheckBox List. Importantly list of favorite athelets of the user is extracted and displayed in a ListBox. For a detailed explanation on this step, please refer to the previous tutorial.

Selecting an Athlete

When ‘Click to Find’ is clicked. we would randomly select a sportsperson from the list of favorite athletes of the user.  An image of the selected sports person would be displayed on the Image component on our web page. For simplicity I have included all the images in my project, you might consider making API calls in your real world app.

Messi? I don’t mind 😛

Now when a user has interacted with your app, you would be interested in publishing his activity on his timeline so that it could attract more users or just create an awareness for your app. You could post a simple text update, an image or an open graph action.
In this example, it’s not done automatically rather there are buttons for each of these actions. In your real world application you might be interested in doing this behind scenes.

Update Status (Publishing a simple text update)

The ‘Update Status’ button when clicked will publish a text message to the user’s timeline. It’s easy, we just need to do a simple POST request to ‘/me/feed‘.

When successfully posted, Facebook returns the post id of the newly published status which you might want to store in database for tracking/analytics.
Note: ‘via your_app_name’ is placed next to the post date to depict that it’s published through an app.

Share Photo

SDK’s FacebookMediaObject makes it very easy to post photos to user’s profile. The Graph API path for posting photos is ‘me/photos

 

 

This will create a new album with the same name as of the app (if it didn’t existed already) and the photo will be added in that album. You can also add a photo to a particular album by specifying the album id in the following endpoint: ‘Album_ID/Photos‘.

Note: the parameter ‘name’ will contain the description for the photo. The second parameter i.e ‘pic’ can be anything you like. It is used as the name in the multipart/form-data when you upload the file.

Once posted, Facebook will return the photo_id as response which is displayed in the status label.

 

Tag & Share

Users can also tag their friends before publishing the photo. Users can select their friends to be tagged from the Checkbox List on the left.
I am NOT able to develop a sophisticated tagging system where users would click on the friends faces to tag them. So for this example x and y cordinates are generated through code and are NOT in the control of the user.

Select friends from Checked ListBox

 

Photo with friends tagged

 

Share Page

You can make users share a link with custom thumbnail, name and description.

You can either accept values for these parameters from user or generate it automatically or skip them altogether. In the last case Facebook will automatically extract the required  information from the link.

Give Feedback

You might also want to allow users to share their experiences/feedback on you company’s Facebook page. This can be done by using page_id instead of ‘me’ in the graph api call.

 

Note:
1. Don’t try to replace the page_id with user profile_id because as of 6th Feb, 2013 you can’t post on friends timeline using Graph API.
2. This will NOT work on a page you admin. You will receive an ‘(OAuthException – #283) (#283) Requires extended permission: manage_pages’. For debugging purpose, you could use a different account or even better create a Test User for your app.

 

I hope this article takes you a step forward with Facebook C# SDK. You can download the whole project from here if you have any doubts. You can always ask your queries/share your feedback in the comment section below.

Don’t forget to like ThePCWizard on facebook for latest tech trolls and geeky discussion. Also subscribe to the RSS feeds and YouTube channel for latest programming tutorials and tech news.

10 thoughts on “A Sample Facebook App using Facebook C Sharp SDK”

  1. Nice Article Thank you,by the way how do i send private message to my friends?through that message i actually want to send Link of my app so when my friend open the message and click on link he/she will redirect to my app page..can you please suggest how do i do this?Thank you in advance.

Leave a Comment

Your email address will not be published. Required fields are marked *