Abstract

OpenSocial Dashboard is an application that displays OpenSocial gadgets in the browser like Dashboard in Mac OS X. Using Google Friend Connect in its infrastructure, you can embed the dashboard functionality into your blogs, or call it via bookmarklet whenever you like to check the OpenSocial gadgets in an easiest way.

When booted from bookmarklet, the app recognizes the page URL which booted from, text content in the page, and passes them to gadgets as a context information.

This application is totaly using client-side JavaScript only, no server side programs other than Google Friend Connect service, so it is independent from the runtime environment and extremely portable.

Demonstration

Normal Dashboard Site

http://opensocial-dashboard.googlecode.com/svn/trunk/index.html

Bookmarklet

In following page you can register bookmark and use it as bookmarklet.

http://opensocial-dashboard.googlecode.com/svn/trunk/bookmarklet.html

When called the bookmarklet, dashboard overlays existing page content. If you click the bookmark again, the dashboard is hidden.

As the URL of the page where booted the bookmarklet is passed to the gadgets, any gadgets which accepts URL information shows contents according to the current URL (for example, Hatena bookmark gadget shows comment and tags which posted to the current showing article)

Setup

OpenSocial Dashboard is very easy to setup in your web site. All components are based on HTML + JavaScript, so no restriction for web app server such like server side application program language.

Steps

1. Download latest OpenSocial Dashboard source code archive, or checkout from svn/trunk directory in the source code repository in Google Code. Downloaded files should be saved on the site where the web pages are hosted.

$ svn co http://opensocial-dashboard.googlecode.com/svn/trunk opensocial-dashboard

2. Get site ID from Google Friend Connect, by creating new site from administration screen. The registering URL must include the directory path where the code downloaded in step 1. is located.

Site ID can be found in the section of "Plug-ins & API" in Google Friend Connect, and in the pasting code in JavaScript API. Following is an example of pasting code, and in this case " "11825569243270505502" represents the site ID.

<script type="text/javascript">
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.initOpenSocialApi({
  site: '11825569243270505502',
  onload: function(securityToken) { /* your callback, which is passed a security token */ }
});
</script>

3. Edit "index.html" file which is included in the source code downloaded in step 1., and replace the site ID value to appropriate.

jQuery.container.id = '11825569243270505502'; // replace it when placing in your site. 

4. Access to "embed.html" file from web browser, copy the pasting code and paste it to your web site pages.

Example of pasting code :

<style type="text/css">
.osd-btn-bootstrap {
 background : transparent url(http://opensocial-dashboard.googlecode.com/svn/trunk/images/button/bootstrap.gif) no-repeat scroll 0 0;
 cursor : pointer;
 z-index : 100000;
 top : 100px;
 left : 0px;
 height : 80px;
 width : 15px;
}
</style>
<script type="text/javascript"
        src="http://opensocial-dashboard.googlecode.com/svn/trunk/js/socialdashboard-include.js">
</script>

5. When accessing the web pages, a tab is shown in left edge side of the page. Clicking the tab results to show the dashboard.

Customization

The gadgets shown initially, nums of screens, or background color/images of dashboard can be customized as you like. Currently, please see the detail inside of the source code.