JavaScript Sample For The Google Sidewiki Data API

This sample demonstrates displaying a list of Sidewiki entries written for a particular web page using the Google Data JavaScript client library in conjunction with the Google Sidewiki Data API.

Sidewiki feeds used here are public and therefore do not require authentication. At first, Sidewiki entries written for specified web page are retrieved using Google Sidewiki Javascript client library. Sidewiki entries are displayed as list of entry titles.

Each Sidewiki Entry may be retrieved separately to get additional info. Sidewiki entries are retrieved from "entries written by author" feed. This feed is also used to retrieve all entries written for a particular author.

As this sample uses a JavaScript client library, JavaScript support must be enabled in your web browser. If this may be a concern in your application, you may wish to consider one of the other Google Data client libraries.

1Retrieve Sidewiki entries by web page URL:

2Preview Sidewiki Entries

After retrieving entries, click on Sidewiki entry title to show entry details

3Download And Customize

Now that you’ve gotten a taste for how the Sidewiki sample works, play around with it, take it apart, and adapt it to your own needs. Start by obtaining a copy of the sample source: sidewiki.js.

Once you’ve downloaded this file, embed it in your HTML document along with the Google JavaScript API loader:

<script type="text/javascript"
  src="http://www.google.com/jsapi">
</script>
<script type="text/javascript"
  src="sidewiki.js">
</script>

The next step is to load the Google Data client library. Since the JavaScript API loader is now embedded in your document, you can just call the gdata.load() function from within a <script> tag in the <head> of your HTML document:

google.load("gdata", "2.x", { packages : [ "sidewiki" ] });

Provide the Sidewiki library with a unique name to identify your application when communicating with Google’s servers:

setServiceName('Google-SidewikiSample-1-0');

Create a <div> to hold the entry list info and pass its ID to SidewikiService.setEntriesPaneId(). This div will be used to display retrieved list of entries:

setEntriesPaneId('sidewiki_entries_pane');

Create another <div> to hold the entry list info and pass its ID to SidewikiService.setEntryInfoPaneId(). This <div> will be used to display additional info retrieved when user clicks on entry title:

setEntryInfoPaneId('sidewiki_enty_info_pane');

After initialization is finished, you can call displayWebpageEntries(webpage) to display entries written for specified web page, or displayAuthorEntries(authorId) to display entries written by specified author.

displayWebpageEntries('http://www.google.com/');

Your finished HTML document should look like this:

<html>
<head>
...
<script type="text/javascript"
  src="http://www.google.com/jsapi">
</script>

<script type="text/javascript"
  src="sidewiki.js">
</script>

<script>
  google.load("gdata", "2.x", { packages : [ 'sidewiki' ] });
  setServiceName('Google-SidewikiSample-1-0');
  setEntriesPaneId('sidewiki_entries_pane');
  setEntryInfoPaneId('sidewiki_entry_info_pane');
</script>
</head>
<body>
...
<div id="sidewiki_entries_pane"></div>
<div id="sidewiki_entry_info_pane"></div>
...
</body>
</html>

At this point, you should be ready to begin development. Happy coding!

Resources