Knight Digital Media Center Multimedia Training

Tutorial: Creating a Publication Widget

By Abbie Swanson

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/widgets/

Introduction

Widgets are bits of code that when embedded into a website, blog or personal page on a social network, can display different kinds of content from other websites, such as a feed of news stories. This blog has an "Arts"widget from The New York Times on the right-hand side of the site.

People like to include widgets from newspapers on their blogs or websites so there is new material on the site everyday. It doesn't require any additional effort after you've embedded the widget.

What is a widget?

People install widgets to show everything from weather, traffic and stock reports to event calendars and personalized maps. Many news organizations, like The New York Times, have developed their own widgets to provide feeds of news stories, or other content that can be embedded into other websites or social networks.

How To Build A Widget

There are plenty of sites out there that help you build your own widgets. In this tutorial, we'll teach you how to build one for free using a site called Widgetbox.

Like most widget-building sites, Widgetbox can help you build a widget that can then be installed on Facebook or in a Blogger blog, or a handful of other applications. For a full list, check out this webpage. Before doing this tutorial you'll have to decide what content your want your widget to feature, and where you want to install it. For this tutorial, we'll take content from a blog set up on Blogger and embed it into a Facebook account.

To do that, go to the Widgetbox 'Make a New Widget' page, and click on the fourth tab from the left called 'Blog/Feed.'

Enter your blog address, the site where you want to get content from, and click 'Continue.' You'll get a 'Processing Widget...' window.

Then you should get this screen which allows you to customize your widget. Here, you can choose how you want your widget, or feed, to appear. If you have images in your post, you can choose whether or not you want to include them in your widget by clicking or unclicking the 'include images' button. If you want to pay $3.99, you can also 'Try Pro,' which is a souped up version of Widgetbox that allows you to add tabs to your widget with content from YouTube, Flickr or Twitter.

As you decide what you want your widget to look like, you'll see it changing on the right side of the screen.

Next, choose the look and color scheme you want for your widget.

Next, name your widget so you can access it at Widgetbox later. You can add tags and a description for the widget here. If you like, upload an image of yourself, or the image you want to appear to identify your widget.

If you want to pay that $3.99, you can get 'extras.' Otherwise, you're just about finished with your widget, and ready to install it into an application.

Click 'Save Blidget' in the bottom left-hand corner of the screen. You'll have to read Widgetbox's terms and accept them, too.

You'll have to register for a Widgetbox account. Click 'Sign in,' say 'No, Thanks' to any Blidgetbox Pro screens that might pop up. Your completed widget should show up in the Widgetbox gallery.

How To Install the Widget

The next step is installing the widget you just built.

To install it into a Facebook page, stay in the Widgetbox gallery, and click on the tab marked with an 'f' on the right-hand side of the page.

In the next window that pops up, click 'Add Widget.' 

Widgetbox will direct you to Facebook, where you'll be asked to log in. If you don't have an account yet, you can create a new account on this screen.

After signing in, you'll get this window, which shows two options for installing your widget to Facebook. If you choose 'Send a Message,' you can send selected Facebook friends your new widget. 

 

You can also choose the 'Post to Profile' option, and the widget will show up in your Facebook profile under 'My Links.'

Back at the Widgetbox site, you should get this window indicating the widget has been installed into Facebook.

Congratulations! You've installed your widget successfully. You can now install it anywhere else you'd like using the same process with another application. Or, if you're finished, simply sign-out in the upper right-hand corner of the screen.

About this Tutorial

Abbie Swanson wrote this tutorial with help from Geeta Dayal, Jerry Monti, Paul Grabowicz and Jeremy Rue.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.