Launchpad In-Page Sharing Examples

Here are several practical examples of using Launchpad in your page to share content across the web. They all use the standard Launchpad include at the top of the page:

<script type="text/javascript" src="http://widgets.clearspring.com/launchpad/include.js"></script>

Default menu, sharing a registered widget using its ID

Here's how to use the standard menu to share a widget registered with the Clearspring platform by specifying just its Widget ID (WID):

$Launchpad.ShowMenu({ wid : "46a4b57a60090fd4" });

Default button, sharing a registered widget using its ID

Here's how to use the standard button version to share a widget registered with the Clearspring platform by specifying just its Widget ID (WID):

$Launchpad.ShowButton({ wid : "46a4b57a60090fd4" });

Default menu, dynamically registering and sharing any content

Here's how to use the standard menu to take any arbitrary content you provide and let users share it. This also dynamically registers the content as a widget in the Clearspring platform so that you can get all our great analytics. Note that you need to specify your Clearspring user ID, and a name for this new widget, when doing this:

<textarea id="myCode" >	
<b>This</b> is the code I want to share!
</textarea>	
<script type="text/javascript">
 $Launchpad.ShowMenu({ userId : "MY_ID", widgetName : "Cool Widget", source : "myCode" });
 </script>

Using CreateMenu instead of ShowMenu

If you want to create the Launchpad menu without displaying it, then display it later:

var x = $Launchpad.CreateMenu({ wid : "46a4b57a60090fd4" }); x.show();

Passing parameters to a registered widget

Use the config argument to pass parameters to a registered widget that uses the Clearspring configuration system:

<script type="text/javascript">
 $Launchpad.ShowMenu({ wid : "widgetId", config : { "myfile" : "foo.mpg" } });
 </script>

Controlling the availability of specific share services in the menu

Use servicesInclude and servicesExclude to determine which services are available. This example allows MySpace, Facebook, and Email sharing:

<script type="text/javascript">
 $Launchpad.ShowMenu({ wid : "46a4b57a60090fd4", servicesInclude : [ 'myspace', 'facebook', 'email' ] });
 </script>

Disabling whole tabs in the menu

Use servicesInclude and servicesExclude as with individual services, but use the service category names rather than specific share service names. This example disables post services altogether:

<script type="text/javascript">
 $Launchpad.ShowMenu({ wid : "46a4b57a60090fd4", servicesExclude : [ 'post' ] });
 </script>

Making individual service buttons

Use servicesInclude and button mode to make a button that enables sharing for just one specific service:

<script type="text/javascript">
 $Launchpad.ShowButton({ wid : "46a4b57a60090fd4", servicesInclude : [ 'myspace' ] });
 </script>

You can also use a custom button to style this however you want.

A custom share menu button

You can attach a menu to any DOM element with actionElement, and it will display when that element is clicked. For a simple text link, you could do it like this:

<a id="myLink" href="#">My custom trigger</a>
<script type="text/javascript">
$Launchpad.CreateMenu({ wid : "46a4b57a60090fd4", actionElement : "myLink" });
</script>

In action: My custom trigger

You can even specify a target DOM element if you'd rather.

Note: You must include the CreateMenu call after you have defined the action element in your page.

Using the `unique` parameter

A custom share-to-service button

Sharing different content to different destinations

Displaying a registered widget and Launchpad on the same page

For registered widgets, as you know, Clearspring can add a Get & Share menu to the bottom of your widget automatically. This allows users to easily get a copy of your widget for themselves. If you'd like to build the seeding page on your site to have both your widget and the Launchpad sharing menu, you might want to make sure that the Get & Share dock doesn't display. If it did, you would be giving users two ways to grab the widget, and it may be confusing.

You can use the Share It -> Get the code tool in the Widget Console to get the code you need to embed your widget on your site, properly configured. If you want to disable the Get & Share menu on an instance of your widget manually, you can pass a special -DBL parameter to your widget and set its value to 0. This is all done by overriding the widget URL, using the standard override scheme.

Doing this will prevent the dock from showing up on your widget when its on your seeding page, displayed from this URL, but it will still display once the widget is shared out to other locations.

Wherever the Clearspring widget URL appears in the generated code for your widget, just modify it to pass the -DBL value in the standard way, like this:

http://widgets.clearspring.com/o/WID/PID/-/-/-DBL/0/

http://widgets.clearspring.com/o/WID/PID/-/-/-DBL/0/widget.js

You may need to make this change in two locations, depending on whether you are using HTML embed code or Javascript code. In either case, the URL will appear the same.

For more information on overriding configuration parameters, see the documentation on Overriding Parameters and on Widget URL Format. This special parameter is not discussed there, but is passed using the same general scheme.

A custom-sized menu

You can make the Launchpad menu display in a variety of sizes. Here's a simple example of making it long and narrow:

<script type="text/javascript">
 $Launchpad.ShowMenu({ wid : "46a4b57a60090fd4", menuWidth : 150, menuHeight : 400 });
 </script>

Popping up the menu in a lightbox

A custom-styled menu

The customCSS parameter specifies a stylesheet that can be used to completely customize the menu in a standards-compliant way. Just add any simple style changes you'd like into a new stylesheet, set the CSS parameter, and your styles will combine with the default style. To change the color scheme, you could use code like this to point to your own stylesheet:

<script type="text/javascript">
$Launchpad.ShowMenu(
   { wid : "46a4b57a60090fd4", 
     customCSS : "http://www.example.com/mywidgets/themes/bgcolor.css" });
</script>

Within the stylesheet, you would just add the background color styling like this:

/* Main Background */
#launchpad {
   background: #ccc;
   border: 1px solid #333;
   color: #fff;
}

A commented example stylesheet is available here, if you want to copy it to your server for your own use. The resulting styled menu looks like this:

The easiest way to get familiar with the CSS classes you can modify is to just look at each of the example stylesheets:

The Blue theme

The Black theme

The White theme

clearspring - the widget network.

Platform