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