Facebook is a representation of actual world. Gone are the days of emails and phones we used to keep connected with each other. We use facebook for all sort of things. Would it be better if I can access my learning materials without leaving facebook. Adobe Captivate is leading tool to create learning content. In this blog entry I am covering how to put an Adobe Captivate swf file as a facebook application.
To get some familiarity with facebook application development watch this video
To get started with few more concepts read http://developers.facebook.com/docs/guides/canvas/
Following are broad steps you need for putting a captivate swf as a facebook app.
- Set up a facebook application which will have application page and other tabs. It will call the actual application which is in our case a captivate swf.
- Copy facebook sdk files to your webserver directory. Maintain proper directory structure. Facebook app will call the index.php kept at this directory. Index.php will have calls to render the captivate swf or any html file alongwith facebook API calls. These API calls can be part of Captivate swf also through widgets but for this blog entry we are not going in that path.
- Have commands to call captivate swf inside index.php
- Publish the application for public use when you are done. This step needs to be completed from facebook people. We are also not concentrating on this step for now.
How to set up a facebook application –
- Go to http://www.facebook.com/developers/createapp.php and fill out the details
- You get the various tabs to fill in the data. Not all are needed. Fill in whatever you want. But notice API key and Application Secret string. You need it when you want to call facebook APIs.
- Go to Canvas tab
- Give a canvas page URL. It is the link which anyone can access directly from outside to reach your application. For ex – http://apps.facebook.com/captivateapp can directly take you to the application page. Of course there are other ways to land there.
- In canvas callback URL give a location where you will be keeping your application. For ex – http://cpfb.webfreehosting.net/facebook where “facebook” is a directory created at root location of my webspace. The directory name could be anything. Most important point for server is that they should support php. Incidentally my personal paid web hosting server did not support this and it took me long time to realize. So I went on to find a free web hosting solution which can support php and allow me to put my own files through the non linux/unix commands where also I was very new. For this purpose I discovered http://webfreehosting.net which allowed me to do it all free without any waiting period or restrictions. But cannot vouch completely for this website as the swf access through facebook app worked for some time but in the end it just stopped working.
- In same “Canvas” tab select “fbml “ as render method.
- After saving your changes you will get a page with key information
Copy facebook sdk files to the directory inside your webserver. In our example this is at http://cpfb.webfreehosting.net/facebook
- Facebook used old REST API till very recently so most of the information you will get on web will be outdated. It uses Graph API for which you will find very less information.
- Go to http://github.com/facebook/php-sdk/
- Click on “Download Source”
- Select zip or rar – any format you are comfortable with. You will get facebook-php-sdk-v2.1.1-0-g08909f3.zip file
- Upload it to webserver and maintain directory structure like this in your specified directory. In our case it was “facebook”
- Move example.php which is in examples folder to one level up and rename it as index.php so that whenever http://cpfb.webfreehosting.net/facebook is called index . php is invoked.
- Copy captivate swf in the “facebook” directory. Let us say it is myCaptivate.swf
- Open index.php for editing. The file should look like following. Notice the second line. It should point to correct facebook.php as we have moved index.php from some other folder.
- Notice the API key and Application secret we have put in new Facebook() function call.
- The last line is to call Captivate swf file
<fb:swf swfsrc=’http://cpfb.webfreehosting.net/facebook/myCaptivate.swf’ allowscriptaccess=’always’ bgcolor=’#ffffff’ wmode=’transparent’ flashvars=” width=’500′ height=’400′>
With these changes accessing http://apps.facebook.com/captivateapp will play “myCaptivate.swf” inside facebook. This can also be accessed from “Go to application” Button on application page so that facebook users don’t have to leave their environment to access any captivate course.
For anyone to access this application it has to go thorugh the approval process of facebook which I am not covering in this entry.
This is just starting moment for Captivate swf on facebook. To use full functionality of facebook applications ecosystem facebook Graph API can give access to many of the data users has. It can send notifications , write on walls etc. The possibilities are endless – To get a feeling of what can be done please start at http://developers.facebook.com/ and wait for more updates on this space here.