Netvibes Developers blog

Those of you have chosen to make the switch to Ginger (yay!) instead of staying with the older Coriander version (boo!) are surely now familiar with the Activities tabs, and its sections: My private activity, My public activity, and Friends activity.

The first one lets you keep track of the widgets and feeds you have added/removed recently ; the second one gives you the latest links you starred (using the starring functionality of the FeedReader, for instance) ; the third and last one merges all your contacts’ public activities, which means that you can get all the links they recently starred.

Above: Public activity

Above: Friends activity

This public/private starring functionality gives you a social-bookmarking tool to play with, for your private links or to share with your friends and contacts.

Now you might be telling yourself, “it’s all fine and dandy, but it would be even better to be able to star items from my own widget.” And right you are.

So, without any further ado, here’s the method to implement, in order to get a URL from your widget, into the user’s public timeline – and henceforth, into other users’ “friends activity” timeline:

widget.addStar(
  {
  'title':'The title for the starred link',
  'url':'http://www.example.org/',
  'comment':'pre-fill the comment here'
  });

Once this method is triggered, it pops up a window within Netvibes, which lets you specify where you want that link saved (private or public timeline), and add a comment (personal reminder or quick summary for your followers, depending of the context):

Once validated, a confirmation windows pops in and fades out, and your link is available in the chosen timeline:

The new addStar() method is only available starting with the Ginger release of Netvibes, and cannot work from another UWA-supported platform ; so when writing your code, you should pay attention to check if it is indeed available, and work around it if not. For instance, see how the starring-specific Star It! widget is doing it:

if (typeof widget.environment.netvibes == "undefined"
  || typeof widget.addStar == "undefined" ) {
  alert('This widget can only be used with Netvibes Ginger');
} else {
  widget.addStar({'title':Star.title, 'url':Star.url});
}

If you know how to make use of JavaScript events, this starring functionality can be made to look a lot nicer than a plain HTML form. See for instance the FFFFOUND widget, from which you can star a picture by clicking on the little yellow star that appears when the mouse rolls over a picture. Read its source code. The interesting part is this one:

if (!widget.readOnly) {
  if (typeof widget.environment.netvibes == "undefined"
    || typeof widget.addStar == "undefined" ) {
    //cannot star
  } else {
    var span = widget.createElement('span');
    span.className = 'star';
    span.innerHTML = _("Star");
    span.onclick = function(e) {
      var a = this.parentNode.firstChild;
      e.stopPropagation();
      widget.addStar({'title':a.innerHTML, 'url':a.href});
      return false;
    };
    li.appendChild(span);
  }
}

Try it out! It’s really not hard to implement it, and most widget could use it in inventive ways!

Tags: ginger, star, starring, uwa, widget.addStar

This entry was posted on Tuesday, April 8th, 2008 at 11:41 am and is filed under Articles, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.