Click here to Skip to main content
Click here to Skip to main content

IVR used in the Facebook

By , 18 Jun 2008
Rate this:
Please Sign up or sign in to vote.

IVR and Facebook Introduction

We have two technologies to introduce here:

About the IVR, I have wrote one article to introduce it, you can explore it in this URL:IVR applications based on Voicent Gateway. Or you can learn the IVR in the Website:Voicent.

Now, we will mainly pay our attention to the Facebook.NET.

Facebook.NET

When friends showed it to me, I was fascinated at once. After several days' playing with Facebook and I am impressed. The difference between MySpace and Facebook is that Facebook opend itself up to developers, now it's a platform for developing ASP.NET base applications in C# or VB.NET.

Developing in this platform is excited, and now more and more web or desktop applications are popping up.

Facebook applications are essentially web sites that naturally embed themselves ala plugins, into the overall Facebook experience, as described in the Anatomy of a Facebook Application.And you can learn the API of Facebook here:Facebook API. Each application has a presence on the user's main profile page, can add stories to the user's feed, which are then shared out amongst the user's network and can optionally have a set of canvas pages, or a work-areas essentially, where it has a lot more freedom in terms of interactivity and monetization possibilities. In order to resist the spam or adware, Facebook constrains what the applications can do, especially on the profile page. It requires developers to implement their user interface in FBML - a subset of HTML , but devoid of pesky, unsafe tags such as script and object amongst others. Furthermore it manages requests to the application's server for FBML markup and image responses and does the transformation into HTML that is finally rendered in the browser. In return, FBML provides some neat extensions or tags that allow applications to integrate deeply with Facebook's UI concepts and controls. Facebook also provides a nice REST API, and a SQL-based query language called FQL that developers can use to program against their user's profile and network of buddies. Finally, Facebook provides a stage and an Internet-scale "word of mouth" style mechanism that enables viral distribution of your application.

Now, Facebook.NET offers managed wrappers over a good chunk of the REST API, and also provides a small set of server controls that should really simplify writing apps. Before diving further, you should check out the basic Facebook documentation to get oriented a bit, as well as bookmark the Facebook developer's wiki for future reference.

In terms of an application's canvas page, Facebook mainly offers two options: FBML-based apps and IFrame-based apps . Facebook.NET supports both styles of applications, web applications and desktop applications, and now We focus on the ASP.NET based web apps. Facebook.NET provides a wrapper over the REST/JSON APIs so you don't need to worry about marshalling requests or responses. It also provides an ASP.NET server control, <fb:FacebookApplication> that manages the somewhat involved login/session-acquisition process. Finally, it offers an <fb:FqlDataSource> control that allows you to use Facebook queries and bind the resulting data into data-bound controls, just like the SqlDataSource control in ASP.NET. Over time, hopefully there will be more it offers, especially in terms of FBML-specific UI controls.

The first thing to do is create an ASP.NET application, add a reference to the FacebookNET.dll and FacebookNET.Web.dll assemblies. If you haven't already done so, add the developer application onto your Facebook profile from where you'll be able to go ahead and register your application so you have an application key and secret key to use. The guide to creating an application covers the registration steps - just follow them while ignoring the sample PHP code.Or you can follow Steve Trefethen's article : Developing Facebook applications in C# with ASP.NET.

I strongly recommand you should read these articles first, that will let you easily getting started.

When you finish the creating of a new application and upload it to the Facebook, you can start to add some interesting things to it. I've created an application that can let you send voice message to your friends.And I used my familiar tools IVR.

Using the code

About the code that connects to the Voicent Gateway, you can visit this article:IVR applications based on Voicent Gateway.Here I'll only post the code about Facebook.NET.

First, you need to add the Facebook controls into your applications.To use this toolkit, you will most likely want to add the FacebookWebControl component to your toolbox in Visual Studio.To do this, right-click in the area of the toolbox where you want the controls to go, and select “Choose Items” from the pop-up menu.

In the window that appears, click the “Browse…” button, locate Facebook.WebControls.dll, and open it. Click “OK”, and the controls should appear in your toolbox. If you want to add the Facebook controls for your application as well, repeat the above instructions for the appropriate Controls dll file (Facebook.Controls.dll for desktop applications).

After that, trag a FriendList control to your page:

<div>    <div>
        <cc1:FriendList ID="FriendList1" runat="server" />
    </div>

</div>

Then, you can add some normal control in your .aspx page, like what you do in the ASP.NET web based applications:

    <div>
        <asp:Label ID="lblPhoneNumber" runat="server">PhoneNumber :</asp:Label>    
        <asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox>
    </div>
    <div>
        <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Rows="5" 
            Columns="10" Width="240px"></asp:TextBox>
    </div>
    <div>
        <asp:Button ID="btnSendMessage" runat="server" Text="SendMessage" 
            onclick="btnSendMessage_Click" />
    </div>
        

Now, you have all the controls needed, and you should add some necessary namespaces:

using Facebook;
using Facebook.Entity;
using Facebook.Components;
using Facebook.WebControls;
using System.Collections.ObjectModel;

Let your class inherits from the baseclass CanvasIFrameBasePage:

public partial class FacebookPage : CanvasIFrameBasePage 

Put these codes in the Page_Load method:

            //Assign the API key and secret key to sign up in the Facebook.
            //These keys are got from the application you created in the Facebook.
            fbService.ApplicationKey = "2e91b1e10fde83d84f013dc5892db535";
            fbService.Secret = "73da07234bf005f7412df2ee77ff05a1";

            //Set the IsDesktopApplication property of the FacebookService to false.
            fbService.IsDesktopApplication = false;

            /* Check if we have already stored the Facebook session information or if the auth_token is in the query params.  
             * We will store what we know about the current user's Facebook Session in a server side variable.
             * We will then check that variable to see if we already have established a Facebook session on behalf of the current user.*/

            string sessionKey = Session["Facebook_session_key"] as String;
            string userId = Session["Facebook_userId"] as String;

            //When the user logins in the Facebook, the redirect back here will have the auth_token in the query params.
            string authToken = Request.QueryString["auth_token"];

            //If we have already established an session, set it to the FacebookService reference.
            if (!String.IsNullOrEmpty(sessionKey))
            {
                fbService.SessionKey = sessionKey;
                fbService.UserId = userId;
            }
            //If not, check if we have the auth_token in the query params. If we do, that means we just got called from the Facebook login page.
            else if (!String.IsNullOrEmpty(authToken))
            {
                fbService.CreateSession(authToken);

                Session["Facebook_session_key"] = fbService.SessionKey;
                Session["Facebook_userId"] = fbService.UserId;
                Session["Facebook_session_expires"] = fbService.SessionExpires;
            }
            //if neither, we need to redirect the user to the Facebook hosted login page.
            else
            {
                Response.Redirect(@"http://www.facebook.com/login.php?api_key=" + fbService.ApplicationKey + @"&v=1.0");
            }

            if (!IsPostBack)
            {
                //Use the FacebookService method to get the current user's friends.
                this.FriendList1.Friends = fbService.GetFriends();
            } 
 

You should replace the two keys using your application keys that are generated by the Facebook when you create new applications there.

fbService.ApplicationKey = "2e91b1e10fde83d84f013dc5892db535";
fbService.Secret = "73da07234bf005f7412df2ee77ff05a1"; 
 

In IE, if a parent frame has a different domain than the child page, the session data (stored in the Session object) is not preserved as a security precaution.http://wiki.developers.facebook.com/index.php/ASP.NET.

protected override void OnPreRender(EventArgs e)
{
     Response.AppendHeader("P3P", "CP=\"CAO PSA OUR\"");
     base.OnPreRender(e);
}  

In the click event of button, you can post the code that will be used to send your message.These message I've posted before, so you can visit my another article IVR applications based on Voicent Gateway or download the RAR backage that contains the whole application.

Point of Interesting

IFrames vs. FBML

When I first started looking at Facebook applications, I was quite sure FBML was the way to go for implementing the application's Canvas pages. Now I am not so sure.

FBML allows you to use a bunch of interesting Facebook user interface elements, and naturally pick up the Facebook theme. It does come at some cost: your application is constrained in terms of usage of script for example, which limits interactivity, as well as advertising. It also potentially increases latency issues as your server needs to serve up FBML, which has to be converted to HTML on Facebook's servers, before it gets rendered into the browser. To further the problem, Facebook seems to have a low threshold for timeouts, and this latency could result in an unfriendly error message, should processing on either your server or Facebook's servers take more than the allocated time.

The compelling reason for using iframes is that it allows you to do as you please within your frame, which includes the ability to run script, use your familiar Ajax framework, as well as display advertising. The downside of course is you either need to work extra hard to mimic the Facebook theme, or possibly risk a lesser than ideal level of user interface integration.

In closing, check out Facebook.NET, let me know what you think, and stay tuned for a future posts related to this. Hope to get a couple of real apps out there one of these days.

SourceCode Download

Download FacebookAndIVRApp.zip - 104.59 KB

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

jedliu2046

China China
No Biography provided

Comments and Discussions

 
GeneralMy apologize Pinmemberjedliu204623-Jun-08 21:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140421.2 | Last Updated 19 Jun 2008
Article Copyright 2008 by jedliu2046
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid