In this guide we show you how anyone can build and embed simple web widgets.
It's free, extremely 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 build is embedded below, and is basically your whole blog in a condensed format, showing the links to your 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 it to a Facebook profile.
The second widget we build is a custom news feed using Google News. This widget adds value to your website by providing your visitors targeted, niche-specific news without leaving your site. This type of widget can also drive traffic to your website, 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 website. We embed this widget in a private website which runs off WordPress.
It's important to 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 also talk briefly about some of the other technologies you can use to build widgets, and we will provide resources for how to embed widgets to platforms not listed above.
Here's one of the widgets we are going to build: And here's the process we go in the vids.
* Go to WidgetBox.com, 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 this is also discussed in the first video. The feed url will often end in something like http://www.yoursite.com/rss.xml . You can grab any feed you want, from a different blog or from a particular 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 to. If you want to embed to your Facebook or Blogger account etc., sign into that account in a seperate screen, click on the relevant icon, and you will be brought through a brief, one-screen installer.
* 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.com 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 a slightly different matter), it's public gallery is about the best place you want your widget to be listed 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.net Simply put, Dapper is kick ass. It can't match Widgetbox for sheer simplicity, but the range of things you can do with just a little bit more effort is stunning. Dapper allows you to 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 really it 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 build extremely useful mashup widgets from the full gamut of Web 2.0 websites.
We did note one mark against Dapper. This is that 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 to work 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 to this space. Google Gadgets Do it. Do it now. Do you want your website widget listed in Google's gallery? Of course you do.
Get started with this video, which will show you how to build some very cool Gadgets. Then go to Google Gadgets to get busy. Sprout.com We like to keep tabs on what the cool kids, early-adopter crowd are using. In the widgets space, turns out it's Sprout.com. 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 make sure to enlighten us below.
HOT OFF THE PRESSES!
Duncan Riley building a very cool Seesmic (video-commenting) widget using Sprout Builder. This looks very, very cool. See here.
Embedding widgets using Various Content Management Systems