How to Customize a GrooveShark Widget to Make It Smaller

Entertain your website visitors with free GrooveShark music.

GrooveShark makes creating your own customized song widget as simple as clicking a few buttons and pasting code into an HTML document. GrooveShark, a free music service, allows you to create playlist widgets by selecting your favorite songs and pasting code the site generates into your Web page. After adding a widget to your page, you can make the widget smaller by tweaking a few values in the HTML code.

Instructions

Create Widget

1. Navigate to the GrooveShark website, and click the "Magnifying Glass" icon at the top of the page. A search box appears. Type the name of a song or artist in the search box, and press "Enter" to view a list of songs that match your search term.

2. Hold down your "Ctrl" key, and click songs you wish to add to your widget. As you click a song, the site highlights it. Right-click one of the songs when done. A popup menu containing a list of options appears.

3. Move your cursor over the "Share Song" option to display another menu of options. Click "Widget." A popup window opens and displays the HTML coded needed to create a widget.

4. Click "Copy to Clipboard" to copy that HTML code to the Windows clipboard.

5. Launch Notepad or an HTML editor and open one of your HTML documents. Paste the code you copied into the document's body section.

   .

Resize Widget

1. Review the widget code you pasted. It looks similar to the code shown below:

   <object width="250" height="40"><param name="movie"

   value="http://grooveshark.com/songWidget.swf" />

   <param name="wmode" value="window" /><param name="allowScriptAccess"

   value="always" /><param name="flashvars"

   value="hostname=cowbell.grooveshark.com&songIDs=23006612&style=metal&p=0" />

   <embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash"

   width="250" height="40"

   flashvars="hostname=cowbell.grooveshark.com&songIDs=23006612&style=metal&p=0"

   allowScriptAccess="always" wmode="window" />

   </object>

   This code creates an "object" tag and an "embed" tag. Developers use these tags to embed multimedia items on a Web page. Note that the "object" tag has width and height attributes. The "embed" tag, located below the "object" tag, also has width and value properties. These values are in pixels. In this example, the widget's width is 250 pixels and its height is 40 pixels.

2. Change the width and height values to smaller numbers in both tags. Doing this makes the GrooveShark widget smaller.

3. Save the document and open it using any browser. The widget appears on your Web page. The widget's width and height match the sizes you set in the HTML code. Click the widget's "Play" button if you like to listen to the music.

Tips & Warnings

• Don't make your GrooveShark widget too small. If you set its width to 20, for example, site visitors will not be able to see the widget's controls. Add additional widgets to your Web page creating new ones and pasting their HTML code in other locations within your document's body section.

References

• GrooveShark: Grooveshark Widgets - Now Available Within Grooveshark

Resources

• GrooveShark: Listen to Free Music Online - Internet Radio - Free MP3 Streaming