How To: A Beginner’s Guide to Building Web Widgets


Marketing VOX

Marketers are expected to spend about $40 million on web widgets this year. This guide will teach you how to build and embed simple web widgets at no cost (besides an investment of time).

It’s free, easy and takes about five minutes to roll out your first creation.

One of the best things about widgets is that you can enable sharing. Sharing widgets means more mashing of your ideas and content. More mashing means more community and more buzz around your brainchildren. For those who love to play and live in the WWW sandbox, this article is for you.

Getting Started with Web Widgets

The first widget we will build is embedded below. It is basically your blog or website in a condensed format, showing the links to the latest 20 articles in a custom, branded, linked and optimized format. In the first short video we show you how to build this widget, which we then embed to a Facebook profile.

The second widget we build is a custom news feed using Google News. This widget adds value by providing visitors with targeted, niche-specific news without leaving your site. This widget can also drive traffic to your destination, because you can brand it with your own logo and link, and add it to a public gallery where others can access and embed it to their own sites. We embed this widget in a private website which runs off WordPress.

Keep in mind that you can choose to make your widgets publicly available to anyone who wants them, or to keep them private for your own use.

Finally, in this guide we will briefly cover other technologies you can use to build widgets, and we will resources for how to embed widgets to platforms not listed above.

Here’s one of the widgets we are going to build:

Get the <a href=”″>Content Management (CMS) News, Reviews, Resources</a> widget and many other <a href=””>great free widgets</a> at <a href=””>Widgetbox</a&gt;!And here’s the process we cover in the vids.

Building Widgets

* Go to, create an account and sign in.
* Click on “Create Widget,” top-right of the screen.
* Choose “Create from Blog/Feed.”
* Get the path to your RSS or ATOM feed, if you have one. Right-click on the RSS icon on your page, the XML icon, or the “Subscribe” link, and choose “Copy Target Location.” More on finding the path to your RSS or ATOM feed here, and we also discuss this in the first video. The feed url will often end in something like: You can grab any feed you want, from a different blog or a Google News search result, etc. When you’ve done this, hit Continue.
* Change defaults/cosmetics as you see fit. Choose a logo/pic to brand the widget with.
* Hit ‘Publish Blidget’ when we’re happy.

Embedding Your Widget

* At the next screen, click on “Get Widget.”
* Choose where you want to embed it. If you want to embed to your Facebook or Blogger account, sign into that account in a seperate screen, click on the relevant icon, and you will be brought through a brief, one-screen installer.
* If you want to embed to a regular website, select “Copy” to grab the default embed code for the website. You can get this in Flash or Javascript.
* Embedding to a WordPress website: From the Admin Dashboard, select Design, Widgets, Add Text Widget. Click Edit. Paste the embed code you copied earlier. Save and exit. Resources for embedding to other platforms at the bottom of the page.

Part One: Turning your blog or Website into a Widget and Embedding it on your Facebook page

(Apologies for a few spots of audio static)

Part Two: Building a Custom News Widget and Embedding to a Website (WordPress)

Some of the Best Widget Building Websites
Widgetbox is the technology used in these videos, simply because it is the best and easiest for the type of feed-driven widgets we’ve built here.

Simplicity and development speed are the primary attractions of building with Widgetbox, and there is one other compelling reason to go with these guys. As the most popular online widget-maker (apart from Google Gadgets, which is slightly different), its public gallery is the best place to list your widget for maximum exposure.

Although we stuck with building simple widgets in the examples above, you can build high-capability, highly customized widgets using Widgetbox technology.
Dapper can’t match Widgetbox for sheer simplicity, but the range of things you can do with just a bit more effort is stunning. Dapper lets you build a widget which manipulates a field like a search field, effectively building a feed from that field. This is done from a virtual browser. It sounds complicated, but it really isn’t. Have a look at Dapper’s own brief tutorial video to see how this is done.

So what’s so great about that? Remember in the second video above where we got the RSS field from a Google News query? That worked great, but what about the other 99% of sites which don’t enable RSS from a query string, like YouTube for instance? Dapper will build the feed for you, so you can make extremely useful mashup widgets from the full gamut of Web 2.0 websites.

One mark against Dapper: its virtual browser can be a bit of a headache. We had compatibility problems with FireFox, and had to switch to IE to get Dapper working correctly. On the plus side, there’s a fantastic array of import and export capabilities. On the whole, a superb resource.

When we come to building intermediate level widgets in a future article, we’ll be using Dapper. Stay tuned.

Google Gadgets
Do you want your website widget listed in Google’s gallery? Of course you do. Get started with this video, which shows you how to build some very cool Gadgets. Then go to Google Gadgets to get busy.
We like to keep tabs on what the early-adopter crowd is using. In the widgets space, it’s The hip cats like Duncan Riley use Sprout, so it’s got to have something going for it.

Sprout allows you to “build, publish and manage rich media web content including widgets, mini-sites, banners, mashups and more.” We haven’t tried it yet, so if you think this is the front-runner in the widget-building stakes — as many seem to, then enlighten us below.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: