« Back to Blog « Older Entry | Newer Entry »

How to Integrate Asp.Net application in Facebook

Posted by imomins on June 13, 2012 at 9:50 AM

How to Integrate Asp.Net application in Facebook

(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

 

Hi,

Someone asked me how to create facebook app day before yesterday and he wanted to integrate existing asp.net webpage in this facebook app. I was not much aware about facebook integration but got to know that facebook doesn’t have any api for asp.net to integrate webpage instead they have for php and python. So I googled and then find very good dotnet toolkit for facebook app which is from Microsoft (Facebook Developer Kit). We can integrate desktop or web app using this toolkit. So I thought I should make a sample app and share on this platform.

Below are some steps":

Before creating facebook app you need to have facebook account.

Setting up Facebook App
  • To create facebook app click on Developer section 
  • Click on Set up New App button.
  • Agree Facebook terms and click on Create App

Fb_CreateApp_thumb1

  • Put Security Check keywords.
  • Click on Submit.
  • Fill basic information about app.

fb_BasicInfo_thumb1

  • Click on Facebook Integration tab.
  • Put Name of Canvas page.
  • Before putting URL of webpage of your website, I want to show how your page can get callback from facebook app. So first we create webpage in our website:
  • Create asp.net website in Visual studio.
  • Add reference of Facebook.dll from “C:\Program Files\Coding4Fun\Facebook\Binaries”. This dll will be placed after installing Facebook Developer kit on your machine.
  • Create instance of FacebookService object. you can copy facebook app api key and secret key from application page on facebook in source code.

 

fb_appkey_thumb1

put above values in FACEBOOK_API_KEY and FACEBOOK_SECRET constants respectively.

you can get user_id of facebook who requested this application by calling

view source
print?
1.string userId = Session["Facebook_userId"] as String;

you can also get many information about user like name, sex, location,friends etc.

view source
print?
1.User usr=_fbService.GetUserInfo();

fb_userInfo_code_thumb2

Source Code

view source
print?
01.using System;
02.using Facebook;
03.public partial class Facebook_ConnectFacebook : System.Web.UI.Page
04.{
05.    Facebook.Components.FacebookService _fbService = new Facebook.Components.FacebookService();
06.    private const string FACEBOOK_API_KEY = "191856207506775";
07.    private const string FACEBOOK_SECRET = "820c0b05b14a09365e072c8d37a8c49f";
08. 
09.    protected void Page_Load(object sender, EventArgs e)
10.    {
11.        _fbService.ApplicationKey = FACEBOOK_API_KEY; _fbService.Secret = FACEBOOK_SECRET;
12.        _fbService.IsDesktopApplication = false;
13.        string sessionKey = Session["Facebook_session_key"] as String;
14.        string userId = Session["Facebook_userId"] as String;
15.         
16.    // When the user uses the Facebook login page, the redirect back here
17.    // will will have the auth_token in the query params
18.         
19.    string authToken = Request.QueryString["auth_token"];
20.         
21.    // We have already established a session on behalf of this user
22.        if (!String.IsNullOrEmpty(sessionKey))
23.        {
24.            _fbService.SessionKey = sessionKey; _fbService.UserId = userId;
25.        }
26.        // This will be executed when Facebook login redirects to our page        
27.        else if (!String.IsNullOrEmpty(authToken))
28.        {
29.            _fbService.CreateSession(authToken);
30.            Session["Facebook_session_key"] = _fbService.SessionKey;
31.            Session["Facebook_userId"] = _fbService.UserId;
32.            Session["Facebook_session_expires"] = _fbService.SessionExpires;
33.        }
34.        // Need to login        
35.        else
36.        {
37.            Response.Redirect(@"http://www.Facebook.com/login.php?api_key=" + _fbService.ApplicationKey + @"&v=1.0\");
38.        }
39. 
40.        User usr = _fbService.GetUserInfo();
41.        string t = string.Format("User Name:{0}, Sex:{1}, Location: {2}", usr.Name, usr.Sex, usr.CurrentLocation.City);
42.        Response.Write(t);
43.    }
44.}
Testing 

    

        Now we are done with coding. Its time for testing.

    
    
        
  • Run your website.
            
  • Put webaddress of your webpage in facebook developer section as canvas URL.
                
  • Canvas type should be IFrame. 
    • 
    

    

        
            fb_canvasUrl_thumb1

    
    
        
  • Click on Save changes.
            
  • now Facebook app has created. 
    • 
    

    

        
            image_thumb2
    

    
    
        
  • Now open app url like http://apps.facebook.com/testneeraj/
        on browser .
            
  • First time authToken will not authorize from facebook because you need to agree
                on “Allow Access” information. 
    • 
    

    
        image_thumb4
    
    
        
  • Click on facebook banner.
            
  • It will ask Request for Permission. Click Allow. 
    • 
    

    

        
            image_thumb10

    
    
        
  • It will show all basic information of user on webpage. 
    • 
    

    

        
            image_thumb15

    
    
        
  • After that you can publish your app but having restriction from facebook that your
            application should 10 active member per month. 
    • 
    

    

         

    
    
    

    

        I hope this article will give good knowledge about integration with facebook app.
        Please share your comments and feedback with me.





	

		Categories: ASP.NET, C#, JQUERY
	


		










		

    
	
	
    

    

	
	
	
	

	
	

    




	

	

            Post a Comment
	


	

		
Oops!

		

			 Oops, you forgot something.
		

	


	

		
Oops!

		

			The words you entered did not match the given text. Please try again.
		

	


	

				
					You must be a member to comment on this page. Sign In or Register
	

    
0 Comments

	





    



	











    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    














  
  


			

		

	



	

	

		

			



	
	
Categories