Friendster Developers Platform
OpenSocial Getting Started Guide
This step-by-step guide describes how to create an app on the Friendster OpenSocial platform.
You will need a web site to host your app XML file and your server side app if you choose to implement server side functionality.
Friendster supports OpenSocial 0.7 with the following functionality:
| People and relationships | Access to the information related to the viewer, owner and friends |
| Persistence | Store and retrieve app user data |
| Navigation | Navigating between the canvas view and the profile view |
| Fetching remote content | Remotely fetch content from your own server-side app or other web servers |
| Messages | Sending messages and notifications, posting comments to the user's friends |
| Dynamic resizing | Dynamic resizing of the profile view or the canvas view |
Registering your app XML file
1. Go to www.friendster.com/developer and click on the 'Get API Key' link.
2. Enter the app name and URL to your app XML file as shown here.
3. Click on save to validate the app XML file and register your app.
You can view and edit your registered apps by clicking on Manage Apps from the developer site. From there, you can also run your app by clicking on 'Test App'.
Submitting your app
Once your app is fully tested, you can click on 'Submit to app directory' to submit it to the Friendster app directory. The ModulePrefs element in your app XML file should contain the following attributes:
| description | Your app description as it will appear in the app directory. |
| thumbnail | Thumbnail URL. The image displayed in the App Directory and the Add App page. The standard size is 75px * 75px. |
| icon | Icon URL. The image displayed in the My Apps page. The standard size is 16px * 16px. |
| author_email | Email address that Friendster can use to contact you for important updates or issues. |
Sample application
As a first app you may run List Friends from the OpenSocial developer site.
Signed MakeRequest
If your app fetches content remotely through the makeRequest() API call you can sign the request to be able to validate that it is coming from Friendster.
A description of how to validate signed requests is provided here. The file which contains the public certificate for Friendster is available at http://www.fmodules.com/public080813.crt.
Integration points within the Friendster website
The following are the current integration points within the Friendster website:
| App Directory | Apps are placed in the App Directory by categories. Friendster users can explore these widgets/applications and add them to their profile. |
| Add App Page | The Add App page displays the app thumbnail and description as well as Friendster's Terms of Service. It prompts for user confimation after the user selects an app from the App Directory. User can choose to invite all their friends to add the application. |
| User Profile | Every app gets a module in the profile page and can control its content. The chrome of the module includes support for Grabbing apps from someone else's profile to your own etc. |
| App Canvas Page | The App Canvas page opens from the 'edit' button on a app's chrome in the user profile page, or from the app Canvas URL. |
| Tracker | A new event is added to user's network activity when an app is added by the user. |
| Pending App Invitations | "NEW app invitations" appears in user's My Inbox when they receive app invitations from their friends. User can select it to view all their app invitations. |
| Pending App Notifications | "NEW app notifications" appears in user's My Inbox when they receive app notifications from applications they've installed. User can select it to view all their app notifications. |
For more information about the Friendster Developers Platform, email developersupport@friendster.com.
To register your app, click here.
Apps UI
Apps can look more integrated within Friendster by using the styles most commonly used on Friendster (tabs, buttons, notifications, etc).
To do that developers should include the following css file on each page: http://images.friendster.com/css/app_styles.css
e.g.
<link rel="stylesheet" type="text/css" media="screen, print" href="http://images.friendster.com/css/app_styles.css">
Implementation of these styles can be seen on this link:
http://www.friendster.com/developer/styles/app_styles.html
All other UI related issues can be discussed under this group:
http://www.friendster.com/group/tabmain.php?gid=1492501
