Adding Facebook Detail

By
Fred Leeflang
– February 10, 2010Posted in: coding, social
email

Recently I published a short article on how to create your own Facebook application and a somewhat longer article on implementing some basic code into it. Today I’ll tell you how to get some more Facebook gadgets in the application to make it more enticing for people to share it with others. I’ve touched up the HTML and added to the functionality since the most recent article and won’t be describing much about that process as I assume that most people reading this will be familiar with PHP but are more eager to learn about embedding Facebook functionality in their own PHP application.

Facebook Hooks

So we now have a contest that allows people to enter project names, change their suggestions, vote on suggestions or change their votes. All of these events are potentially interesting to people who participate in the contest. Additionally, when people suggest a projectname, they may want to let their friends know they did and invite their friends to vote for their suggested project name. While it’s very easy to develop an application that does these things on a facebook server itself I’ve chosen to let my application to run in an iframe. This makes it considerably more difficult to get it to work as we need to enable something called XFBML for this.

Setting up XFBML is not very hard to do as there’s an excellent writeup on the Facebook Wiki called ‘Connect/Setting up your Site‘ but I still found it somewhat tricky to do so I’ll describe the initial setup in some more detail in this article such that it’s very specific for this application instead of the general setup on the Wiki page. After we’ve setup Facebook Connect it gets much more comprehensible to do things with it.

Modify Your Application

First, the Facebook application I created on Facebook Developer needs to be configured to use XFBML. You need to go into ‘Application Settings’ -> ‘Edit’ for this. By default you will be shown the ‘Basic’ tab but you need to go to the ‘Connect’ tab. The most important thing to set there is the ‘Connect URL’ which I set to http://wordpress.3dn.nl.

To be quite honest I’m not sure what it’s intended for! Something that needs to be set up after this is an xd_receiver.htm file and at first I thought it would need to be in the ‘Connect URL’, however this is not the case as the location of the xd_receiver.htm file gets specified elsewhere later on.

So the xd_receiver.htm file is just a small file that has these contents:

<!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" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>

There’s nothing site specific about this file as you can probably tell. The next thing to do is to modify the HTML header. As you may have noticed if you checked out my sources from Subversion (https://secure.dutchie.org:444/svn/trunk/idmcontest) I set up my HTML header for all the files I serve in a single file called head.inc.php so this was fairly easy to do and it’s all in here:

$page = <<<EOM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The next thing that needs to be done is equally simply done in the head.inc.php file, which is including Facebook’s API library’s feature loader script:

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

EOM;

Finally we get to the point where we tell Facebook where out xd_receiver.htm really sits by running a function from the above mentioned API library. This call needs to be made from the bottom of the page and it will render the XFBML code in the body of the document to have actual contents instead of just the markup. As you may have guessed from me using a head.inc.php there’s also a foot.inc.php from which I will run this function call:

$page .= <<<EOM
 </div>
 </div>
 <script type="text/javascript">
 FB.init("6082487783cacb849db9e382f1ef92bb", "/idmcontest/xd_receiver.htm");
 </script>
 </body>

So that’s quite a bit of stuff to do to get this all to work! However, after this it’s easy to do some really nice things with the quite powerfull XFBML.

Adding an Invite

So one of the reasons for me to try and rewrite this application as a Facebook application is the potential that people will ask their friends to vote on their suggestion. As long as the method to vote is easy enough, most people will be likely to do so.

This is actually relatively simple to do with the XFBML configured, it almost looks exactly like FBML:

if ($addinvitefriends) {
 // Retrieve array of friends who've already authorized the app.
 $fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user_id.') AND is_app_user = 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 =
   "<fb:name uid=\"".$user_id."\" firstnameonly=\"true\" shownetwork=\"false\"/> has started using <a href=\"http://apps.facebook.com/idmcontest/\">3DN IdM Contest</a> and " . $invitemsg .
   "<fb:req-choice url=\"".$facebook->get_add_url()."\" label=\"Put 3DN IdM Contest on your profile\"/>";
 $page .= <<<EOM
 <fb:serverFbml style="width: 640px;">
   <script type="text/fbml">
     <fb:fbml>
       <fb:request-form
         action="invite.php"
         method="POST"
         type="XFBML"
         content="
EOM;
 $page .= htmlentities($content,ENT_COMPAT,'UTF-8') . "\">\n";
 $page .= <<<EOM
         <fb:multi-friend-selector
           actiontext="Invite your friends to vote:"
           exclude_ids="$friends">
       </fb:request-form>
     </fb:fbml>
   </script>
 </fb:serverFbml>

EOM;
}

The $addinvitefriends variable is set when a new project name is suggested so that’s when we want to display the invite box. Line 2 through 15 actually connect to Facebook’s database using the fql_query() method, so it does a SQL select to find out which friends are already using the application so as to prevent invites to be send repeatedly. Frequently Facebook itself will impose a maximum on the number of friends you can invite but it’s possible to invite more people the next day.

Posting Updates on somebody’s Wall

In the next and last article in this series I’ll describe how posting a vote or a new contest leader on somebody’s wall could entice people to ask more of their friends to vote.

Read More

If you enjoyed reading this article you might enjoy reading the following articles in the Coding section as well:

Tags: , , , , ,

About Fred Leeflang

Hoi! Ik ben de website beheerder van de Forza website.