• What Is OpenSocial
• A Few Core Concepts
• Capture User Profile Data to Personalize Your Application
• Utilize User Connections to Build Your Social Graph
• Promote and Customize Your Application Using Updates
• The Gadgets API Tool Set
• Summary

What Is OpenSocial

OpenSocial is a set of common APIs for working with data from various social networks. The concept behind OpenSocial is to develop once and distribute broadly, meaning that if the OpenSocial specification is used to build out an application, it can be easily and quickly ported to another platform. This concept is important, because when building a social application, you want to reach the largest audience you can. Portability, along with the vast amount of user data that can be pulled, makes OpenSocial an ideal tool for quick and scalable development of social applications.

Many networks and companies implement the OpenSocial specification, such as the Yahoo! Application Platform, MySpace, Orkut, and a large number of others. The OpenSocial site offers a full list of networks implementing the OpenSocial specification.

A Few Core Concepts

Before diving further into making OpenSocial JavaScript requests, there are a few core concepts of what we will cover in this spec as well as request methods that should be reviewed.

Lightweight JavaScript APIs

With the implementation of OpenSocial 0.9 comes a new set of lightweight JavaScript APIs to help developers by providing simple JSON input/output through simple methods when making data requests to the REST APIs. This new feature significantly reduces the amount of code required to make requests and should reduce ramp-up time for developers. These APIs use a new namespace (osapi) so that the requests will be nicely sandboxed from your older code base.

Batching Requests

One of the important aspects to be aware of when making OpenSocial JavaScript requests is request batching. Instead of having to make multiple requests to capture profile information, connection details or updates, a user can tie all of those data fetches into a single AJAX request instead of three. This brings quite a performance boost to your application, for obvious reasons.

Additionally, batching requests will ensure that all data is obtained from the request prior to the callback being executed. In Listing 1, we set up a request to capture profile details for the owner of the application (labeled as ownerData) and then another request for the friends of the owner (labeled as ownerFriends).

var batch = osapi.newBatch().
    add("ownerData", osapi.people.getOwner({fields: ['name']})).
    add('ownerFriends', osapi.people.get({userId: '@owner', groupId: '@friends'}));

batch.execute(function(result){
    var ownerName = result.ownerData.name.formatted;
});

Listing 1 – Batching Data Requests

We’ll explore these requests in more detail in the following sections.

Capture User Profile Data to Personalize Your Application

Due to the rise of many social networks over the years, one realization about users has become blatantly obvious: the vast majority of people want everyone to know as much about them as they can cram onto their profile. While this is a concern from a privacy and “good sense” perspective, this wealth of knowledge provides the application developer with an extremely large warehouse of data that can be used to personalize applications.

This can be anything, from demographically targeting ads, all the way to gender personalization. With all of this information readily available for use, the benefit here is quite clear.

Let’s look at this from another angle. One thing that many users have become intolerant of is having to build multiple profiles for every application or social network they use. If you’re using an application on a popular social network like Facebook or MySpace, why would you want to have to type out the exact same information in that application that you’ve already spent a painstaking amount of time entering into your profile? The simple fact is you don’t have to — and that’s why capturing and using the profile information of a user to pre-customize their experience is vital.

This task can be accomplished quickly and easily using the getViewer or getOwner methods within OpenSocial (Listing 2).

//opensocial person data request
osapi.people.getViewer({fields: ['name']}).execute(function(result){
    if (!result.error){
        var name = result.name.formatted;
    }
});

Listing 2 – Capturing User Profile Information

To create a request to get details about a person, you need to take a few steps (all chained nicely together though). Breaking down the request into its individual parts, we have three distinct sections.

• osapi.people.getViewer(…) is the method which defines that we want to capture profile information from the viewer. The parameter that we pass into this method is a JSON structure, which defines the fields that we want to return from the profile. In this case, we want to capture the name of the viewer.
• execute(…) will initialize the viewer data request.
• the callback, listed as the parameter in the execute function, will be the callback that is hit when the viewer data request completes and will contain the person object returned (result parameter). From this result we can use standard dot notation to get at the data we requested.

Every network implements its own list of supported OpenSocial.Person fields, depending on what’s included in their profile system. The full list of OpenSocial 0.9 Person fields is described in the wiki.

Utilize User Connections to Build Your Social Graph

The connections a user creates generally builds out a social graph, which can be used to increase your user base and drive up activity. Connections are a two-way reciprocated link between two users, and when present, means that you are usually able to leverage off profile details of a wider range of people. These concepts work equally well in a follower model such as Twitter; you’re looking for a means of using a physical connection (like a friendship or work tie) to your advantage.

Many of us who are present on any of the popular social networks have either participated in (or at least received) annoying status updates from one of the virally popular games such as Mafia Wars, Vampires, or Zombies. Peering into the innards of Mafia Wars, I can see that one of the reasons it has become so virally successful is because of the vast relevant social graph that they’ve built up in their game.

The important word here is relevant — something that many networks struggle with at times. Most users of a social platform add many more people other than friends and family — coworkers, the postman, the cousin of the neighbor you say hi to while getting the paper in the morning — and these connections aren’t really what we can call relevant to the user.

This means that, for the social container itself, the link between non-relevant users has far less value than one where the users know each other or interact with each other on a regular basis. This same concept is true for your application: When you build the links between the people who use your application, they need to have a way to interact with each other on a regular basis to be of any use to you.

Mafia Wars does this by adding your application connections into your “mob,” effectively making them interact with each other in some form whenever they play the game.

Much like our previous person request, we can make a simple get request to capture owner friends (Listing 3).

//get owner friends
osapi.people.get({userId: '@owner', groupId: '@friends', count: 10}).execute(function(result){
    if (!result.error){
        var friends = result.list;
        var html = '';
        for (var i = 0; i < friends.length; i++){
            html += friends[i].name.formatted + '';
        }
    }
});

Listing 3 – Capturing User Connections

Again, this request can be split up into three individual sections:

• osapi.people.get(…) is a standard get method that can be used to capture any people data. In this case, we denote within the JSON passed into this function that we would like to capture information from the “owner” of the application where the groupId is “friends”. These are simple strings defining that we would like to capture the owner’s friends.
• execute(…) will initialize the owner friend data request.
• the callback, listed as the parameter in the execute function, will be the callback that is hit when the owner friend data request completes and contains all friend person objects for the owner (friends parameter). From this result, we can get the number of friends returned using .totalResults or loop through the list of person objects for each friend.

Promote and Customize Your Application Using Updates

A powerful tool for social application developers is the ability to send updates to the stream of a user. The update stream is the central news area for the user and their connections.

Getting Updates

Earlier I mentioned that users will go to great lengths to add in every detail about themselves and their lives into their profiles. What I didn’t mention is that those details might not always be fully accurate, or they may be out of date.

The defining truth in any social network is the update stream of the user. When the user sends messages, who they’re contacting, what they’re doing, and what applications they’re using will all become accessible through this stream. This type of request will follow the same syntax as our previous requests but will use the activities API rather than the person API (Listing 4).

//capture viewer activities
osapi.activities.get({userId: '@viewer', count: 20}).execute(function(result){
    if (!result.error){
        var activities = result.list;
        var html = '';

        for (var i = 0; i < activities.length; i++){
            html += 'Activity Title: ' + activities[i].title +
                    'Activity URL: ' + activities[i].url;
        }
    }
});

Listing 4 – Capturing User Activities

Within this request we are making a call to osapi.activities.get(...), denoting that we wish to return someone’s activity stream. The JSON object provided as the parameter to this request denotes that we want the activities for a userid that matches that of the current application viewer and we would also like to return only 20 activities.

Once this request completes, we can parse through each of the activities and use them however we’d like.

For a full list of activity fields defined within the spec, see Opensocial.Activity.

Setting Updates

One of the best methods that a developer can use to encourage user growth in an application is to promote the application through the user update stream. Sadly, networks are generally overly saturated with applications, and they sometimes place applications in undesirable locations.

The update stream is one of the few prime-time outlets to users that developers still have access to. When a developer taps into this by setting updates that draw in the users attention, they generally see a larger number of users coming to their application. When implementing this in your code, the syntax will look familiar to our previous GET request (Listing 5).

//insert new activity for the current viewer
osapi.activities.create({
    userId: '@viewer',
    activity: {
        title: 'This is my activity',
        url: 'http://www.yahoo.com/'
    }
}).execute();

Listing 5 – Setting User Updates Setup

To accomplish the update insert, we make a request to osapi.activities.create(...). As with our other requests, we will pass in a JSON payload defining what we’d like to insert. In the preceding example, we set the userId to viewer to denote that we would like to insert the update for the current application user. Within the activity definition, we create an object which contains the content of the activity. Here we define the title and URL that the title should link to.

There are numerous additional fields available for developers to use in order to further customize the update.

The Gadgets API Tool Set

The gadgets API specification within OpenSocial contains a number of helpful utilities to make your development life easier. When building out applications in a container that has heavy restrictions on front-end code, these helper functions will be a lifesaver. Even if the restrictions aren’t there, not having to build out this functionality yourself makes development quicker — no need to reinvent the wheel.

AJAX Requests with gadgets.io

One of the helpful utilities under gadgets.io is the makeRequest function for making AJAX requests. When creating social applications, it’s important that the user experience should be as seamless as possible. In this regard, running data requests in the background is an important implementation tactic.

var params = {};
var url = 'http://www.mysite.com/myfile.php';
var callback = callbackFunc;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.
io.ContentType.TEXT;
params[gadgets.io.RequestParameters.METHOD] = gadgets.
io.MethodType.GET;
gadgets.io.makeRequest(url, callback, params);
function callbackFunc(response){
   if (response.text){
      //use data returned from server
   }
}

Listing 6 – Making AJAX Requests

In the makeRequest method, we define our parameter list to be the type and method of data request that we’re making. We set the content type as “TEXT” and the method as “GET”. The makeRequest call takes in three parameters; the URL to be called, the callback function to call once completed, and the optional parameter list defining what the content / method types are. When the callback is instantiated, we can pull our response object from response.text.

The complete gadgets.io spec can be found on OpenSocial gadgets.io.

Localization Support with gadgets.Prefs

Another helpful utility within the gadgets spec provides the ability to pull out user localization information for your application using gadgets.Prefs. When building applications, chances are that your app will be seen throughout numerous countries, with numerous languages. Being aware of these details will allow you to better gear your application towards the needs of the viewer.

Using gadgets.Prefs, we can pull out the country and language of preference for the user. These two values will go a long way towards customizing your application for your user base (Listing 7).

var prefs = new gadgets.Prefs();
var country = prefs.getCountry();
var language = prefs.getLang();

Listing 7 – Capturing User Localization Information

The complete gadgets.Prefs spec can be found on OpenSocial gadgets.Prefs.

Summary

OpenSocial seeks to bridge a large gap, providing common methods for accessing social data on a wide range of networks, allowing developers to build once and distribute broadly. This concept allows a developer to construct an application and deploy it across many supporting networks, providing maximum impact and the most views for a minimal effort.

- Jonathan LeBlanc

- Jonathan LeBlanc

I’m hoping to provide some live demos of YQL and build out some real use cases around using open data to build out applications. We have some great data that the community would be interested in within YQL including government data, geo targeting tables, as well as many others. Below is the presentation I will be delivering at the conference:

Title: SELECT * FROM Internet Using YQL
Link: http://opensourcebridge.org/proposals/379

Excerpt:

Description:

- Jonathan LeBlanc

This new table is available at http://github.com/yql/yql-tables/blob/master/slideshare/slideshare.slideshows.xml for the time being until it becomes available in the community tables in the YQL Console. You can test the new table out in the console by using the USE clause as displayed here. The feed that will be available to a developer using this table will look like the below:

- Jonathan LeBlanc

The Open Source Bridge conference will be going on from June 1-4, 2010 in Portland, Oregon. This conference would be a great opportunity to explore open source development and techniques in the industry. Open Source conferences like this are very important for the promotion of open development products and pushing web standards. If you have an opportunity to make it out to this conference I would definitely suggest heading out their way.

I’ve submitted two proposals to the conference for this year:

• Harnessing the Social Web with OpenSocial 0.9
• SELECT * FROM Internet Using YQL

- Jonathan LeBlanc

When we use YQL the structure of results returned by a Flickr photo search contains all of the pieces that you will need to generate a whole series of author and photo links with Flickr, but it does not go the extra step of returning these links back to you. For instance, if we run a Flickr photo search query within the YQL (e.g. http://developer.yahoo.com/yql/console/?q=select%20*%20from%20flickr.photos.search%20where%20has_geo%3D%22true%22%20and%20text%3D%22san%20francisco%22) the result set that is returned back from YQL from flickr.photos.search looks something like this:

    
true
        
        445
        444
        5275
    
    










    

Now let’s take a look at how to do something with those data pieces.

Generating an image source
Using the farm, server, id and secret parameters from the result set, we can generate an image source that will display the searched image. The structure of the source using these parameters will look like:

<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />

Generating a link back to the photo page on Flickr
Under the terms of service, all photos that you use from Flickr will need to link back to the Flickr photo page of the owner. Using the owner and id parameters from the result set, we can generate a link back to the Flickr page for the searched image. Building upon the image source that we built above, we can wrap the image with a link that sends the user back to the original image page on Flickr:

<a href='http://www.flickr.com/photos/{$owner}/{$id}' target='_blank'>
<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />
</a>

Generating a link back to the photo owner’s profile
It’s always nice to provide a credit for the photo by linking back to the root profile of the photo owner (instead of just the photo page that we saw above). By using the owner variable in the photo return data, we can easily create a link back to the profile of the photo owner and give him/her credit. Building upon our current linked photo example, we can add in one more piece to do this:

<a href='http://www.flickr.com/photos/{$owner}/{$id}' target='_blank'>
<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />
</a>
<a href="http://www.flickr.com/photos/{$owner}" target="_blank">Photo Owner</a>

Now let’s see how to code a script in PHP that will output the photos wrapped in links back to their original sources (as seen in the second example above listed as “Generating a link back to the photo page on Flickr”). What we do in the code below is generate the YQL query URL, capture the results into a variable using simplexml_load_file, then pass the array of photos through to a function to build the HTML for us.

<?php
$yql_url = 'http://query.yahooapis.com/v1/public/yql?';
$query = 'SELECT * FROM flickr.photos.search WHERE has_geo="true" AND text="san francisco"';
$query_url = $yql_url . 'q=' . urlencode($query) . '&format=xml';

$photos = simplexml_load_file($query_url);
$result = build_photos($photos->results->photo);
echo $result;

function build_photos($photos){
    $html = '';
    if (count($photos) > 0){
        foreach ($photos as $photo){
            $html .= "<a href='http://www.flickr.com/photos/{$photo['owner']}/{$photo['id']}' target='_blank'><img src='http://farm4.static.flickr.com/{$photo['server']}/{$photo['id']}_{$photo['secret']}.jpg' width='75' height='75' alt='{$photo['title']}' /></a>";
        }
    } else {
        $html .= 'No Photos Found';
    }
    return $html;
}
?>

These are easy ways of displaying Flickr photos and links based on the results returned from the flickr.photo.search table in YQL. They’re simple examples but worth documenting so that you don’t need to go through the hassle of pieces the URL structures together on your next project.

- Jonathan LeBlanc

While I was out there I gave a few presentations on some of the great technology coming out of Yahoo. On Friday I ran through a talk on “Browser MVC with YQL and YUI,” highlighting the highly extensible nature of YQL to accept design patterns such as MVC and visualization and controller capabilities built into technologies such as YUI. This is a screencast with the presentation as the audio overlay – if you missed the talk then you can catch it below.

The other talk I gave (on Wednesday afternoon) “Foundations of a Social Application Platform”, had to do with some of the core technologies behind social platforms like YAP, MySpace and Facebook. This is a look in from the perspective of a developer and is taken from the years of work we’ve invested in developing applications on many social networks. Below is the screencast from the presentation:

During the conference I had a chance to meet up with Asher Snyder (EVP of Technology) and Philip Ross (VP of Engineering) who work on a very interesting PHP Framework called NOLOH (Not One Line Of HTML). Asher ran me through the foundations and functionality behind the makeup of the framework. I can definitely see the potential of NOLOH for server-side engineers who don’t want to deal with the front-end code and functionality of a site or web application. NOLOH integrates a rich set of widgets to rival many of the JavaScript libraries out there . When I asked about the performance of the framework Asher assured me that includes are added in as they are needed, speeding up initial page load. I unfortunately had to miss his talk because it overlapped one of my own but Asher sent by a screencast. One of the other nice pieces of the framework that I saw were the listeners that allow you to tie in a data request for the transport layer. At the end of the screencast Asher ties in flickr photos into his listener but I was thinking of the potential of integrating that with the dynamic data fetching capabilities of YQL. Take a look at “NOLOH PHP Framework – Unified Server Side Development“, and see for yourself.

Diving into the innards of SQL and the uses of EXPLAIN we had an expert presentation from Sheeri Cabral of Pythian on “Bending Queries to Your Will with EXPLAIN” (A.K.A Optimizing Queries with EXPLAIN). These are some great slides for all you database administrators out there.

I can’t dive into all of the talks that were given but if more information is what you’re looking for then take a look at these links:

• Confoo Flickr Group: http://www.flickr.com/groups/confoo
• Tweets About Confoo: http://search.twitter.com/search?q=confoo
• Slide Downloads for Sessions: http://confoo.ca/en/download

- Jonathan LeBlanc

At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it? Take a look at ishtml5readyyet.com or ishtml5ready.com to get your answer.

If you take a look at ishtml5ready.com in a browser that supports HTML 5 you’ll see that HTML 5 is somewhat ready. That is, some browsers provide some current support for HTML 5. But that shouldn’t stop us from playing around with it right?

HTML5 is a container term used to describe a technology bundle that makes up the new standard. What HTML 5 really encapsulates is HTML 5, CSS 3, and JavaScript all thrown together into the pleasantly marketeering term that is HTML 5. Did you look at those links above in Internet Explorer? Well I’m afraid you’re out of luck for the time being. The A-grade browsers that are currently supporting some of the features of HTML 5 include Safari, Chrome, Firefox and Opera. Still want to use HTML 5 in IE? If you simply put the term “HTML5 elements in IE” (linked directly to Yahoo! Search because I know you all use it right?) into your favorite search engine you’ll get a nice wrapper on how to do this.

Let’s explore a few of the great improvements coming in HTML 5:

Grouping Tags
There are a number of new tags available for all of your tag grouping needs. <hgroup> is used for defining logical groups of tags or sections on your page, <nav> is present to define navigation systems – great for search engines to easily define your site structure. Tags such as <section>, <article> and <aside> can be used for data grouping. Properly using these tags can help you easily define the sections and most important content of your page. This helps search engine crawlers pick up the structure of your website.

Form Elements and Attributes
Forms have received quite a nice overhaul in HTML 5 with new features and methods for defining what data truly is. Let’s take a look at these changes:

• Sliders: Creating a simple slider within a form is as simple as defining <input type=”range” …> – no more JavaScript needed.
• Auto Focus: If you need to autofocus the user directly on a part of your form when they first come to your site (plea: please don’t) then the autofocus parameter of an input field is ready to do the dirty work. Simply use the format <input autofocus …> and you’re ready to go. This standardizes the approach so that websites no longer have to use a level of JavaScript interaction to accomplish the same task.
• Placeholder Text: In an input field, it’s sometimes neccessary to guide your users to input the values you expect, using the value attribute (e.g., add mm/dd/yyyy for them to define a date). This usually involves adding a click event with JavaScript such as this.value = “” to purge the input when the user clicks on it. Then you need some alternate logic to put the placeholder back when the focus is no longer on the input and the user didn’t type anything. This is where the placeholder attribute comes in. Using the form of <input placeholder=”some text” …> the input box will take care of this for you. You have a populated value of “some text.” When the user clicks on the input it disappears, then reappears when the user clicks off of the input and there is no text. Simple yet brilliant. (Currently works in 2 browsers.)
• Calendar Picker: Prior to HTML 5, calendar pickers in forms were non-standard and usually involved some fairly hefty JavaScript components or libraries to build the functionality. In HTML 5, we have a new input type called datetime, used in the form of <input type=”datetime” …>. This generates a standard input form for the user. When a user clicks on it, it pops up a calendar picker widget automatically. Less code is always a win.
• Multiple File Uploader: Extending upon the file type of an input field, a new “multiple” property implementation allows you to specify multiple files for upload and takes the form of <input type=’file’ multiple …>. When selecting multiple files, you should display “N files” in the input box, instead of the single filename. (Currently works only in Safari.)
• Yet More Input Types: There are even more input types that you can logically define. type=”email” and type=”url” are definitions you can explore to define the data that users will input into your forms.

Simply put, forms make sense now. No need to heavily augment a form with layers of visualization and JavaScript just to allow data to be defined as it should be in the first place, or to allow base levels of functionality that everyone uses anyway. If you want to see what your current browser supports, take a look at www.miketaylr.com/code/input-type-attr.html.

Accessibility
HTML 5 has not forgotten about improving web accessibility. ARIA (Accessibly Rich Internet Applications) defines methods for building websites and web applications in a way that make them more accessible to people wth disabilities. One way HTML 5 endeavors to improve ARIA capabilities is through the use of the role=’group’ attribute, which will allow screenreaders to properly define group content. For a more comprehensive look at common ARIA attributes, take a look at dev.w3.org/html5/markup/aria/aria.html or search for “ARIA accessibility” in your favorite search engine.

Web Fonts
From the time I first started developing web applications I knew that font support was a joke and never functioned as it should have (great idea – bad implementation). Well, this fact is no longer true, I am happy to say. Web fonts finally work, allowing you to define your own font faces, even if all browsers have different implementations. For more information, take a look at Paul Irish’s post: Bulletproof @font-face syntax.

Video and Audio

Video is now scriptable, folks. With the new <video> tag, you’ll be able to include a video player, implementing ogv & mp4 formats. You can now use DOM scripting to control video – mute, forward, stop – all through the DOM. The <audio> tag is there as well, to include audio files easily. If you want to see the video tag in action, go to youtube.com/html5 to opt in to HTML 5 standards beta. YouTube will not use the Flash player when video tag support is available in the browser and uses the HTML 5 video player instead. The video tag may be styled in exactly the same way as you would see with the standard Flash video players out there.

Freeform Drawing with Canvas
Have you ever wanted a blank canvas where you could programmatically draw anything within a website or web application? Well there are a number of server-side languages that do this – but have you ever wanted to do this through scripting (with a little bit of embedded JavaScript)? Well that’s where the <canvas> tag comes in. There are many canvas demos available for you to see exactly what can be done with the canvas tag by typing in “HTML5 canvas demos” in your favorite search engine. The code for creating a canvas and working with it is also very simple:

Using JavaScript, you can draw on the canvas:

More Information and Links
We’ve just scratched the surface of HTML 5 and all of the new functionality. There are some great resources available if you want to explore even further:

• Current HTML 5 Draft Standard – http://whatwg.org/html5
• Dive Into HTML 5 by Mark Pilgrim – diveintohtml5.org

A big thanks to Mark Pilgrim for his talk at Confoo. I look forward to seeing the standard expanded and adopted by all the browsers out there.

- Jonathan LeBlanc