Yahoo Desktop Widget Sample

May 26th, 2008

Yahoo Desktop Widget Sample

Here we walk you through creating a simple Yahoo! Desktop Widget that registers itself with nooked as a new client instance that then pulls from a sample nooked feed.

  1. Register a new client

    1. Sign In and click "Add A New Client" from "my clients" menu.
    2. While filling the form, make sure you uncheck "authentication" checkbox.
    3. Take note of the client identifier: on my clients page click the name of your new client, and copy the client identifier from client's details page.

  2. Create a sample feed

    Your widget will take data about products from nooked feeds. Feeds can be connected to some external feed source or they can be created and modified via our Atom Publishing Protocol APIs. For the purpose of this sample, create sample feed by clicking "Create sample Feed" button on "My Feeds" page.

    The new feed will be added to the end of feed's list as "Sample Feed XYZ".

    Each nooked feed is syndicated in 3 formats: RSS, Atom and AtomPub. Copy the url of Atom version of your feed by clicking right mouse button on the feed icon in the Atom column of the My Feeds table and choose "Copy Link Location".

  3. Configure your Yahoo! Widget development environment

  4. Write your Yahoo Widget

    • We've got a starting point Widget (.zip file) that you can download to save you some initial work. This package has the same structure that is described on chapter "Publishing Your Widget, Widget File Structure" in the first link.
    • The Widget main file "nooked.kon" presents the layout of Widget. The most important parts are:
      • onLoad attribute in the root "widget" tag. It calls the function defined in main.js (which is loaded with "script" tag)
      • "preference" tag which declares preference setting named "instanceId"
    • At the top of the main.js script you can find constants that should be set with appropriate data:
      • // Your client ID (represents this widget) var CLIENT_ID = "XXXXXXXXXXXXXXXXX";
      • // Feed atom URL to be pulled from var FEED_URL = "http://api.nooked.com/v1/feeds/XXXXXXXXXXX.atom";
    • In order to track the number of installed widgets (instances) we need to register each instance in the platform:
      • After widget is loaded an init() function is called. There we check if the widget is run first time and so value of instanceId is empty. If so, we need to register the instance of the widget. The widget sends the request to platform API that returns newly created instance ID. We handle the response with onRegisterInstance() and then parse to store in preferences retrieved value (parseInstance()).
      • Next step is to fetch the feed using the same action as that called from init() in case when instanceId is not empty. After that request onFeed() handler is invoked and then we parse the Feed in parseFeed() method.
      • Now we can populate widget's content. For the example we fill the element with Feed title and element with Feed entries and so on.

Note that in this example we used only one Feed, however in your own widget you can fetch as much feeds and perform as many actions on API as you want. The really important thing here, is to enable measuring of client usage by registering the instance.

Posted by joshea Filed in Samples

iGoogle Gadget Sample

May 26th, 2008

iGoogle Gadget Sample

Here we walk you through creating a simple iGoogle Gadget that registers itself with nooked as a new client instance that then pulls from a sample nooked feed.

  1. Register a new client

    1. Sign In and click "Add A New Client" from "my clients" menu.
    2. While filling the form, make sure you uncheck "authentication" checkbox.
    3. Take note of the client identifier: on my clients page click the name of your new client, and copy the client identifier from client's details page.

  2. Create a sample feed

    Your widget will take data about products from nooked feeds. Feeds can be connected to some external feed source or they can be created and modified via our Atom Publishing Protocol APIs. For the purpose of this sample, create sample feed by clicking "Create sample Feed" button on "My Feeds" page.

    The new feed will be added to the end of feed's list as "Sample Feed XYZ".

    Each nooked feed is syndicated in 3 formats: RSS, Atom and AtomPub. Copy the url of Atom version of your feed by clicking right mouse button on the feed icon in the Atom column of the My Feeds table and choose "Copy Link Location".

  3. Configure your iGoogle development environment

    • Go to www.igoogle.com and create iGoogle account, if you do not already have one.
    • If you are already logged into your Google account, go to the Google Gadget development environment documentation and click "add the developer tools tab" link to install some very helpful gadgets.
    • Install the Google Gadgets Editor - click on the link "To add GGE to your iGoogle page, click here:" on this page

  4. Write your iGoogle Gadget

    • Open our example gadget source code
    • Copy and paste the gadget source code into your "Google Gadget Editor" text area.
    • Edit configuration variables by copying your clients's identifer and your sample Atom feed URL as described in code comments.
    • Choose "File => Save As..." in the Gadget Editor menu.

  5. Test your Gadget

    Install your Gadget into an iGoogle page and test that it is pulling from the correct feed and displaying the correct product data.

  6. Track your feed statistics

    Go to "my feeds" page and click on the name of your feed to see it's dashboard. After testing your widget you should be able to see impressions, clicks and actions (if you clicked on items in the gadget and performed simulated transactions on the sample product web page. Don't forget to change the date rante to show statistics for Today!

Posted by joshea Filed in Samples