At their core, Facebook applications are all about social interaction. Adding a chat client to your Facebook application provides the social interaction that will drive usage. With very little effort you can add Userplane’s chat service and also generate revenue. In this post, I’ll show you how to integrate Userplane’s chat client into a Facebook application.
The main tasks for this project are creating a Facebook application, creating a Userplane account, and finally putting the two together with some code.
My Facebook application, MartiesIM II, is available at http://apps.facebook.com/martiesimii. Here’s a screen shot of the application:
I’m focusing on how to integrate with Userplane so the Facebook application I’ve developed has no functionality beyond launching the Userplane Chat client.
Userplane has two models for delivering their services, Instant Install and Integrated. The Integrated model is more feature rich; however, there is more development required to support this model. In this case, I selected the Instant Install option. Revenue sharing via Userplane money comes built in with the Instant Install model.
I headed over to Userplane (http://userplane.com), created an account, and obtained an Userplane Domain ID. At the same time, one can get code snippets for embedding the Userplane client on a web page.
The next step is to create a Facebook application. From your Facebook account install the Developer application (http://developers.facebook.com/get_started.php). Launch Developer and then click on the big “Set Up New Application” Button. You are then presented with a screen to select the application name. After selecting the application name, expand the “optional fields” tab, and select the correct options...
So many options -- none of which make sense if you haven’t developed a Facebook application before. If this is the case, spend some time looking at the developer documentation at http://developers.facebook.com.
The short story is that to create a Facebook application you’ll need a web server to host your application code. Your server’s output will be embedded into Facebook pages. This brings us to the two most important options on the Facebook new application page; namely the Callback URL and the choice of FBML or IFRAME in the canvas option. The Callback URL should point to the root directory of the application on your web server (which needs to contain an index page). The Userplane client worked for me only with the IFRAME option.
The last task is to write the application. I installed the PHP version of the Facebook client library (which is available at http://developers.facebook.com/resources.php). I coded up some PHP and located the code listed below in an index.php file under my Callback URL (http://beavercreekconsulting.com/fb/martiesimii – you can also see the application at this URL).
On line 3 the Facebook client library is imported. On lines 5-7 Facebook credentials are set. Facebook credentials are available in the Developer application on the application’s profile page.
I’ve commented out the require_login() method on line 14 which should allow you to see the application without a Facebook account. Typically, one would force the login so that the application can interact with the user’s Facebook data.
And finally, lines 35-44 are the code snippet for the Userplane client.
The Userplane Instant Install gets the integration done quickly. I’m starting to look at the Integrated Model as it should allow me to build applications with richer interaction.
001 <?php
002 // the facebook client library
003 include_once '../client/facebook.php';
004
005 // facebook api keys
006 $api_key = 'FACEBOOK API KEY GOES HERE';
007 $secret = 'FACEBOOK SECRET KEY GOES HERE';
008
009 // Ask for facebook login
010 $facebook = new Facebook($api_key, $secret);
011 $facebook->require_frame();
012
013 // Commented out so you don't need a facebook ID to see the application
014 //$user = $facebook->require_login();
015 ?>
016
017 <style type="text/css">
018 .martiessim {
019 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
020 font-size: 16px;
021 padding: 10px;
022 color: #3b5998;
023 }
024 </style>
025
026 <!-- Here starts the markup that gets embedded into Facebook pages -->
027 <div class="martiessim">
028 <div style="text-align: left; font-weight: bold; font-size: 16pt; ">
029 MartiesIM II
030 </div>
031 <hr/>
032 <table style="padding: 5px">
033 <tr>
034 <td>
035 <!-- Userplane Instant Install script -->
036 <script type='text/javascript'>
037 var up_domainID = 'USERPLANE DOMAIN ID GOES HERE';
038 var up_app = 'ch';
039 var up_initialRoom = '';
040 var up_rootURL = 'http://www.userplane.com/directory/';
041 </script>
042 <script type='text/javascript'
043 src='http://www.userplane.com/directory/api/js/ii.js'></script>
044 <!-- End Userplane Userplane Instant Install script -->
045 </td>
046 <td style="vertical-align: bottom; color: #3b5998; padding-left: 20px">
047 MartiesIM II. It's the place to chat about Marty...<br/>
048 </td>
049 </tr>
050 </table>
051 </div>
Re: Impressive
@markdeveloper
Hi, you're correct that this was a lot of bang for the buck. I'm starting to work with the integrated client. It is coming along, but it does make me appreciate just how easy it is to use the instant install version.