Both the website and the Facebook application allow users to create a free dating profile, upload personal photos, search for local singles, and send private messages. The website also offers the added benefit of a public dating forum where users can participate in public chat, as well as a collection of frequently updated dating articles in the blog.

Because Black Book Singles is different from most Facebook applications in that it is first and foremost a third party website that plugs into Facebook as an aside, getting started is a bit different than what Facebook users are used to. When first accessing the application, a user must register an account by creating a username and password, as well as providing an email address. The information is automatically associated with the user’s Facebook account, however, meaning that the user is automatically logged into Black Book Singles if accessing the application through Facebook. The username and password is only required if the member decides to access his or her account directly through the BlackBookSingles.com domain in the future.

Once a user has registered a new or imported an existing account, creating a dating profile is relatively easy. Most information can be selected from drop-down boxes and checkboxes, including gender, location, lifestyle information, interests, and religion. Other personal information — including name, a dating headline, and an about me section — must be manually entered by the user.

After creating a basic profile, the member is given an option to add personal photographs to his or her profile. Within the Black Book Singles Facebook application, this can easily be done by clicking on pictures that have already been uploaded into Facebook albums. One of the benefits of the Black Book Singles website is that additional photos from the user’s computer can be uploaded. Additionally, Facebook users have a “default” profile picture automatically assigned, while users accessing the website directly can specify which photo should be used as the default.

The final appearance of a dating profile that includes several photos can be seen below. Information is broken into sub-sections making it easy for visitors to scan, with images and action links to the right of the main profile content.

Finding other members is as easy as typing in the first few letters of the location you’re interested in searching around, then choosing the most suitable options from the drop-down menu that appears. Details regarding gender and age range can be specified to ensure the results align with your interests.

The search results provide a simple overview of matching users, including the user’s headline, name, age, and distance from the search location. Clicking on the profile picture or “View Profile” link leads to the full profile view. Additionally, each profile summary includes a link to send the member a message or add the member to your list of favorites.

In all, Black Book Singles is a great service for the price. It may not offer all the fancy details and finishing touches that a costly dating site like Match.com or eHarmony has, but it is free for everyone to use and covers all the basic functionality necessary to make new connections and meet new people.

Share This

The Run Around

Since seeing the first demo video of Facebook Connect during Mark Zuckerberg’s f8 ‘08 Keynote, one of the my initial questions that came to mind is how the back-end database must be structured for this to work efficiently and effectively. Fortunately, Facebook came along and offered The Run Around sample web app, which demonstrates how to use the client and includes example code. With the sample code came the users table definition, which can be seen below.

CREATE TABLE `users` (
  `username` varchar(255) NOT NULL,
  `name` text,
  `password` text,
  `email` text,
  `fb_uid` int(11) default NULL,
  `email_hash` varchar(64) default NULL,
  PRIMARY KEY `username` (`username`)
);

From this, it’s clear that the username is the primary key for any given user, as would generally be expected. However, considering that the username is in fact the primary key, and keeping in mind that users are allowed to log in using Facebook data alone via Facebook Connect (thereby not needing a username), I became curious about what kind of username a Facebook user is assigned when attempting to log in using this method.

After a bit of searching, I came across the createFromFacebookUID function within the lib/user.php file. This function (less some unnecessary lines of code) can be seen below.

static function createFromFacebookUID($fb_uid) {
  // *extraneous code stripped out for simplicity*
  $user_params['username'] = 'FacebookUser_' . $fb_uid;

  // *more extraneous code stripped out for simplicity*

  // write to the db
  if (!$user->save()) {
    return null;
  }

  return $user;
}

From this, it can be seen that the username field is nothing more than a hack for Facebook users. In fact, someone not using Facebook could come along and create a user by the name of “FacebookUser_12345″, at which point the person registered under Facebook UID 12345 could hijack that person’s account simply by logging in via Facebook Connect. While this is not a likely scenario, it is still a scenario that does exist in the system and is thus a design flaw.

While thinking about ways to resolve this issue, I considered the following approaches.

Potential Resolution #1: Create a Separate Table for Facebook Users

My initial thought was that this could be corrected simply by having two tables: a users table (containing people who registered through the site) and a facebook_users table (containing people logging in via Facebook Connect).

CREATE TABLE `users` (
  `username` varchar(255) NOT NULL,
  `password` text,
  `name` text,
  `email` text,
  PRIMARY KEY `username` (`username`)
);

CREATE TABLE `facebook_users` (
  `fb_uid` bigint(11) default NULL,
  `email_hash` varchar(64) default NULL,
  `name` text,
  `email` text,
  PRIMARY KEY `fb_uid` (`fb_uid`)
);

At first this seemed like a viable approach until I considered that other data in the database is going to be associated with a user. For example, a website that allows users to review movies might store each user’s reviews in a relational table named something like user_reviews, which includes two foreign keys pointing to the users and movies tables respectively.

Now that we’ve introduced the facebook_users table, however, we quickly see that reviews data cannot be associated with persons using Facebook Connect unless we either create a secondary facebook_user_reviews table — which is not feasible as all interfaces interacting with reviews data must be updated — or somehow associate the facebook_users table with users.

Potential Resolution #2: Associate Facebook Users Table with Users Table

The previous statement brings me to my second though on how this conundrum might be approached. Simply associating facebook_users with users allows for us to use JOIN conditions across multiple tables, thereby allowing other user data associated with the application (such as the aforementioned movie reviews) to be retrieved and associated with a Facebook user. The table structure implementing this concept can be seen below.

CREATE TABLE `users` (
  `username` varchar(255) NOT NULL,
  `password` text,
  `name` text,
  `email` text,
  PRIMARY KEY `username` (`username`)
);

CREATE TABLE `facebook_users` (
  `fb_uid` bigint(11) default NULL,
  `email_hash` varchar(64) default NULL,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY `fb_uid` (`fb_uid`)
);

Unfortunately, this method requires a Facebook user logging in via Facebook Connect to register an account on the website as the two tables are directly related. As such, a user is unable to take advantage of what Facebook Connect is intended for: one-click login. The user would need to both log into Facebook Connect and register/login with an account on the third party website.

Potential Resolution #3: Create a Separate Account Table that Users and Facebook Users Associate With

My third and final thought on how to approach this difficulty is to create a basic account table with two separate tables associated with it: one with login credentials for when visitors create an account, and another with Facebook UID’s that can be used for Facebook Connect. The below SQL table definitions specifically outline my intentions.

CREATE TABLE `accounts` (
  `id` int(11) AUTO_INCREMENT NOT NULL,
  `name` text,
  `email` text,
  PRIMARY KEY `id` (`id`)
);

CREATE TABLE `users` (
  `username` varchar(255) NOT NULL,
  `password` text,
  `account_id` int(11) NOT NULL,
  PRIMARY KEY `username` (`username`)
);

CREATE TABLE `facebook_users` (
  `fb_uid` bigint(11) default NULL,
  `email_hash` varchar(64) default NULL,
  `account_id` int(11) NOT NULL,
  PRIMARY KEY `fb_uid` (`fb_uid`)
);

Using this structure, whenever a person logs in using Facebook Connect, two records will be inserted into the database: one record in the facebook_users table, and one in the accounts table. Similarly, whenever a person registers a new account on the website, two records will be inserted into the database: one record in the users table, and one in the accounts table.

The benefit of this approach is that all other data in the database can still be associated with an account. The account is then either associated with a Facebook user or a registered site user depending on how the person logged into the site during the visit.

Additionally, because the accounts table is utilized regardless of how the user logs in, and because data specific to the login method is kept in a separate table for each login type, more types of login methods — OpenID for example — can easily be implemented into your website in the future.

In Conclusion…

It is my personal belief that the final suggestion provided in this article is the best route to take for most websites wishing to implement Facebook Connect. Depending upon the goals of your website or business, though, you might not need to go the extra mile. It is important to note that if you do decide implement one of the “easier” implementations, such as the one included with The Run Around, then you will be making things extremely difficult for yourself in the future should you change your mind. While I suggest that something similar to the final table definitions be used within your own web projects that are implementing Facebook Connect, it is not the only right or only working solution.

Share This

The event is set up with three tracks, each of which will contain four sessions for a combined total of twelve sessions.

The first track, “User Experience”, will include the following sessions.

Introducing the New Facebook Profile & More
In this session, you will learn everything you need to know about the new Facebook profile, Feeds and other changes to Facebook Platform, including new authorization and user permissions. Learn how to successfully modify your applications to take advantage of the new integration points.

Integrating Facebook Connect into your Website
Since 2006, Facebook Platform APIs have supported integration into your website to make your site social. In this session, we will walk through the new features that will be available with Facebook Connect. Learn how Facebook Connect can help you socialize and streamline your website using trusted authentication, real identity, friends access, and dynamic privacy.

Building Great Applications on Facebook
Over 24,000 applications have been launched on Facebook Platform in the last year. In this session, we’ll discuss guiding principles and best practices for designing great social applications that stand out. Hear from other developers on what they’ve learned and done to create compelling user experiences.

Design and User Experience at Facebook
At Facebook, we are constantly working to make Facebook easier and more efficient for more than 80 million active users. Hear directly from the Facebook Design team on how we think about design and user experience at Facebook and how you can apply this to your applications for a seamless integration. The team will cover how Facebook designed its earliest applications such as Photos and Events.

The second track, “Technical”, will include the following four sessions.

Advanced App Building
It’s easy to build a simple Facebook app in a couple hours, but successful developers spend a lot of time understanding the ins and out of Platform. In this talk, engineers behind Facebook Platform will reveal the inside tricks for putting together a responsive, robust application. Fast track your application by learning the caching features of FBML, advanced features of FBJS, smart uses of the API, and more.

Feed and Social Distribution
One of the most powerful features of designing for Facebook Platform are the social distribution channels. With the new Facebook profile, learn how to design great Feed stories that take advantage of Feed templates and new story sizes. We’ll walk through examples of useful requests and notifications – and not-so-useful ones too.

Building to Facebook Scale
Learn how Facebook scales some of our key services to handle hundreds of millions of requests per day. We’ll talk about our News Feed system and how it fits into the rest of our site’s architecture through tools like Thrift and Scribe.

Made for Mobile
Mobile devices are opening up and creating new opportunities to build Facebook applications that extend beyond the Web. We’ll talk about methods for mobile development and engage in a Q&A on how to get started.

The third and final track will cover “Business”, a topic that many developers tend to struggle with when attempting to profit from the platform.

Building a Business on Facebook / Metrics & Analytics
In this session you will learn everything about how to build a business on Facebook Platform and measure your success. Hear first-hand from developers who are doing it and learn more about the vision behind creating businesses on Facebook Platform from Facebook Director of Monetization, Tim Kendall. Developers will explain the different approaches they’ve taken to building business models, such as advertising, e-commerce and consulting. A Facebook Platform engineer will join to provide a deeper look at the metrics available on Platform for measuring user and business growth.

Marketing your Application on Facebook
You’ve developed an application. Now what? This session will cover end-to-end marketing and distribution of your application on Facebook, from leveraging deep understanding of metrics and analytics to optimize your user experience to leveraging Facebook marketing tools. We’ll guide you through the tools that will help you optimize your distribution and share some best practices to increase the virality of your application.

Entrepreneurship on Facebook Platform
The tools for success as an entrepreneur have never been more accessible than with Facebook Platform. Learning how to raise funding, build a team, and achieve success as an entrepreneur is an important part of building a business on Facebook Platform. In this session you’ll hear from industry luminaries in venture capital and seasoned, multi-company entrepreneurs that will reveal the secrets of their success on Facebook Platform.

fbFund: A Look Inside — Seeding Opportunity on Facebook Platform
Learn about the inner workings of fbFund and see what the grant winners are developing. FbFund representatives will share insight into the selection criteria, goals and the lessons learned in building an all-new fund for Facebook Platform. Learn more about the fbFund Developer Competition where your application can earn up to $250,000.

Check the official f8 ‘08 page for more information, and register for the event here.

Share This

This article provides an excellent overview of how profile tabs will be laid out, what type of application data will appear in what tabs, profile column layouts, and more. Hopefully this article will help to ease overwhelmed developers whose applications will be affected by these changes.

Share This

Since the Facebook Platform’s public announcement and launch on May 24th last year, the Platform is quoted as growing in the following ways.

• 400,000+ Developers in over 160+ Countries
• 24,000+ Applications in the Directory
• Over 95% of our 80 million active users have added at least 1 application to their profiles

To follow upcoming announcements regarding event details, check out the official f8 2008 page. You can even request what type of content you would like to see this year.

Share This

Unlike the typical HTTP “pull” structure in which the server sends data only when the client requests it, this change will give the appearance as being a “push” structure to the end users. The new LiveMessage wiki entry explains how easy the feature can be implemented. In order to receive messages, a callback handler must be set up in the following manner.

// listen for messages sent with the "game_move" event name
var livemessage = new LiveMessage('game_move', function(data) {
    // successfully received a message - "data" is a JSON object.
});

Sending a message is equally easy to implement.

var livemessage = new LiveMessage('game_move');
var data = { from : from_uid, msg : message_text };
livemessage.send(recipient_uid, data);

Given that each LiveMessage is set up with an event name (”game_move” in the above example), it seems that setting up multiple message types would be easy to achieve, simply by providing a separate event name for each.

Clearly, such a unique addition to the Facebook Platform could result in a wave of new types of applications previously unthought of or simply impractical given the technology available.

Share This

With the exception of the FBML parser, Facebook Open Platform is licensed under a Common Public Attribution License (CPAL), which follows the Mozilla Public License (MPL) with the following two additions.

1. That you include attribution to Facebook on any modifications.
2. That network deployment, or making modifications available over the network, counts as distribution, which makes the license appropriate for Web services.

The platform can be downloaded on the official Facebook Open Platform page.

Share This

First, within your application’s about page, click the “Edit Application” link located near the top-right. From the edit application page, scroll all the way down to the bottom, where you should see a link for “More Applications”. Click the “Browse More” link, as seen in the screenshot below.

This link will lead to recent applications available to Facebook Pages. Instead of sorting by most recent, click the “By Facebook” link located to the right. Scroll down once this page loads, and you should eventually see a link for “Static FBML”.

Add this application to your desired application, then navigate back to your applications’s about page. Find the box labeled “FBML”, and click the “Add FBML” link within it. You’ll then be presented with a simple 2-input form.

The first input allows you to enter a title for the box appearing on the profile. You might choose something that will attempt to grab the user’s attention, such as “More Fun Apps!”

The second input is a multi-line text box, which is used to enter the contents of the body FBML that should be rendered within the box on the about page. For this, you’ll want to create a list of applications you which to promote. You’ll likely want to include an image of the application to provide visual stimulus to the user in hopes of converting them into users of these other apps. This can be done using an infinite number of approaches, but a general outline has been provided below to give you a head start. This FBML outline simply defines a product region that includes left-aligned application icon, a linked application title, and a short description below the title.

<style>
div.app { border-bottom:1px solid #d8dfea; margin:3px 0px; padding-bottom:3px; }
div.app img { padding:3px; float:left; }
div.app div.detail { padding-left:25px; }
div.app div.detail a { font-weight:bold; }
</style>

<div class="app">
	<a href="http://apps.facebook.com/ad-libs/">
		<img src="http://photos-a.ak.facebook.com/photos-ak-sctm/v43/52/7714537540/app_2_7714537540_9111.gif"/>
	</a>
	<div class="detail">
		<div><a href="http://apps.facebook.com/ad-libs/">Ad-Libs!</a></div>
		<div>Create hilarious stories to share with your friends!</div>
	</div>
</div>
<div class="app">
	<a href="http://apps.facebook.com/favorite-games/">
		<img src="http://photos-c.ak.facebook.com/photos-ak-sctm/v43/22/5739766474/app_2_5739766474_1763.gif"/>
	</a>
	<div class="detail">
		<div><a href="http://apps.facebook.com/favorite-games/">Favorite Games</a></div>
		<div>Watch trailers &amp; gameplay videos, rate the latest games, and read &amp; write reviews!</div>
	</div>
</div>

The resulting output can be seen below, with an example of how it appears in the wide column to the left, and an example of the narrow column to the right.

While the above example does make use of application images stored on Facebook’s servers, Facebook has recommended in the past that, because they may change their server configurations at any time thus resulting in changing URL’s for images, applications should not directly reference these image URL’s. As such, it is recommended that you store whatever images you intend to use within your Static FBML at a remote location that you know will continue to be accessible by Facebook.

One additional consideration is to add a reference to the querystring of your target URL’s in order to track conversion success. In the above example, one of the URL’s used is http://apps.facebook.com/ad-libs/. If instead, the URL were http://apps.facebook.com/ad-libs/?ref=static-fbml, the click could be tracked through a traffic analysis tool such as Google Analytics.

Share This

A Bit of Invite History

Inviting friends has been a controversial spot amongst Facebook application developers. The act of inviting friends is not specifically what all the controversy is about; instead, it’s how some developers have chosen to integrate their invite forms. In an attempt to create a multitude of application invitations in hopes of drawing many new users, numerous developers have made it mandatory for new users to invite a minimum number of friends to an application before the user can even interact with the application themselves. Clicking the “Skip” button on the invite form simply returned the user to the invite form once again until they either invited the minimum number of friends, or left the application altogether.

Because Facebook applications are relatively new, this technique has proven successful. Many did not realize (and some still do not realize) that this is not the way Facebook’s invite form was intended to be used, and as a result, many applications found a large number of users by implementing this design. However, over time, it resulted in a backlash from much of the Facebook community, as such a design can generally be considered to result in a poor user experience. After many complaints in various forms — including a Facebook group entitled “No, I will NOT invite 20 friends just to add your application!” that garnered much attention — Facebook has modified its platform policy such that forced invites are strictly forbidden from use.

Parts of an Invite Form

Creating an invite form consists of several key pieces. First, you must create an fb:request-form, which is processed in order to create an HTML form that is used to invite friends. Second, an fb:multi-friend-selector is needed. This is used to render the interface that enables the end user to select his or her friends that they’d like to receive an application invitation. Finally, at least one fb:req-choice is required. This creates an action button that is used by the recipient to determine what should occur (e.g. adding the application).

Basic Invite Form Implementation

The following is a very basic invite form. Please note that $facebook represents the initialized Facebook API client object, and $user represents the user ID of the currently logged in user.

<?php
// Prepare the invitation text that all invited users will receive.
$content = <<<FBML
<fb:name uid="$user" firstnameonly="true" shownetwork="false"/> wants to know what your Favorite Games are!
<fb:req-choice url="{$facebook->get_add_url()}" label="Add Favorite Games to your profile!"/>
FBML;
?>
<fb:request-form action="http://apps.facebook.com/myapp/" method="POST" invite="true" type="Favorite Games" content="<?php echo htmlentities($content);?>">
	<fb:multi-friend-selector max="20" actiontext="Here are your friends who haven't added Favorite Games to their profile. Invite them to share their Favorite Games today!" showborder="true" rows="5"></fb:request-form>

The above code creates the following output.

And, once your user clicks the “Send Invitation” button, they’ll be presented with a window similar to the following, which demonstrates how the invite request will appear when their friends receive it. Take note of the data (specifically the messages defined within the code) being populated within the form and invitation itself.

But He Already Uses This App!

If your users are going out of their way to invite their friends to use your application, it would be mutually beneficial for them to only invite friends who aren’t already using the application. Since Facebook limits the number of daily invites a user can send to friends, it would be a waste for them to invite existing users.

In order to prevent this scenario, you can take advantage of the fb:multi-friend-selector’s exclude_ids attribute. This attribute accepts a comma-delimited list of user ID’s. Any ID’s that are provided will not be available for selection to the user within the invite form.

To take advantage of this field, you’ll need to capture the list of friends who have already added the application to their profiles. This can be done with a simple FBML call, as per the following example.

<?php
// Retrieve array of friends who've already added the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND has_added_app=1';
$_friends = $facebook->api_client->fql_query($fql);

// Extract the user ID's returned in the FQL request into a new array.
$friends = array();
if (is_array($_friends) && count($_friends)) {
	foreach ($_friends as $friend) {
		$friends[] = $friend['uid'];
	}
}

// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends);
?>
...
<fb:multi-friend-selector exclude_ids="<?php echo $friends;?>"></fb:multi-friend-selector>
...

Once we combine this new code with the previous example, we’ll have a complete invite form that allows users to invite their friends without having to worry if their inviting current application users.

<?php
// Retrieve array of friends who've already added the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND has_added_app = 1';
$_friends = $facebook->api_client->fql_query($fql);

// Extract the user ID's returned in the FQL request into a new array.
$friends = array();
if (is_array($_friends) && count($_friends)) {
	foreach ($_friends as $friend) {
		$friends[] = $friend['uid'];
	}
}

// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends);

// Prepare the invitation text that all invited users will receive.
$content = <<<FBML
<fb:name uid="{$user}" firstnameonly="true" shownetwork="false"/> wants to know what your Favorite Games are!
<fb:req-choice url="{$facebook->get_add_url()}" label="Add Favorite Games to your profile!"/>
FBML;
?>
<fb:request-form action="http://apps.facebook.com/myapp/" method="POST" invite="true" type="Favorite Games" content="<?php echo htmlentities($content);?>">
	<fb:multi-friend-selector max="20" actiontext="Here are your friends who haven't added Favorite Games to their profile. Invite them to share their Favorite Games today!" showborder="true" rows="5" exclude_ids="<?php echo $friends;?>"></fb:request-form>

Voila! Your users can now invite their friends to try out your application!

Share This

The much anticipated MySpace Developer Platform has officially opened up, allowing third party developers to create custom applications for the most popular social network much like Facebook’s Platform has permitted since last May.

While many social networks have been launching development platforms in recent months, this launch will be considered especially important to many developers. On top of MySpace being the most popular social network, the site has also launched to all developers at the same time. Other social networks — such as Facebook and Bebo — first provided access to their platforms to the likes of Slide, RockYou, and similar development companies, giving them what many consider to have been an unfair advantage in the playing field.

Although developers can begin creating and testing applications, MySpace’s user base does not yet have access to applications. Once the platform publicly launches next month, all published applications will become accessible to MySpace users.

According to the official MySpace Developer Platform documentation, here’s how the company defines an application and summarizes how it all works.

A MySpace Application is any software the utilizes the MySpace Developer Platform (MDP) to access user data, perform actions, and to integrate this data and associated actions into MySpace pages. MDP supports the development of applications based on the OpenSocial model of acces to data and functionality on participating networks.

The documentation explains that there are six parts to a MySpace application.

• Application Profile: the page where members come to learn about and install your application.
  (Facebook Equivalent: About Page)
• Application Canvas: a new page on MySpace that is dedicated to applications.
  (Facebook Equivalent: Canvas Page)
• Apps Module: provides links to the Application Profiles of the apps members have installed.
  (Facebook Equivalient: Left Navigation Bar)
• Applications Manager: allows users to view installed apps, change application settings, and uninstall applications.
  (Facebook Equivalient: Application Privacy Page)
• Profile Modules: display information, content and functionality generated by your application directly on a member’s profile.
  (Facebook Equivalent: Profile Box)
• Homepage Modules: display information, content, and fuctionality generated by your application directly on the left-hand column (300px) of a members’s homepage.
  (Facebook Equivalent: Profile Box*)

Application monetization sounds very promising according to Mashable.

In terms of monetization, the revenue share hinted at last week won’t be available initially. Instead, developers will be able to control 100% of ads on their “canvas page,” where most of the main functions of applications will live. In the future, developers will be able to utilize the same tools currently being beta tested by MySpace, which allow advertisers to place “hyper targeted ads” based on user’s profile characteristics.

MySpace has had many significant improvements to its site recently. It will be interesting to see how applications affect the popular social network in addition to observing how its users react.

* The MySpace Profile Module is only viewable to the profile owner. While Facebook does not have specific regions that are exclusively accessible to profile owners, third party developers can utilize the fb:visible-to-owner FBML tag within a Profile Box to display content only to the profile owner.

Share This