On the RouteNote tools page you’ll find a magical little thing we built for the People’s String Foundation, called a widget. This is essentially a self contained little webpage that can be stuck into other web pages by putting in a little bit of html code linking back to the site where you made it.

This widget was made in the Sprout Greenhouse – a drag and drop flash widget creation web application. You want one of your ownsome, you say? Well OK… Below is a list of things you’ll need to collect together on your computer before heading over to http://sproutbuilder.com and clicking the ‘GET STARTED’ button.

  • A google documents account
  • Mp3’s of the best 3 tracks you’ve got up on iTunes
  • Cover art for those 3 tracks
  • Your favourite photos of your band or yourself performing
  • Any good videos of your act – you could upload these to youtube first if you like (use tubemogul!)
  • A band website or myspace page

Got all that? Excellent.

Click the get started button. Now click the start building now button. No, I don’t know why they have two of them either…

Pick the blank slate from the templates that the greenhouse page offers you. Name your project, probably just your band name will do. Put a brief, keyword loaded description of what you’re building in the appropriate box. Try and think of words that will accurately describe your band and the content you’ll be putting in this widget so that search engines can find you.

Set the size of your widget – the PSF one on the RouteNote tools page is 400×400 pixels, which is plenty of room to play with, and will fit on a myspace page without squashing everything else up. That said, play around with the size, and go with what feels right.

Got a blank slate to start on? Begin by making four more blank pages with the ‘New’ link on the toolbar at the bottom. The 5 pages you end up with will be:

1) start page

2) music player page

3) photo slideshow

4) mailing list form

5) video page

Name them as such by clicking the titles under the little page icons at the bottom of the page. Now click the assets tab at the top of the page and import all of your photos, videos, tracks and album art into the project. You’ll do this by either uploading from your computer or providing a url if you’ve already uploaded your photos to youtube or flickr etc.

Once your pictures are in place, put a picture as the background on each page apart from the photo slideshow page.

Select the music player page. From the media section of the component menu on the left, drag in a jukebox. You’ll be prompted to add in music – open up the assets tab at the top and drag in the tracks you uploaded earlier. Once the tracks are in place you can shift the player around the page and change it’s size so that it fits in with your photo background.

Now drop in some text from the tools panel on the left. Put in the word ‘back’, or ‘home’, or whatever you think is appropriate (change the font and colour if you want), and while the text is still selected, open the Links and Tracking section of the Properties panel on the right, and make the text link back to the start page (which you should have called ‘start page’ if you were paying attention.

Now move to the photo slideshow page you made, and from the General section of the components panel on the left, drag in a slideshow. Add your photos to this as you did with the tracks to the jukebox, pulling them in from the assets tab. Add another text link back to the startpage and link it up in the properties panel.

Now for the mailing list. Drag in a google form from the services section of the components panel. It’ll come up with a box of instructions. Read them, then save your widget (this means setting up your account with sprout, but the site leads you through it) and keep the sproutbuilder page open. In a new tab or window go to your google documents account and in the new menu, select a new form. You’ll want at least four questions: add them into the form with the button at the top left.

Your minimum four question fields should be:

1) Name

2) eMail address

3) Postcode

4) Mobile number

The first three should be compulsory, but leave mobile phone as an optional field. Make questions compulsory by ticking the box at the bottom of each question’s section that says ‘Make this a required field’.

You can of course add in more questions to the form, but remember that you’ve got limited space in the little widget you’re building, and people don’t want to fill in their life history when all they need is to be added to your mailing list.

Once you’ve finished your form to your satisfaction, save it. You’ll notice at the bottom of the page there’s a line of text reading something like:

You can view the published form here:

http://spreadsheets.google.com/viewform?key=p4xTeWuspKmFczQpC3EeHVQ

Copy the text of the http:// address onto your clipboard (ctrl + c) and go back to your sprout widget. In the properties panel you’ll notice a new section titled ‘Google Forms’. Paste the http:// address into the ‘Form URL’ field (ctrl + v). The form should update itself with your questions. Resize it and jiggle it about until you’re happy with it. Once this widget is live, you’ll find that anyone filling in the form will cause a new entry to appear in the spreadsheet attached to the google form you created. Find this in your google documents account later on, and cherish it. It will make a mailing list for you, bringing in results from wherever you embed the widget, without you having to do any data entry. Joy! Put in a link back to the home page, link it up in the links and tracking section as before.

Now for the video page. A blank background probably works best for this page. Just drag in a video from the assets panel and size and jiggle it till you’re happy. If you’ve got more than one video, you can make more pages the same as this one, but don’t try and squeeze too many onto one page, they’ll be too small to see. You could just put a text link to your YouTube profile on the page, putting the URL (web address) from the youtube page in the links and tracking panel. Stick in a link back to the homepage of your widget.

Now for the homepage. You should have your four content pages set up, so now you need to put links to them on the title page. Put in some text and make it pretty within the context of your background picture. Size each text box up correctly, so they don’t overlap. You can even put buttons in from the general tab of the components menu if you’re feeling slinky, it’ll just depend on your aesthetic judgement what object you use to link. Probably better to be clear than obscure and super-clever though… Once you’ve got your link objects (the text boxes) set up, select the appropriate link for each in the links and tracking section. You’ll find a little drop down menu with the pages you’ve made listed on it. Make sure you choose the right one.

Now click preview. Check all the links take you to the right places on and off the widget. Check the video plays ok, and the tracks are in the right place. If you run into any problems at this point, hopefully you’re familiar enough with the interface by now to fix them. If all is ok you can publish the widget. Hit the publish button at the top right. Once the publish menu pops up you’ll have a list of website icons on the right. Click the one you want to put the widget on, and follow the instructions. Congratulations! You’ve maked a lovely widget!

You can now dish out the code to anyone who’ll post this online for you. The more copies of it there are out there, the more eyes will see it, and the more people will sign up to your mailing list.

Good luck…