login


 
Anatomy of an App

last revision: 7/9/2008
The imeem Media Platform exposes a suite of integration points into the imeem experience. We suggest applications take advantage of as many of these elements as possible to best integrate with imeem.

Application Directory


The application directory exposes all applications that are available for users to install. Many users will look here to find interesting applications to try out. Each application will be featured with its name, list of developers, description, and associated image. Stats on popularity of the apps will also be visible. Applications in the directory can be sorted by popularity and recency, filtered by application category, as well as searched. Users will be able to click through to the about application page to find out more about the application and to install it.

Developers are encouraged to come up with a catching and descriptive name, description, and attractive image to encourage users to click through to the about application page. Keep in mind that each application must have a unique name.

About Application


The about application page, which is typically accessed from the application directory, will provide further details to users about the application. An interested user can then install the application from the about application page.

The developer is free to customize this view to encourage users to install their application. The developer can fully customize the entire left column of this page. Typically a developer uses this space to advertise the application and describe in greater detail its functionality. Developers can even provide the user a demo of the application’s functionality. The only limitation is that since the user has not yet installed the application, the app cannot get access to any imeem user data in this view.

The developer customizes the about application page the same way they customize the other OpenSocial views that are available on imeem, including the profile view and the canvas view. A developer can simply go to the developer dashboard, edit the settings of the application, and then go to the edit code tab. On that tab, the developer will see the "Preview" view, in which they can insert HTML/JavaScript.

The following dimensions apply to this view:
  • Width: 635px
  • Height: 1-2000px

My Applications


The My Applications page allows a user to navigate to the canvas pages of their applications, remove them, as well as modify the settings of their installed applications. The user can also use this page to re-order the applications that are displayed on the profile view. A user can access the My Applications page from the user profile applications tab by clicking on the "Manage applications" link.

Canvas Page


Each application is given a dedicated canvas page. This page contains the imeem header and footer, with the rest of the available space dedicated to the application. This provides maximum flexibility with the design of the application.

The majority of an application's functionality should be exposed through this view.

The canvas page offers the greatest flexibility in terms of implementation. A developer is free to use HTML/JavaScript, a hosted Flash application, or an external iframe.

The following dimensions apply to this view:
  • Width: 865px
  • Height: 1-2000px

Profile View


Each application also exposes a profile box on a user’s profile. This profile box will be displayed under the applications tab on a user’s profile. One application is displayed at a time, with a list of applications that a user can toggle between. A user can re-order the applications using the My Applications page. The My Applications page can be accessed from the applications tab by clicking on the "Manage applications" link.

The profile view does support auto-play, allowing flash applications to offer rich experiences immediately to the user.

A developer is free to implement the profile view using HTML/JavaScript or a hosted Flash application.

The following dimensions apply to this view:
  • Width: 550px
  • Height: 1-2000px