This f8 Terralever was selected by Red Bull as one of only a handful of launch partners that would have the opportunity to integrate Facebook Connect (announced  during the keynote) with some of their properties.  As you can imagine were were very excited about this opportunity, and more excited about what Connect will mean to all of our clients.

For those unfamiliar with the announcement, Facebook connect gives  external website the ability to integrate Facebook users  directly into there site.  This integration, allows a site to extend its user bases from those that already exist, to any of the over 100 million Facebook users.  With this integration a site instantly has access to customizing content based on that users profile, and even more important, that users entire social graph. Imagine the possibilities.

So what does this mean to Red Bull?   Below you we see a screen shot of a new and exciting interface that the team at Terralever has created for www.redbullusa.com. This interface leverages connect as a way to change the way in which users view content.

The team at Terralever did an amazing job at producing this example.  In just a few weeks we took four disparate sites (surfing, skating, skiing, and snowboarding), and aggregated each sites content and comments, into Red Bull USA.  The really cool part is that using Connect, we can now allow users the ability to read and comment on content they may never have stumbled upon.  Look for this to all go live some time this summer.

With over 67 million active users, Facebook will always be suspect to hackers looking for a way to circumvent its user privacy.  For reasons beyond my comprehension, our generation of Internet users have little trepidation about what information we place in the hands of others.   When Facebook made the decision to open ups its platform they put upon them self a huge risk that someday the breach will be very serious.   Privacy is not a setting, but a caution we should all take before we choose to upload a private photo or other personal information to the 5th most-trafficked website in the world .

As our company delves deeper into creating applications for the Facebook platform, we have realized that analysis of users behavior is extremely important. It is no secret that very few companies have mastered how to create a success Facebook application. Those that have seen moderate success do one thing consistently, they all leverage the social graph, but outside of that there is no clear blue print to success. Using techniques such as user tracking we can begin to tune the way a Facebook applications evolves as a way to change its presentation based on the behaviors of its users.

Integrating analytics into a canvas view it is pretty simple, slap in some Google analytics and you can begin to monitor and tune user traffic. The profile view is much more challenging. In the profile view an applications FBML and images are cached and delivered from a Facebook server. Using traditional Google analytics in the profile is not possible. I hope someday Facebook will show us how many users view and interact with a users profile, but until then we need some way to track a users interaction with our application. Back in October Facebook gave developers the ability to do some restricted Javascript and Ajax. With these two features, we can begin to track what links a user click and how those clicks relate to a users interaction with the canvas view. The following snip of FBJS will post a small JSON array to a external location, which in turn will asynchronously store that data for later analysis.

1
2
3
4
5
6
7
8
9
10
11
12

<script><!--
    var uid = '111111';
    function track(a, pid, method) {
        // ajax query
        var ajax = new Ajax();
        ajax.responseType = Ajax.RAW;
        ajax.requireLogin = false;
        var queryParams = { "pid" : pid, "method" : method, "uid": uid, "source": "profile"};
        ajax.post("http://url.com/tracker.ashx", queryParams);
	return true;
    }
//--></script>

To enable this tracking we must add the following callback attached to that elements onclick event. In our example we are attaching tracking to a link which provides an external vendors affiliate link for a series of consumer products.

One caveat, this approach only works correctly in Firefox if your <a> target is set to blank. If you need to use the same window, the only approach I have found is to use the anchor that is passed into the track method combined with the ajax.ondone callback to set the document.setLocation to the anchors href.

1
2
3
4
5
6

ajax.ondone = function() {
var href = a.getHref();
   if (href.length > 1) {
      document.setLocation(a.getHref());
   }
}

1

<a href="http://www.amazon.com" onclick="track(this,12345,'buy');" class="buy" target="_blank">BUY</a>

On the back end we have a page that is waiting for this specific Ajax post, and will return a 1 for success and a 0 for failure. It is extremely important to keep this tracking as efficient as possible. Facebook Ajax has a <10 second maximum timeout on all requests. In our design, the storing of the data is done using a asynchronous thread that queues up the incoming requests in hoped to avoid Facebook having to wait for us to store the data correctly.

Download: Anatomy of a Facebook Application
Date: November 14, 2007
Location: Tempe Center for the Arts

1
2
3
4
5
6
7
8
9
10
11
12
13

actor_id: 555555555
title_template:   {actor} <fb:if-multiple-actors>are<fb:else>is</fb:else>
           </fb:if-multiple-actors> exploring the web’s premier collection of 
            student-produced digital media Made on a Mac. 
title_data: 
body_template: <b>"{title}"</b> Made by <i>{author}</i>  
           - See it at the <a href="http://url/item.php?itemID={id}">
           Apple Student Gallery</a> 
body_data: {"title":"Lost", "author":"Jared A. Jaworski","id":13243} 
body_general: 
image_1: http://url/resize3.php?image=/109.jpg 
image_1_link: http://url/resize4.php?image=/109.jpg 
target_ids:

As illustrated in the sample, if multiple users publish stories where both the title_template and body_template markup strings are identical, as well as the title_data and body_data arrays, then Facebook may aggregated the stories together. When this occurs, the {actor} token is replaced with the names of all of the users whose actions are being aggregated. Also note, that the only valid HTML tags supported in the template is the <a>, <b> and <i>.

For more information check out Facebooks wiki at Feed.publishTemplatizedAction

To see more details and RSVP, follow the link below:
http://www.facebook.com/n/?event.php&eid=5321528989

For a recent client we were asked to display the first few entries from a RSS feed within a users profile. All Facebook users would see the same entries, until the RSS feed changed. Here is the PHP we used to set a users FBML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function render_ref_fbml($uid, $rssItems) { 
  global $facebook; 
  try { 
    // Set FBML Cache 
    $refFbml = render_narrow_fbml($id, $rssItems); 
    $refFbml .= render_wide_fbml($id, $rssItems); 
    $facebook->api_client->fbml_setRefHandle('RssFbml',$refFbml); 
    // Set Profile FBML 
    $fbml = render_css_style(); 
    $fbml .= '<fb:ref handle="RssFbml">'; 
    $facebook->api_client->profile_setFBML($fbml, $uid); 
    } catch (Exception $e) { 
      error_log($e->getMessage()); 
    } 
}

In a standalone php file we then created a similar function which updated only the FBML stored under the “RssFbml” handle.

1
2
3
4
5
6
7
8
9
10
11

function render_ref($rssItems) { 
  global $facebook; 
  try { 
    // Set FBML Cache 
    $refFbml = render_narrow_fbml(0, $rssItems); 
    $refFbml .= render_wide_fbml(0, $rssItems); 
    $facebook->api_client->fbml_setRefHandle('RssFbml',$refFbml); 
  } catch (Exception $e) { 
    error_log($e->getMessage()); 
  } 
}

This php file uses an infinite Facebook session and is called every 30 min by a CRON job.

1

30 * * * * php -f /var/www/rss.php

]]> http://joel.neubeck.net/2007/10/facebook-fbml-ref/feed/ 7