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

By John Conroy Jun 23, 2008

4 comments

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.

Building Widgets

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.
If you want to embed to a regular website, select 'Copy' to copy the default embed code which can be embedded to a website. You can grab 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.