You should have already registered an app for migrating Our 1st FB App to use the JavaScript SDK. Unlike building canvas app where we can use FBML to render UI element like tabs, input form etc, we have to do it ourselves in the web pages of our web sites.

To facilitate your testing and following the tutorials, you can download (via the link provided below) the initial project files and upload them to your web server's folder as specified in your "Connect URL". The project files include the css style sheet, the app logo image file and 2 version of index.php and a menu file.

Note that before downloading starts, you need to complete a survey provided by CPALead.

Sorry that I won't accept email asking for a copy of it. If you have difficulties in completing the surveys or do not want to do that, you can consider subscribing to our mailing list service. For USD29.99 per year, any eBook and free demo application source code packages published here will be sent to you. Payment can be made via PayPa (my paypal account is takwing@graduate.hku.hk). For details, please send email to takwing1hk@yahoo.com.hk.

Before uploading the files to your web server, please remember to change the appID in both index.php and index_async.php as shown below.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
 FB.init({appId: '134893243199526', status: true, cookie: true, xfbml: true});
</script>

 

Testing the Initial Setup

Simply visit your web site (for my case, it is http://www.takwing.idv.hk/facebook/demoapp_jssdk/) and you should see the following web page.

Facebook dashboard header

 

Do the setup first, and we will discuss the JavaScript SDK in more details very soon. Stay tuned for the next tutorial......