Socialize Using OpenSocial

In this era of Web 2.0, we are witnessing a lot of activities on the social
networking front. Many social networking sites have sprung up where users share
photos, documents, give comments to movies, and can even throw virtual sheep at
one another through some interactive web applications. All such social
networking sites realize that they need to give more features to their users to
retain them. For this, they have opened up their platforms to developers by
launching their own APIs, which can be used to create web application. Since
there are lots of social networks on the Internet and even more on enterprise
intranets; the developers face the dilemma of customizing their applications
according to each site's APIs. It wasn't just bad for the developer, but equally
bad for the social networking websites. If a developer can't make his
application for a certain social networking website, the users would shift to
another website that can provide such application. Therefore a need was stirred
up for standard APIs to develop social apps that could work across different
social networks.

OpenSocial came as an answer to the developers' dilemma. OpenSocial is a set
of APIs for building social applications on the web. It allows developers to
write an application once that will run anywhere that supports the OpenSocial
APIs. With standard JavaScript and HTML, developers can now create social
applications across multiple websites. Common APIs mean that developers only
have to learn once in order to start building social applications for multiple
websites, and any website will be able to implement OpenSocial and host social
applications. It's good for developers because it has made their work easier and
they can focus more on making their apps better rather than customizing their
apps for different websites. Using OpenSocial, developers can create
applications now for various OpenSocial community members like MySpace,
Salesforce.com, LinkedIn, Orkut etc.

The benefit of adopting OpenSocial to websites is that now they can engage a
much larger pool of third party developers than they could have engaged for
their own APIs. Also now even for enterprise's own social networks on intranets,
an enterprise can devote their resources to strategic projects rather than on
extensive API development and its support.

Getting started

To start off building your first OpenSocial application you need a working
knowledge of JavaScript and since OpenSocial applications are built as gadgets,
you will have to know the structure of the gadget. Any site that can host an
OpenSocial application is called as OpenSocial container. Many such containers
provide a test environment called a sandboxe in which you can safely test your
gadgets. For this article we will be creating one such gadget using iGoogle
developer sandbox. So you'll need to have an iGoogle account and sign up to
access the sandbox. To start writing the code for your gadget, you can either
use a text editor, or use the Google Gadget Editor (GGE). The GGE provides an
interface to edit gadget XML files and also preview them. (GGE link is provided
in the Direct Hit box)

The Google Gadget Editor opens in the browser and can edit XML gadget files and also show their preview.

When you open the GGE, you can view the template of the helloworld.xml
gadget, which will look as follows:

The various sections of the above gadget design are:

Module: This indicates that the XML file contains the gadget.

ModulePrefs: This section contains the information about the gadget, and
its author.

Require feature: This denotes which features are required by the gadget,
in this case the OpenSocial API (v0.8).

Content: This section indicates which type of content will be required by
the OpenSocial container where the gadget will be hosted.

CDATA: This section contains the main working part of the gadget,
including all the HTML, CSS, and JavaScript. The contents are treated as the
content of the body tag on a generic HTML page.

Telephone Keeper App

We will be creating a gadget whereby users can make a list of important numbers
that they frequently call, and also share this number list. can be shared
amongst friends network. As users will be providing specific information about
their preferences, we'll be using the UserPref section of the gadget to describe
the input fields that will turn into user interface controls when the gadget
will run. Additionally we will also use the “shareable-prefs” feature to make it
possible for a gadget's user preferences to be viewed and edited by multiple
users. Thus, the gadget can be shared amongst users and they can also view the
editing done by each other. To share a gadget's UserPrefs across multiple users,
we'll have to add “Optional Feature” in the ModulePrefs section.

To populate the telephone number list along with the person's name, we will
be using the list data type in the UserPrefs section. We will define two
UserPrefs for name and the corresponding number respectively. In the CDATA
section, where the main coding of the gadget is done, we'll fetch both the lists
to extract the name and corresponding telephone number.

The following is the complete code for the Telephone Keeper app is as
follows:

When you have saved the gadget file, you can get the URL of the gadget by right-clicking the XML file name on top right corner of the GGE.

title="Telephone Keeper"

scrolling="true">

display_name="Name"

datatype="list" />


display_name="Number"

datatype="list" />

>>>

Save the gadget file as “telephone_keeper.xml” through the GGE and to get the
URL of the file, right-click on the name of the file when it is displayed on the
top right corner of the GGE window and select “Copy Link Location”.

When you paste the copied link URL on the browser window, you'll be able to
view the xml code of the file. Now you can host your application on the
OpenSocial container, which is iGoogle in our case.

On iGoogle's developer sandbox, the gadget Telephone Keeper can be used to save and edit the number list.

Installing the Gadget on iGoogle

Once you have created you gadget and saved it using GGE, you can now install the
gadget on iGoogle. First, log onto iGoogle sandbox through your account, and
from the homepage click on “Add Stuff” link that will take you to a page that
controls installation of gadgets on your account. Next, scroll down and click
the "Add feed or gadget" link.

Here paste the same URL that you had earlier entered on the browser, and then
click Add button. This will install the gadget “Telephone Number” onto your
iGoogle's homepage. When this gadget will be displayed for the first time, it
won't be having any user data, so a message will be displayed stating that the
data can be entered using the Edit Control settings of the gadget.

When you'll click on the down-arrow button on the gadget's title bar, it will
drop down a showing Edit Settings option, click this option to open a new
interface where there will be fields for entering the name and telephone number
that can be added to the list and then the list can be saved. When you save the
list, the list gets displayed in the gadget's view window.

Thus, with OpenSocial we can create social gadgets for websites easily. If
you have your own hosting server you can upload your social web applications
there and share their links with other social networking websites to host such
web apps.

Have questions and comments on this article? Post them on http://forums.pcquest.com