Facebook Cross Domain Communication and F5 Firewall/Load Balancer Part 2

Your DisplayName here! — Thu, 27 May 2010 09:06:04 GMT

Turns out this was a Facebook bug after all.

We switched the Firewall back to the way it was, without changing the code, and hey presto - all is well.

Not only that but the second step (email invites) was not displayed.

FB - All your base are belong to us.

Facebook Cross Domain Communication and F5 Firewall/Load Balancer

Your DisplayName here! — Wed, 26 May 2010 14:16:59 GMT

As you can tell, this is going to be a nice and easy topic.

Got the go-ahead to deploy Facebook Connect to the site I'm working on, everything certified "Works on Dev" so go to push it to the UAT servers.

This environment is load-balanced and has an F5 firewall sitting in front of it, and proceeded to fall over in spectacular fashion.

The bizarre thing is that FireFox and Chrome are happy, while IE (surprise) throws back the mystic error "Redirect Required" with content of

<meta http-equiv="refresh" content="0; url=[MY URL]>

Hmmm.

Facebook xd_receive and Cross Domain Communication

Facebook Cross Domain comms is based on using IFrames to transport data, see http://msdn.microsoft.com/en-us/library/bb735305.aspx for a full explanation.

On investigation of the Big IP logs, we could see the raw request was flagging a Cross-Domain Scripting attack for the IE request (but not for the FF request).

My gut-feel is that this could be as a result of an IE security patch which puts a whole lot of extra stuff in the Form variables which then confuses Big IP, but this is a complete and utter guess.

The solution? Patch a hole in the Firewall. So not really a solution I'm afraid.

ASP.NET Facebook tutorial - Beginner Essentials

Your DisplayName here! — Wed, 14 Apr 2010 14:35:21 GMT

So you want to write a Facebook app? The good news is that once you get going, it's actually really straightforward. The bad news is that it's an uphill struggle to get going in the first place.

Unfortunately for the ASP.NET developer, there is no official wrapper for the Facebook API. There are a couple available, but as you can see by the reviews they are far from perfect.

However, we can still create a Facebook application without needing the API. Okay, we won't be able to do a huge amount with it, but this is a starter tutorial and we'll get to the more advanced topics later.

Note: I'm pushed for time at the moment, so will add some screenshots later, which should help to explain things a bit better. Picture paints a thousand words and all that.

The Basics - Facebook Connect and Facebook Applications

There are two completely different concepts when dealing with Facebook applications.

Facebook Connect - integrate a user's Facebook profile information (name, likes/dislikes, wall, dodgy profile pictures) into your existing site. A good example of this is http://welcometofc.com

Facebook Canvas Application - this is an application that lives within Facebook - however IT IS NOT HOSTED WITHIN FACEBOOK. You get to your app via http://apps.facebook.com/[MYAPP] - no surprises that this has to be unique.

Facebook needs to be able to access your site, so there can be no localhost development I'm afraid. You need to put the page on a publicly accessible server.

Create your Facebook App

Creating both Connect and Canvas apps involve the same process. In fact you can have BOTH a Connect AND Canvas app configured within the same application configuration.

To do this, you'll need to add the Developer app, at http://www.facebook.com/developers/

Click Set up a New Application.

You should now see the Application Settings screen. The main configuration is within the Edit Settings option.

Basic - Contains your API Key. YOU NEED THIS. You add this to your web site to confirm that your web site can talk to this app. Keep it secret. Keep it safe. Not to be confused with your Application Secret.
Authentication, Profiles, Widgets, Advanced, Migrations - Not essential.
Canvas - This is where you set up your Canvas URL - if you are creating a Canvas app only - and the callback URL, which is the page that Facebook calls which is by default hosted within apps.facebook.com/[MYAPP]. More on this later.
Connect - Configure how your web site connects with Facebook. You only need this if you are doing Facebook Connect, it is not required if you have a stand-alone Facebook Canvas application.

Facebook Connect

To enable your site to connect to Facebook, you need to do 3 things:

1 - Enable Cross Domain Posting - you do this by including a couple of javascript files that you get from Facebook. More detail to follow.
2 - Initialise your Facebook application in client script
3 - Import the FBML namespace.

That's about it. Of course, you'll want to *use* some FBML, but more on this later.

I'm taking it that by now you have configured your Facebook Connect application in Facebook.

Replace the <html> tag in your .aspx page with the following:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">

This imports the namespace which contains the FBML, so that your browser doesn't fall over before these have been parsed by the facebook javascript.

Add the following javascript includes to the bottom of your page, just above the closing <body> tag:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
FB.init("[YOUR API KEY]","/assets/xd_receiver.htm",{"ifUserConnected" : showLoggedInState, "ifUserNotConnected":showLoggedOutState});

/assets/xd_receiver.htm is a relative link from where this page runs to the Cross-Domain file you get from facebook. Get it from here - http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel

This bypasses the Single Origin Policy and allows Facebook to interact with your page and vice versa.

Add the following to your .aspx page:

                         <div id="loggedOut" style="display:none">
                      <fb:login-button length="long" size="large" onlogin="showLoggedInState();return false;">Invite Friends with Facebook</fb:login-button>
                  </div>
                  <div id="loggedIn" style="display:none;">
                      <div id="user-box">
                          <span>
                              <div id="profile-pic">
                                  <fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>
                              </div>
                              <div id="welcome-text">
                              Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>.<br />
                              Invite friends with <a id="lnkShare7" href="#share7" name="modal" onclick="return false;">Facebook Connect</a>.
                              </div>
                          </span>
                      </div>
                  </div>

           

          <div id="facebook-wrapper">
              <div id="share7" class="window windowfixed">
                  <p style="margin-left:10px;">
                      Invite a friend to use this application...
                  </p>
                  <p id="multi-friend-selector-container">
                      <fb:serverfbml>
                      <script type="text/fbml">
                      <fb:fbml>
                          <fb:request-form method="POST" action="<%= FacebookFormAction %>"
                                      invite="true" type="<%= FacebookApplicationName %>"
                                      content="You have been invited to the [MY APPLICATION] application. <%= ApplicationsFbml %> ">
                                      <fb:multi-friend-selector bypass="cancel"
                                          showborder="false" rows="3" cols="4" max="35" actiontext="Invite your friends to use this application." />

                      </fb:request-form>
                      </fb:fbml>
                      </script>
                      </fb:serverfbml>
                  </p>
              </div>
          </div>

where FacebookFormAction is the URL of the current page, and FacebookApplicationName is the name that you want to appear in the Facebook Connect dialog.

What this will do is display the Connect with Facebook button if the user is logged out.

When the user is logged in it will display the user's FB name and profile picture, and allow the user to share this application with their friends on Facebook.

Notice the FBML markup; you can find a complete list at http://wiki.developers.facebook.com/index.php/FBML

Facebook Canvas

That was Facebook Connect. If you want your site to be hosted WITHIN Facebook, then you need to create a Facebook Canvas application.

There are two types: FBML and IFrame. From what I can tell, IFrame is now the recommended choice, as it gives you more freedom, and you should be able to use libraries such as jQuery without much trouble. See
http://www.ccheever.com/blog/?p=10

Go to the Canvas tab of your application settings in Facebook.

Canvas Page URL - this is a unique URL that identifies your application of FB.

Canvas Callback URL - this is the page that is hoovered up by Facebook and then displayed within the IFrame.

Post-Authorize Redirect URL - you can leave this blank; it is optional.

Don't worry about the other settings for now.

If you create the following .aspx page at your Canvas Callback URL:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<body class="bg-white">

[Your website content here]

    <script type="text/javascript">
    FB_RequireFeatures(["XFBML"], function() {
        FB.Facebook.init("[YOUR APP KEY]", "channel/xd_receiver.htm");
    });
</script>

</body>

</html>

You can also use FBML in this page, to pull through profile specific information.

And that's about it. These are of course only the basics, but you should now be able to create your own applications within Facebook, or integrate Facebook into your own site to provide an enhanced user experience.

As you may have noticed, I haven't mentioned the .NET Facebook API wrappers - we didn't need them as we didn't do a whole lot of Facebook integration. These wrappers are notoriously unreliable, but take a look at http://facebooktoolkit.codeplex.com/ as this seems to be well maintained.

Facebook Connect not working in IE - make sure the namespace declaration is correct

Your DisplayName here! — Tue, 06 Apr 2010 15:14:19 GMT

Integrating Facebook Connect with a website, we had a problem where it would work fine under FF/Chrome etc but IE could not display the FBML correctly. It was still functioning, but instead of the Connect to Facebook button appearing it was only able to render the text, and any other FB content (such as fb:name) was not displayed.

The best part of the day was wasted until we found this http://axonflux.com/fb-connect-not-working-in-ie-f

Make sure that the page where your FB stuff lives has the following namespace declaration:

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"

Synchronise Facebook Photos with your Phone Contacts

Your DisplayName here! — Sat, 11 Jul 2009 12:08:26 GMT

I've been looking at developing Facebook applications recently, and came across this podcast from Scott Hanselman.

In it, he speaks to Mel Sampat, who has created a great application which synchronises your Facebook Friends with your Outlook Contacts, pulling down the Profile Photo. You can then sync this with your phone (or Outlook->Google->iPhone) so you have a decent photo contacts book.

Check it out here.

duncanMgunn.com - Facebook