Using the Clearspring In-Widget API: Quick Steps

There seems to be a lot of confusion about how to get Clearspring integrated into your widget using the In-Widget API model (which is the only way to go if you developing a ‘professional widget’). I decided to outline the basic steps involved
Adding a Widget:
First you will need to create a Clearspring widget (this assumes you have already created your Clearspring account).
- Click Add Widget.
- You will be given 3 options: In My Widget, On My Webpage and Using the In-Widget API. Select Using the In-Widget API.
- Enter the informaton for your widget including its name, code type, sharing menu type, colors, sizes and other options.
- For Share menu you want to choose Default Menu or Just Tracking
- Under What Do you Want to Share enter the embed HTML for your widget
- Next, Clearspring will provide you with some sample code for your widget (under Grab your Launchpad advanced code!). The sample code isn’t the most intuitive but its a good start. I will try and share some “actual” code you can use in a future post.
Editing A Widget:
Now you can further customize/edit your widget. The primary tabs you’ll work with are:
- Template Content
This allows you to modify the HTML embed content that is generated when user’s share your widget. This is the same content you entered above in the What Do you Want to Share section. - Library Code
This is were you can get the code (AS3, AS2 or Javascript) for your widget. This should be the same code generate at the end of the Adding a Widget process. - The rest of the tabs can generally be safetly ignored unless you want your widget to appear/live on the Clearspring site.
Modifying for Flash/Action Script Code:
There are 4 steps involved in actually implement Clearspring sharing and tracking within your widget.
- Imports
You need to make sure you have correct imports at the top of your code. Common mistake is to forget this step. - Initialization
You need to initialize the Clearspring Flash API before you can do anything with it. Go head and initialize it in your Flash code. Hopefully you can figure out how to do this using the sample code. - Share Menu
To call the share menu, you’ll need to create a share button, attach a click event to it, and add a click function that looks something like this:
function on_share_click(event:MouseEvent):void
{
kernel.menu.show();
kernel.track.event('ClearSpring Share'); // custom event
}; - Tracking
When ever you need to track something simple use: kernel.track.event(YOUR_EVENT_NAME_HERE);
Easier said than done but hopefully this provides a good start and helps you avoid some of the common mistakes (choosing the wrong model, working in the wrong tabs, missing a key step) that many of the folks we do Clearspring widget consulting run into!
Most Recent Posts
- Google is Indexing Adobe Flash Files (SWFs) - SEO for Flash Widgets? - December 16th, 2009
- Widget News and Trends: Dec 16, 2009 - December 16th, 2009
- Recent Widget Blog Posts - December 15th, 2009
- Matthew West's Facebook Page - Why Every Artist Needs One! - December 14th, 2009
- CareerBuilder "Re-selling" Facebook? Yikes! - December 14th, 2009
Last 5 posts in Clearspring
- Understanding the Widget Space - June 24th, 2009
- Widget Wars: In Pursuit of Worldwide Widget Domination - February 18th, 2009
- Clearspring Widget Examples - February 12th, 2009
- Interesting Widget Market Size Information - February 10th, 2009
- Big Money for Lil Widgets? Widget Platforms Get Funded to the Tune of $50M! recently , $160M+ in Last Year - February 9th, 2009



Do you have a sample file (as2/fla) you could post?
Comment by Brian — March 27, 2009 @ 5:09 am
wow, why is it these and better aren’t available on the clearspring website. i beat my head against the wall for hours trying to figure this out.
are there steps for what to do if you have to load the widget intot a separate swf? when i do this i can not get kernel.menu.show() to show the menu… seems ot be an addressing issue but i cant get it to work.
Comment by berry — May 6, 2009 @ 5:29 pm
Brian – check out this tutorial and source file from Clearspring.
Note, the content in their example has changed from what the Clearspring API generates. Make sure your code csGrabMe.as matches the example in the tutorial “EXACTLY”
http://www.clearspring.com/docs/guides/add-the-sharing-menu-using-launchpad-advanced
Comment by Kam D — July 14, 2009 @ 6:52 pm