|
|
|
Facebook Resizable iFrame for ASP.NET
Facebook applications are running inside Facebook iFrame. There are 2 types of such applications: FBML and iFrame. From year 2011, creating new FBML application is not supported anymore. Height of Facebook iFrame can be defined in 2 ways. The first way is to be fixed, and show scroll bars if the content of an application is higher than size of the Facebook iFrame. However, this is an option only if content of the application will never exceed iFrame height, because scroll bars in iFrame do not look professional. The second way is that iFrame height is depending on the height of an application inside it. Since lot of applications have at least on page with dynamic content, meaning they usually depend on data from database, like user's profile and user's friends, using this way is recommend. To enable this functionality, you have to include additional JavaScript on every page with dynamic content.
Facebook Resizable iFrame ASP.NET control has a demo page inside Demo Website that shows how it works. The most important fact is that the Demo website is contained in the package with the library, which is very useful resource for code examples, in both C# and VB.NET, for each control from the library. Look at the Facebook iFrame demo
ConfigurationThere are no properties or event handlers to configure for this control, since functionality of the control is simple. However, to make the control work correctly, it is required to set one option inside Facebook Developer application. Currently, option can be found under section Facebook Integration, then under Canvas, and than iFrame Size. You have to set that to Auto-resize option. Usage Examples:Following examples show registration and insertion of Facebook Resizable iFrame ASP.NET control in ASPX file. Usage of master pages is preferable option, to make an application easier to maintain. Because of that, examples show master page where the control is used. There is also InitFVK control, which is used to initialize Facebook Graph API. It is required to insert Resizable iFrame control immediately after InitFVK control, which has to be inserted after <body< tag. To be easier to find, important parts for registration and integration of Facebook control inside ASP.NET page are highlighted. Integration in ASP.NET master page: <%@ Master AutoEventWireup="true" Inherits="FVK_Demo.Master" %> <%@ 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="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.Facebook.com/2008/fbml"> <head id="Head1" runat="server"> <title>FVK Demo</title> <link rel="stylesheet" type="text/css" href="/FVK/fvk.css" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <fvk:initfvk ID="initfvk1" runat="server" /> <fvk:enableresizable ID="resizable" runat="server" /> <img src="/Images/banner.png" alt="" /> <br /> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </form> </body> </html> |
