Continuer sur Netlog

Il reste secondes

Developer / Documentation / The OpenSocial API

Introduction to openSocial

Netlog fully supports the OpenSocial 0.8 standard, as well as some Netlog-specific extentions to it.

Creating a basic Netlog-integrated app with openSocial is done using the typical web technologies (HTML, JS, Flash, PHP ...), and requests can be done using JS calls or REST calls, depending on the specific situation.

Embedding an external application (e.g. written in flash or PHP) is as easy to embed in your app as in any web site, using for example an iframe, or an embedded flash movie.

The OpenSocial API allows your app to fetch and interact with Netlog's social data: the person currently using the app, profile information, friends, posting activities or notifications, etc...

A central concept for all apps: views

An openSocial app can have different 'views', depending on where to find it (or a manifestation of it) on the site. In the Netlog context, only 2 are really relevant:

  • Canvas view - the 'large' view you will find on any app or brandpage with an app.
  • Profile view - the 'profile component' view, how an app will look when a user installs it on a profile. Having a profile view is optional for an app, but of course it is always nice to allow your users to show off your app to their visitors!

Both views have a fixed width (720 resp. 320 px), but can be as high as you want. The images below show what would be respectively the profile and the canvas view of the same application:

Another central concept for all apps: the spec XML file

Each OpenSocial app starts from a Specification .xml file, which contains some basic info about the app, as well as the actual HTML and JS of the app itself. We call The most basic Hello World spec XML file looks like this:

 <Module>
 <ModulePrefs title="Hello World!">
 <Require feature="opensocial-0.8" />
 </ModulePrefs>
 <Content type="html">
 <![CDATA[
 <!-- HTML and JS content be here, just as if this were the <body> content of a web site -->
 <script type="text/javaScript">alert(\'Hello world!\')</script>
 <h2>Hello world!</h2>
 ]]>
 </Content>
 </Module>
 

Now would be good moment to take your first step in developing the application: copy and paste the above code in a .xml file, upload to an online location somewhere and point to it in the Netlog OpenSocial Sandbox. If successful you should get both an alert box and a header saying 'Hello world!'.

Some important remarks

... Knowing these up front may save you a lot of headaches.

  • As you can see above, your app is built up using HTML and JavaScript within the content section of the XML spec.
  • We cache spec XML files on our end. When developing your app within its Netlog page (rather than the sandbox), add /flushXML=1 to your app page URL to disable the caching (or recent code changes won't show).
  • Be aware that many OpenSocial JavaScript functions require that you explicitly require features. To use Netlog-specific extentions in your OpenSocial app, include
    <Require feature="netlog" />
    in the ModulePrefs section of your spec.

    The Credit payments extension is separate, and requires
    <Require feature="payment" />

    To resize your gadget with gadgets.window.adjustHeight(); use:
    <Require feature="dynamic-height" />
  • Porting your existing web site/app to an OpenSocial one can be fairly straightforward.
    For example, use JS to insert an iFrame element in the DOM, with the src pointing to the external location of your app. Then, use REST calls to fetch social data within the app.
  • For integrating flash apps, consider embedding a flash opbject in the XML spec, using flashvars to pass on the OpenSocial-fetched data.

Read more...

OpenSocial was originally conceived by Google (though it's open-source), and they have extensive documentation about it: Careful: some documentation there applies only to OpenSocial 0.9, which we do not support (yet).