Our Template widgets allow you to easily create a customized widget from your own content. With no coding knowledge necessary, you can create a widget in minutes. You customize which fields you’d like to include in your widget and personalize the text. You can also customize the look and feel of the widget by choosing different images, fonts, stylings, and colors.

Examples of Template widgets include:

• Countdown widgets: Create a countdown to any event
• Slideshow widgets: Upload photos and create a slideshow
• Poll widgets: Choose a question and provide different answer choices to create a poll

Blidgets

Blidgets are specialized widgets that display your blog. Blidgets allow you to turn your feed-based content into a personalized widget that you can share with others. Simply enter in your blog or feed-based address (url) and the Blidget template will convert your content into a Blidget. You can further personalize your Blidget by customizing the look and feel with different fonts, stylings, and colors.

Examples of Blidgets include:

• Blog: Turn your blog or feed into a widget
• Twitter: Turn your Twitter updates or favorites into a widget
• Flickr: Turn your Flickr photostream into a widget
• YouTube: Turn your Youtube videos into a widget

Pro vs. Basic Modes

Our Template widgets and Blidgets have two different modes users can choose from—Basic and Pro. The Pro versions of these widgets come with enhanced features that aren’t available with the basic versions including:

• Additional font and styling choices
• Additional text fields
• Multiple tabs of content for Blidgets
• Uploaded headers and background images
• Ability to hide the “Get Widget” button
• No ads

The basic versions of our Template widgets and Blidgets are available to everyone. Pro versions of our Template widgets and Blidgets require a Pro subscription to create. If you are a Pro subscriber, you can choose to create Basic widgets or Pro widgets. Basic widgets will not require you to use any of your account’s Pro credits. Regardless of whether you create Basic or Pro widgets, Pro subscribers should not see any ads on any widgets created.

Developed Widgets

If you are a developer, or familiar with different coding languages and applications, you can develop your own widget from scratch without a template. Create your own widget from HTML, Flash, or JavaScript. You can also import widgets you have previously developed as Google gadgets. Developed widgets do not offer Basic or Pro modes, and can thus be created by anyone regardless of subscription level. However, Pro subscribers have access to these additional features when developing their own widgets:

• Ability to hide the “Get Widget” button
• No ads
• Premium stats including geo-location data
• Priority review on submittals to our gallery

Facebook Fan Page Apps

These widgets allow you to easily create customized apps for your Facebook Fan Pages with no coding knowledge necessary. Many of our Facebook Fan Page apps are similar to Pro template widgets and Blidgets, but the difference is you create these widgets specifically for your Facebook Fan Pages (Template widgets and Blidgets can only be installed to a personal profile on Facebook). Facebook Fan Page Apps are only available to Publisher Pro and Business Pro users.

Examples of Facebook Fan Page Apps include:

• Blog: Instantly put your company’s blog on your Facebook Fan Page
• Twitter: Easily add your Twitter updates to your Facebook Fan Page
• Gallery: Spotlight articles about your company on your Facebook Fan Page
• Poll: Add a poll to your Facebook Fan Page

Widgets in the Widgetbox Gallery

There are over 170,000 widgets in the Widgetbox gallery covering a wide range of topics and interests, including games, celebrity gossip blogs, news headlines, educational quizzes and many many more.

If you are a developer you can add widgets you’ve developed to our Widgetbox gallery to make them available for users to install. Simply submit your widgets for approval, and you’ll generally receive a decision within 2 business days.

If you are a user, you can install any of the widgets in our gallery to a personal website, Facebook, Twitter, Myspace, or almost any other widget-friendly site. Browse by tag, topic, or featured lists to find fun and useful widgets to install.

Widgetbox requires widgets that are registered in our gallery be Ad Compliant. The Ad Compliant program allows Widgetbox to display ads on widgets in circumstances where ads are allowed or should be displayed. Unfortunately, defining what is or isn’t an ad is not black and white. Below you will find the Widgetbox guidelines that that will help determine what is considered an ad and what is not.

The best practice would be to ask the Widgetbox support team for their opinion while you are building you widget, before you submit it to the gallery for items that you are not sure of. Our goal is to have a program that benefits all users of Widgetbox and we are happy to answer any questions you may have and we are also open to any input that you have which might make our program more successful for all.

Guidelines

Widgetbox buckets the Ad Compliant issues into three categories which are defined below:

Attribution

Widgetbox defines attribution as attributing credit to the author of the work. Attributions are not dynamic and do not change. Although the presentation and style may change, the attributed creator should not. Attributions can be the individual or company that is promoting the widget or a third party that created the widget for an individual or company. Attributions that meet the Widgetbox guidelines will be considered Ad Compliant.

Promotion

Widgetbox defines promotion as a general sponsorship of the widget by the widget creator or the individual or company that the widget account is registered to. Promotions are not considered advertisements and are considered Ad Compliant by Widgetbox.

Ad

Widgetbox defines ads as any promotion within the widget designed to increase consumption of products or services that are not produced by the makers of the content in the widget. Basically any third party ad such as Google Ad Sense, Mochi Media ad, or any overlay, pre roll, post roll, .jpeg, .gif, video or other format that is advertising third party products or services.

We may decline to include and display widgets that violate our program guidelines, including:

• Illegal content
• Invasions of personal privacy
• Pornography or obscenity
• Content that interferes with the functioning of the sites the widget is embedded into
• Promotions of hate or incitement of violence
• Violations of copyright
• Widgets that aren’t actually widgets. Meaning, the content of the widget has to be an actual widget that people would put on a site. It can’t be an ad for widgets that live elsewhere. It can’t be a widget plus its installation instructions.
• Any un-altered copy of the “Hello World” example HTML/JS widget provided to you by Widgetbox.

In addition, if the widget seems broken or incomplete or otherwise unusable, we will reject it and ask you to fix the issues.

You can see the full Developer Agreement at http://www.widgetbox.com/info/legal/developer-agreement/.

These policies may be revised from time to time without notice.

Table of Contents

Making and Distributing Your Widget

Here are the key steps in making and distributing a widget.

Types of Widgets

Widgetbox allows you to create a new HTML/JS widget from scratch or make a new widget using your existing content:

Hello World Widget

When you make an HTML/JS widget, you can begin by using our “Hello World” example widget. This widget demonstrates how you can use Widget Settings in your Widget Code to create a user-customizable widget.

Comments built into Hello World’s Widget Settings and Widget Code will help you understand the interaction between these two panels. Here’s how to get started:

1. Access the Make a New Widget start page.
2. Click “HTML / JS”.
3. Accept the default options shown below.

4. Click Continue

Good start! You’ve just made a widget named “My Widget”. It’s not shared in the Widgetbox gallery, so play around with it as much as you like!

Widget Settings

The most successful widgets allow users to customize the content displayed within them. Here are some common examples:

• Text fields that ‘tune’ a news or search widget.
• Drop down menus that adjust colors/fonts/other formatting options.

Widgetbox helps you to graphically create a user-facing configuration form, called Widget Settings, for your widget. When a user changes a Widget Setting, this information is passed to the widget. Widgetbox passes the information to each type of widget differently:

• HTML/JS Widgets: Widgetbox embeds a Widget Setting at spot in your widget code as determined by simple replacement tags, as described in HTML/JS Widgets.

• Flash Widgets: You have the option passing each Widget Setting via the URL, as a FlashVar, or a plugin value as described in Flash Configuration.

• Remote Widgets: Widget Settings are passed as URL query string parameters. For example, if the Widget Settings form contains a setting called “myParam”, it it sent to the remote widget as domain.com/path?myParam=value

Links

The most common problem with widgets is in its links. Widgetbox renders each widget in an iframe and thus its links need to target _new or _blank or _top. One way to automatically do it for all links in the widget is described here.

What makes a good widget

1. Form factor. The most common place to put a widget is in a blog sidebar. The default TypePad sidebar fits a widget that’s a maximum of 170 pixels wide. If you are targeting sidebars, we recommend your widget be able to be squeezed to that. The best is to give people a choice of form factors.
2. Customization. Users love to be given choices in how to display the widget. Give lots of options as far as the size, colors, fonts, placement of logos and content within the widget. If your widget displays a list of items, give the user a choice of how many items to display.

• Introduction
• JavaScript/HTML Widget
• Flash Widget
• Remote Widget
• Preview & Testing

Introduction

If you are going to run your own ads in your widget and distribute it with Widgetbox you must make your widget ad compliant. We have agreements with different sites and users around advertising and we require widgets with ads to follow the same rules. Making your widget ad compliant is simple and will help us keep the Widgetbox experience more consistent.

JavaScript/HTML Widget

If you are making or made a hosted JavaScript/HTML widget, you only need to wrap your ad content between two new Widgetbox code snippets in the editor. The two new snippets are located in the “Insert Widget Setting” dropdown menu.

You place the ad content between the “start ad code” and “end ad code” snippets. The resulting code will look like this:

    ${wbx.startAdSnippet}
    //Your Ad Here
    ${wbx.endAdSnippet}

<param name="wmode" value="transparent" />

Here is a sample JavaScript/HTML widget…

With Ads:

Without Ads:

This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.

Flash Widget

If you are making or made a Flash widget, the widget needs to check for the widget_isAdFriendly flash variable (FlashVar) parameter and only show ads when widget_isAdFriendly is set to “true”.

Here is some sample code…

ActionScript 2:

    var showAds = _root.widget_isAdFriendly;
    if (showAds == "true")
    {
        //load and show an ad
    }
    else
    {
        //don't load and show an ad
    }

ActionScript 3:

    *be sure to import LoaderInfo (import flash.display.LoaderInfo;)

    try
    {
        var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
        var widgetAdFriendly = String(paramObj["widget_isAdFriendly"]);

        if (widgetAdFriendly == "true")
        {
            //load and show an ad
        }
        else
        {
            //don't load and show an ad
        }
    }
    catch (err:Error)
    {
        //Something went wrong getting LoaderInfo
        trace (err);
    }

Here is a sample Flash widget…

With Ads:

Without Ads:

This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.

Remote Widget

If are you making or made a remote widget, the widget needs to check for widget.isAdFriendly on the query string and make sure widget.isAdFriendly is set to “true”. This will be different depending on what server-side scripting language you are using. You can also use JavaScript to parse the URL parameters if the widget is HTML.

Here is some sample code for a Remote HTML Widget using JavaScript

*if you copy this example, be sure to place the javascript after the ad div and before the closing body tag

<html>
<body>
<div id="myWidgetAds" style="display:none;">
<!-- AD GOES BETWEEN THIS -->
This is my ad
<!-- AND THIS -->
</div>

<script type="text/javascript">
function getQueryVar(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");

  for (var i = 0; i < vars.length; i++) {
     var pair = vars[i].split("=");
     if (pair[0] == variable) {
        return pair[1];
     }
  }

  return null;
}

function controlAds(adElementId) {
  if (getQueryVar("widget.isAdFriendly") != "true") {
     var adElement = document.getElementById(adElementId);
     adElement.style.display = "none";
  } else {
     var adElement = document.getElementById(adElementId);
     adElement.style.display = "";
  }
}

controlAds("myWidgetAds");
</script>
</body>
</html>

Here is a sample remote widget…

With Ads:

Without Ads:

This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.

Preview & Testing

As you create and edit your widget you can test your ad compliance there is a toggle underneath the configuration setting in the widget studio editor.

Chances are you’ve already seen widgets, and recognize them, even if you don’t know them by name. Ever seen a quiz or a game on a friend’s Facebook wall? A countdown to an event on a co-worker’s blog? A YouTube playlist on your wife’s MySpace page? Then chances are you’ve seen a widget before.

Widgets are great because they allow you to easily create customized content with no coding knowledge necessary. If you can type text and choose colors or images, you can make a personalized widget in less than five minutes. Seriously. You can also look through the thousands of developed widgets in our gallery to find fun and useful widgets to install. Browse by tag, topic, or featured lists. Read more about the types of widgets in Widgetbox.

Simple to Build, Simple to Manage

We make it easy to manage and track the widgets you’ve created and/or installed. Simply register for an account and you can edit and save widgets you’ve created, instantly see the widgets you’ve installed, and view stats for any widget you’ve developed.

Multiple Sites Across the Web

Widgetbox widgets can be installed almost anywhere on the web. Install widgets on Facebook pages, Twitter, Blogger, iGoogle, or pretty much any other widget-friendly site. Installation is simple and our installation menu provides a list of many popular sites. Simply click on the site where you’d like the widget to appear and with one click it will be installed.

For developers, our wide selection of installation sites means that for any widget you create, you only need to write the code once, and it can be placed anywhere on the web.

But I’m a Brand or a Business. How Can Widgets Help Me?

Whether you’re a blogger who wants more people to visit your blog, a web developer who wants to easily syndicate your content, or a Fortune 500 company looking to raise brand awareness and increase revenues, Widgetbox widgets can help you achieve your objectives.

Widgetbox serves millions of widgets per day and helps widget owners reach tens of millions of people per month. Widgets help you reach new users, drive traffic back to your site, increase search engine optimization, and extend the reach of your content and services on sites all across the web.

Learn about additional business opportunities on Widgetbox ›