OpenSocial

 

Getting started

To get started on working with OpenSocial, you will need to follow a couple of simple steps:

  1. Register a Hyves account
  2. Apply for an API-developer status
  3. Enable the Sandbox mode
  4. Start developing and testing the gadget
  5. Adding your gadget to the live environment

Register a Hyves account

Each application is coupled to a Hyves account, so before you can start building an application you will need to register a Hyves account. You can choose between a corporate account or a plain user account. The difference between these two is that a corporate account isn't attached to a profile on Hyves. When you are using an OpenSocial application for a company, you need a Corporate Account (there are no companies allowed on a plain account). Then you can also share this account with colleagues.

Apply for an API-developer status

Before you can start developing, you will need to request API-developer status. Before applying for API-developer, please make sure you are logged in to the right account, so before applying as a corporate member, make sure you are logged in at Hyves with the corporate account. You can request API-developer status:

Enable the Sandbox mode

Hyves offers a Sandbox mode which allows you to test your gadget on the Hyves platform. Within this Sandbox mode you can access real Hyves data of the Owner and Viewer of the gadget. To enable the Sandbox mode, go to http://www.hyves.nl/developer/ and look for the TOGGLE button. Pressing this will enable the Sandbox mode. You´ll notice a Sandbox logo appear in the header indicating that you´re currently in Sandbox mode.

Note: You cannot view live gadgets when logged into the Sandbox mode.

Start developing and testing the gadget

Once in Sandbox mode you can add the URL of your gadget on http://www.hyves.nl/profielbeheer/toevoegen/gapmember/. The URL will be the link to where the gadget is hosted on your web server (e.g. http://www.yourdomain.com/gadget.xml ).

A basic XML structure for your OpenSocial gadget will look something like this:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello world example" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="380">
  <Require feature="opensocial-0.7"/>
  </ModulePrefs>
 
  <Content type="html">
  <![CDATA[
    <p>Hello world</p>
  ]]>
  </Content>
</Module>

The gadget contains a couple of standard elements:

ModulePrefs

The ModulePrefs contains the information about your gadget such as the title which will displayed on the Hyves profile of the Hyver who installed the gadget, but also a small description of your gadget, a screenshot and a thumbnail, which will be used on the item page of your gadget. All this information is mandatory and should be entered before submitting the gadget to Hyves.

Next to this, you can also include some default OpenSocial features to your gadgets with the Require parameter. Examples of the features which you can add to your gadget can be viewed here.

Content

The content section is where the gadget should be placed. You can input HTML and JavaScript code in this section, or include a flash object. Whatever you place here will be displayed as the content of the gadget.

It’s also possible to make a distinction between the different views of the gadget by adding multiple content sections and assigning the right view to the right content sections.

Tips
  • An easy way to test your code is the OpenSocial Development Gadget which you can install here.
  • Another easy way to learn OpenSocial is to look at the code from other gadgets. You can do this by either opening the source code in your browser, or use our special bookmarklet which allows you to retrieve the XML for a specific gadget.
  • We also offer some OpenSocial Snippets on which you can find code-examples which you can easily copy/paste into your own gadget and adjust it to your own wishes.
  • Firefox add-on - Firebug to trace your actions (console.log())
  • Firefox add-on - FBtracer to trace your Adobe Flash actions (trace())

Adding your gadget to the live environment

If this is your first gadget, you can apply for OpenSocial Developer status on the following page: http://www.hyves.nl/developer/. You must have Sandbox mode disabled to do this, and if this is your first gadget, you’ll have to request developer status first. No worries, this will automatically happen when you enter your first gadget.

Note: When you submit your gadget, this does not mean it's automatically added to the Gadget Gallery. Read more on how to submit your gadget to the gadget gallery here.

Before submitting your gadget you should check the following things:

  • Make sure your gadget complies with our Policy and Requirements.
  • Set the background of the gadget container to transparent, as it will look much better when a Hyver has pimped their profile with a specific color or design. You can read how to set your background to transparent here.
  • While still in Sandbox mode, place the gadget on your profile page so we can check it out. Make sure the visibility is set to a state in which we can see it.

We will review your gadget and, if all is well, grant OpenSocial developer status to your account. Now you’re all ready to add the gadget to the live environment!

You can add your new gadget by going to the Hyves developers application page.. You can add your gadget by clicking the link “Add new live OpenSocial app”. Once the gadget is added, it will appear here with a link to the item page. On the item page Hyvers can easily add the gadget to their profile.

Note: All live gadgets are cached daily on Hyves. This means that changes to your live gadget will not be visible immediately. We recommend doing these changes in Sandbox mode since there is (almost) no caching on this platform.