Advanced Search »
Blog
All Pages
Wiki Stats
Facebook application development in ASP.NET

<div style="background-color: cornsilk; padding: 10px;">
'''I've created a Facebook application called [http://www.stevetrefethen.com/blog/MiningYourFacebookSocialNetwork.aspx|SocialMine] that allows you to explore your social network. Be sure to check it out, I created it based off of this Starter Kit.'''
</div>

<table>
<tr>
<td valign="top">
{toc}
</td>
<td>
Facebook Starter Kit App stats as of June 15, 2010<br/>
<p style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal">
        <span style="font-size:8.5pt;font-family:&quot;Tahoma&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#666666">Monthly Active Users<o:p></o:p></span></p>
    <p style="margin-bottom:1.5pt;line-height:normal;mso-outline-level:
4">
        <b>
        <span style="font-size:21.0pt;font-family:&quot;Helvetica&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#333333">457<o:p></o:p></span></b></p>
    <p style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal">
        <span style="font-size:8.5pt;font-family:&quot;Tahoma&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#666666">Application Fans<o:p></o:p></span></p>
    <p style="margin-bottom:1.5pt;line-height:normal;mso-outline-level:
4">
        <b>
        <span style="font-size:21.0pt;font-family:&quot;Helvetica&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#333333">137<o:p></o:p></span></b></p>
    <p style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal">
        <span style="font-size:8.5pt;font-family:&quot;Tahoma&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#666666">Total Users<o:p></o:p></span></p>
    <p style="margin-bottom:1.5pt;line-height:normal;mso-outline-level:
4">
        <b>
        <span style="font-size:21.0pt;font-family:&quot;Helvetica&quot;,&quot;sans-serif&quot;;
mso-fareast-font-family:&quot;Times New Roman&quot;;color:#333333">3,953<o:p></o:p></span></b></p>
</td>
</tr>
</table>
{rating}<span style="font-size: smaller;">(click stars to rate)</span>
[imageright|Facebook application screenshot|{UP}images%2fFacebook%2ffbappthumb.png|http://apps.facebook.com/facebookaspnet]
==Overview==
<p style="padding-top: 10px;">
To ease Facebook development I've created a C# VS.NET 2008 Starter Kit that you can download [http://www.stevetrefethen.com/files/FacebookApp2009v2.1.vsi|here]. This latest release of the Starter Kit is based on the [http://www.codeplex.com/FacebookToolkit|Facebook Developer's Toolkit v2.1] which uses [http://blogs.msdn.com/xmlteam/archive/2008/02/21/linq-to-xsd-alpha-0-2.aspx|LINQ to XSD]. Once you've installed the Starter Kit here is what you'll need to do:

Click [http://apps.facebook.com/facebookaspnet|here] to see the app on Facebook.

'''Here are the basic steps you'll need to follow:'''
#Download the [http://facebooktoolkit.codeplex.com/Release/ProjectReleases.aspx|Facebook Developer Toolkit]
#Download and install my [http://www.stevetrefethen.com/files/FacebookApp2009v2.1.vsi|Starter Kit]
#Start VS.NET 2008 (2005 '''is not''' supported as FDT v2.1 requires .NET v3.5)
#Select File|New Web Site... (C# Language)|Facebook Starter Kit v2.1
#Create a new application on Facebook
#Configure your Facebook application
#Update your web.config
#Start coding!

==Requirements==
*C# language knowledge (VB.NET is not supported)
*VS.NET 2008
*.NET v3.5 (required due to FDT dependency)

==Create a new Application on Facebook==
<ol>
<li>Sign up for a [https://register.facebook.com/r.php|Facebook account] 
</li><li>Add the [http://www.facebook.com/apps/application.php?id=2345053339|Developer application] to your account (if you have a Facebook account just click the link and you'll be take to the page to add the Developer app) 
</li><li>Once you've installed the [http://www.facebook.com/developers/|Developer application] you can view it from the Top menu bar by selecting Settings|Application Settings and choosing the Developer application. Once you're viewing the Developer app click the '''Set Up New Application''' button or click [http://www.facebook.com/developers/editapp.php?new|here].

[image|Creating a new application|http://www.stevetrefethen.com/wndclip/WindowClippings_7c41b06453844f95bb9d541e09368993.jpg]

</li><li>Enter the Application Name and agree to the TOS and click Save Changes:<br />
[image|Configuring your application|http://www.stevetrefethen.com/wndclip/WindowClippings_fdb356cd6633438e86ddc6e05e634441.jpg]
<div style="clear: left"></div>
</li><li>On the '''Basic''' tab
<ul style="list-style-type: disc">
<li>Set '''Help URL''' -> http://hosts_file_alias/&lt;your_app_name&gt;/help/</li>
<li>Set '''Privacy URL''' -> http://hosts_file_alias/&lt;your_app_name&gt;/privacy/</li>
<li>Set '''Terms of Service URL''' -> http://hosts_file_alias/&lt;your_app_name&gt;/TOS.htm</li>
<li>Click '''Save Changes'''</li>
<div style="clear: left"></div>
</ul>
</li>
<li>On the '''Canvas''' tab
<ul style="list-style-type: disc">
<li>Set '''Canvas Page URL''' for your application (this may take many tries as lots of names are taken)</li>
<li>Set '''Canvas Callback URL''' -> http://hosts_file_alias/&lt;your_app_name&gt;/<br />'''NOTE''': ''Facebook has recently stopped supporting localhost as a valid callback URL. To workaround this problem you can add an alias to your %SystemRoot\System32\drivers\etc\hosts file that refers to localhost as suggested [http://forum.developers.facebook.com/viewtopic.php?pid=116136|here]''.
Using localhost makes it easy for you to debug locally, note that the port number (nnnn) will be the port you use to debug your application locally using Microsoft's development web server. You can get that port number once you download and run the application below. Also according to [http://blog.jeromeparadis.com/archive/2007/09/10/Facebook-Developer-how-to-solve-the-quotPage-requested-not-foundquot.aspx|this post] these URL's should be '''all lowercase'''.</li>
<li>Set '''Render Method''' to '''IFrame'''</li>
<li>Set '''IFrame Size''' to '''Resizable'''</li>
<li>Set '''Canvas Width''' to '''Full Width (760px)'''</li>
<li>Click '''Save Changes'''</li>
</ul>
[image|Canvas Tab Settings|http://www.stevetrefethen.com/wndclip/WindowClippings_5d6409b6a34940c199d070964080a410.jpg]
<div style="clear: left"></div>
<li>On the '''Authentication''' tab (Optional)
<ul style="list-style-type: disc">
<li>Set the '''Post-Remove Callback URL''' to http://hosts_file_alias/&lt;your_app_name&gt;/settings/RemoveApp.aspx</li>
</ul>
[image|Authentication Tab Settings|http://www.stevetrefethen.com/wndclip/WindowClippings_5a67f0ca5955457aa6d66a8699045076.jpg]
<div style="clear: left"></div>
</li>
</ol>
At this point, you can review the other available settings but you're pretty much ready to go.

If you would like to use [http://wiki.developers.facebook.com/index.php/XFBML|XFBML] in your application be sure to take a look at [http://www.stevetrefethen.com/blog/AddingXFBMLSupportToTheFacebookStarterKit.aspx|this post]. Note, XFBML support has been added to an updated version of the starter kit so just download the latest and you're good to go!

==Creating your IFRAME ASP.NET Application==
Now launch VS.NET 2008 and start a new web site using the ASP.NET Starter Kit.

#Launch VS.NET 2008
#Select File|New Web Site...
#Select C# from the '''Language''' dropdown
#On the New Web Site dialog select Facebook Starter Kit listed under My Templates
#Click OK{br}[image||{UP}images%2fFacebook%2fNewWebSite.jpg]{br}
#Open web.config and set the APIKey and secret from the values on the Facebook Settings page for your application
<pre class="xml" name="code">&lt;appSettings&gt;
      &lt;add key="APIKey" value=""/&gt;
      &lt;add key="Secret" value=""/&gt;
      &lt;add key="Callback" value="http://localhost:14215/facebookapp"/&gt;
      &lt;add key="Suffix" value="MyIFrameApp"/&gt;
      &lt;add key="TemplateID1" value="20889707566"/&gt;
      &lt;add key="TemplateID2" value="20889902566"/&gt;
&lt;/appSettings&gt;
</pre>

==Adding your application to your Facebook account==
Once you've created your application you'll want to add it to your FB sidebar so you can use it easily. To do that follow these steps:

*From the Developers Application on Facebook browse to [http://www.facebook.com/developers/apps.php|My Applications]
*Click View About Page then click Add Application

Feel free to contact me [http://www.stevetrefethen.com/blog/email.aspx|here] to let me know what you would like to see or what's missing.

'''NOTE:''' Be sure to checkout the [http://wiki.developers.facebook.com/index.php/ASP.NET|ASP.NET page on the Facebook Developer's wiki].

==See Also==
[http://www.stevetrefethen.com/blog/CategoryView,category,Facebook.aspx|My other Facebook blog posts]{br}
[http://socialsnippets.com/View.aspx?id=91|How to Use the Facebook Developer Toolkit 2.0]{br}
[http://www.stevetrefethen.com/blog/AnHttpHandlerForUseWithFacebook.aspx|An HttpHandler for use with Facebook]