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 is a wrapper, which creates required JavaScript and ensures that Facebook (Graph) API is initialized before resizing is started. It also makes an application more independent of frequent changes in Facebook API. For example, there was change of JavaScript from REST API to Graph API which made changes in the implementation of the control. However, the only thing that what was required to adapt this new functionality of API, was to change version of the control, instead of changing JavaScript in every page, in all applications. Compiled version and source code version of this ASP.NET control are available in C# and VB.NET programming languages, as part of Facebook ASP.NET (C# and VB.NET) Control library.



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



Configuration

There 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>

 

Customer Testimonials

"As a facebook "newby", developing a Facebook application is quite a challenge. You need to learn to Facebook concepts, the ever changing facebook APIs, working around APIs being depreciated. I found the libraries provided by Vatlab extremely helpful. Within hours I got the Facebook functions that I needed up and running. The documentation combined with the online tutorial was all that I needed.

"What also makes this product stand out in a IT world where decent product support is becoming a big issue, is the way developer of the libraries handled a question I had. The reply came very quickly and was to the point. It was a real pleasure to deal with him. I can only recommend this library and I’m sure that we will continue to see exciting new features in future."

Peter Cabus, Sr. Consultant, IT & Video Consultancy

Customer Spotlight



Vote for your favorites

Facebook development platform
Contact   |  Refund Policy   |  Privacy Policy   |  EULA