After reviewing how to improve the user experience in accessing an web app running on a website connected to Facebook when comparing accessing an App on Facebook, I design to rewrite the "My Friend" page instead of doing a simply migration. Perhaps some of you may want to keep the existing application behaviour, but by rewriting it, I hope to at least illustrate another way of display application content to the user based on his/her session status.

 

Application Features in "My Friends" Page

The "My Friends" page provide 3 basic application features:

 

User Experience in Accessing the "My Friends" Page in Our 1st FB App (JS SDK)

In the new "My Friends" page, the way of displaying the welcome message and the user's friend list will be kept unchanged.

However, as a session may or may not exist when a user accesses the page, the following processing will be adopted:

 

Basic Skeleton of the HTML Page

 

Displaying the Application Content

After building the skeleton of the HTML page, what we need to do is to complete the functions clearFriendList() and populateFriendList().

Try playing around with the code so as to get familiar with displaying application content by using XFBML tags.

You can test drive the demo of Our 1st FB App (JS SDK) by visiting here.