Facebook Application Configuration in ASP.NET

We want to thank you for choosing our solution, the Facebook Visual Kit. Since you are reading this manual may we congratulate you on a correct choice that will promise you a fast installation of the FVK library so that you can immediately make use of Facebook's wide array of tools for your Facebook application. If you are reading this for the first time please continue to be guided through all the processes.

Initial feedback reports of the libraries first version suggested some common found errors with installing some of its components. To avoid this please follow the proposed guidelines. The Solutions for Frequent Problems Section has solutions that cover roughly 90% of the reported problems.

It is recommended that before attempting integration by using any control from the library, to read the corresponding section in the guide and compare all the available options.

What does this package contains?

Library Folder
All of the essential DLLs and FVK ASCX files are in the Library folder. The library folder also contains DLLs needed to work with Facebook C# SDK as underlying layer for all applications.

Demo Application Folder
Examples of how to use each component is in the demo application. It is already configured for existing Facebook application to work from a local host at port 8181 so you can run it in Visual Studio and test the components based on your various parameters.

Facebook Starter Kits Folder
These are small template applications intended primarily for beginners in Facebook application development. The applications containss all required libraries and configurations so it is perfect for a fast start of a new app development. If you are starting with the development of new facebook applications, please use these apps as your template.

FVK Source Code Folder
Available only with the source code license. This project contains source code of the FVK library. It can be adapted and compiled in the new FVK.dll.

Settings in the Developer application

Regardless of your experience level it is advised to read this section to guarantee correct configuration of your application. It is incorrect settings in the developer application that tends to be the cause for malfunctions. This can result in many hours of lost time trying to fix the problem.


Create a new app

Open Faceook Developer application and press 'Create new app' button. The screen as shown below appears. There enter the Application name and select Agree and then Create Application to start the development process.






Setting Web Site options

Select the Website section inside Developer application and set the Site URL as shown on the following picture. These settings for the application are those which can be operated from Visual Studio on your local computer at port 8181. Be sure to set the same port in Visual Studio. Facebook Site URL has to be set for Facebook Connect applications and also for iFrame applications and Facebook Page applications. Forgetting to set this option is the most frequent mistake. When you publish the app on your hosting server you should change the Site URL on the domain of your server i.e. full URL of hosted application.






Setting App on Facebook options

This setting is required for Facebook iFrame applications and Facebook Page Tab applications. Select the App on Facebook section inside teh Developer application and set URLs as shown on the following picture. Canvas URL has to be the same as Site URL or at least from the same domain. When you publish the app on your hosting server you should change the Canvas URL on the domain of your server i.e. full URL of hosted application. If you change the Canvas URL be sure to change the Site URL also or your application will not work anymore.






Setting Page Tab options

This setting is required for Facebook Page Tab applications. Select the Page Tab section inside Developer application and set the URLs as shown on the following picture. Page Tab URL has to be the same as Site URL or at least from the same domain. When you publish the app on your hosting server you should change the Page Tab URL on the domain of your server i.e. full URL of hosted application. If you change the Page Tab URL be sure to change the Site URL and Canvas URLs also or your application will not work anymore.



How to add an app to your Facebook Page?

To add an application to Facebook Page the simplest way is to click on the following link:

http://www.facebook.com/add.php?api_key=113689438716269&pages

Where 113689438716269 is ID of your application. After clicking a link a dialog will popup to choose the page where the application is to be installed.

Settings in web.config

This section describes settings required for correct work of Facebook Visual Kit and Facebook C# SDK inside web.config file. Since libraries are independent there is required redundancy.


Setting Facebook Visual Kit

Open the Web.config file in Visual Studio after you created your application and enter these keys into your app settings. The Aplication ID, Secret codes, App name and Canvas Page should be entered as shown in the fields below:

 <appSettings>
    <add key="appId" value="<YOUR APPLICATION ID>"/>
    <add key="appSecret" value="<YOUR APPLICATION SECRET>"/>
    <add key="appName" value="<YOUR APPLICATION NAME>"/>
    <add key="appUrl" value="<YOUR APPLICATION URL>"/>
 </appSettings>

Setting Facebook C# SDK

From Facebook Visual Kit ver. 6.0 there are no requirements to add anything in web.config to configure Facebook C# SDK. Facebook Visual Kit now takes care of authorization and acquiring the access token. If your app used old version, just delete any line required for setting of Facebook C# SDK. To make things simple search for all lines which contains 'facebook' keyword that are outside of appSettings tags.

Installing FVK in Visual Studio application

You need to open the Library folder and within it the FVK folder, copy it to the root of your source tree inside the project, including all the files and subfolders, . Next to that you should open Visual Studio and then add a reference onto FVK.dll and facebook.dll. All of these DLLs can be found inside the Library folder.

Note: If you are creating a „ASP.NET Web Application“ project in Visual Studio, please follow this additional step:

Press the Show All Files button in the solution explorer, then press the right mouse button on the FVK folder and select Include In Project.

Page requirements

It is essential to include these following lines at the beginning of each page or on the master page (immediately after <%@ Page or <%@ Master tag). The use of master pages is recommended for Facebook Connect website registration, and the insertion of EnableResizable control has to be omitted.

 <%@ Register TagPrefix="fvk" TagName="initfvk" Src="~/FVK/InitFVK.ascx" %>
 <%@ Register TagPrefix="fvk" TagName="enableresizable" Src="~/FVK/EnableResizable.ascx" %>        
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">

Include following line inside HTML <head> tag:

 <link rel="stylesheet" type="text/css" href="/FVK/fvk.css" />

Include the following line immediately after the <form> tag:

 <fvk:initfvk ID="initfvk1" runat="server" />
 <fvk:enableresizable ID="enableresizable1" runat="server" />
 <asp:ScriptManager ID="ScriptManager1" runat="server" />

How to use the controls

Tutorial about how to use ASP.NET control from Facebook Visual Kit is located at: Facebook ASP.NET Controls

Solutions for Frequent Problems

The solutions to the most common problems are listed here; nevertheless, if it isn’t listed here do no hesitate to email us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it . Please email us if any new issues arise.

Some controls are not displayed
Is the Site URL in the Developer application set right? To view how to configure the Site URL correctly please view the Setting Site URL section.

Some controls do nothing on a mouse click
There are descriptions for each component to assist you in checking if the required Java Script is there.

Application does not work on server
Open your application in Visual Studio and select the „Publish Web Site“ command to publish your application onto the hosting server. A simple copying of the application to the server won’t work.

Clicking on Login Button shows an error in Internet Explorer
If the application is running on localhost from Visual Studio complications occur because of problem with integrated Visual Studio web server. To avoid this issue use Firefox, Chrome or publish your application to the local IIS.

Incorrect port on localhost issues
Visual Studio by default uses dynamic port for new applications. Always check did you set the correct URLs (address and port) i.e. if an application is really running on location defined in web.config and Facebook Developer applications.

WWW and non WWW issues
Check if you use the same WWW or non WWW version of URLs in your settings and location when application is running. The best option is to use non WWW version and set App Domain inside Developer application.

Localhost as App Domain issues
If an application is configured to work on localhost App Domain must not be set to 'localhost', but it should be left blank.

Requests and Friend invitations are not received by recipient
Check in Developer app if you application is in Sandbox mode. Sandbox mode has to be disabled.