Create Your Own Nike Plus Dashboard Widget

by Matt on December 19, 2008

I ordered the Nike+ Kit from Apple the day it was announced. I thought it was one of the coolest things I had seen. Of course, at the time, I was only using an iPod Shuffle, so I had to order an iPod Nano just to use the product. I often wonder whether the kit helped Apple or Nike more, but as I write this, the Nike+ website has logged nearly 100 million miles from runners using the Nike+ iPod kit. That’s impressive.

One of the things that most motivates me to run is participating in a Nike+ challenge. I’ve done these with both friends and relatives, and I desperately do not want to lose. What I love is that you can run a few miles, upload the results into iTunes, and then after a few minutes, pop over to the nikeplus.com website and see the updated challenge leader board. Nearly instant gratification.

Did you know that you can turn this leader board into a Dashboard widget? By doing this, you don’t have to log into the nikeplus.com website to check the latest standings: all you have to do is activate Dashboard. It’s fairly easy to do this and requires only Safari and TextEdit. You do have to paste and slightly modify some HTML code, but it should only take a few minutes. Let’s get started.

Getting the Code from the Nike Plus Website

I am going to make two assumptions up front. First, you should already be using the Nike+ kit and have set up an account. Second, you can’t make the widget unless you have a challenge to work with. Now, you can create your own challenge and then add people later, but you can’t get the HTML code you need unless you’re involved in an active challenge. With that in mind:

Open Safari, navigate to nikeplus.com, and log in.
From your account screen, you need to click on the Challenges tab at the bottom of the screen and then select My Challenges:
Now, from the Challenges screen, you have to pick which challenge you want to look at. You might have one challenge or a dozen. Regardless, click on one of the challenges.
You should be presented with a screen like this:
Over on the right side of the screen, click the Share button, which will open the tab you see in the upper right portion of the screen. From here, click Add To Your Webpage.
After clicking on Add To Your Webpage, you should get this screen:
Now, all you need to do is click Grab The Code. This will automatically copy your code into your clipboard (so this will happen in the background).

Editing the Code in TextEdit

Now, you need to open up TextEdit from the /Applications folder. Then, paste your clipboard into the blank document that opens. You’ll have a bunch of HTML code sitting there that won’t make much sense unless you know how to read it. No matter…
You have to add two HTML tags to both the beginning and the end of the code. Here’s what that will look like:
As you can see, I have made the tags bold and very large. You don’t need to do this at all. I’ve only done it to make it easier to read. So what have I added?
– At the beginning of the code, I added “<html><body>” (without the quotation marks).
– At the end of the code, I added “</body></html>” (without the quotation marks).
These tags must be added exactly as typed, in that order.
After you add this text to the document, you must go up to the Format menu and select Make Plain Text, as this:
Now we can save the file. Choose Save As from the File menu. When the Save dialog box comes up, choose a location that you are willing to keep this file for as long as the challenge lasts. If you move the file, you’ll have to make the widget again.
You can title the file anything you want, but you must add .html at the end of the file (making .html the file extension), like this:

Making the Widget in Safari

Now comes the last step, which occurs in Safari. You need to open this file you have just saved in Safari. You can probably double-click it to open it in Safari. Alternatively, you can drag the file onto the Safari icon or choose Open from the File menu in Safari and select the file. Once you do this, you should get a similar screen:
– Ok, see the #1 circle? You need to click this icon, which is the one with the scissors. This will let you select the object you want to turn into a widget.
– Clicking on your challenge box is #2. When you do so, it will become highlighted.
– Finally, click the Add button (#3), and Dashboard will open with your challenge widget in it. Now, every time you open Dashboard, you can check to see who is winning!

Final Thoughts

As an additional note, if you ever close your widget, you can recreate it by starting from the “Making the Widget in Safari” section, since you already have a file with the code in it.

Did this walkthrough work for you? Is there an easier way to do it? What other widgets do you create in Safari? Let others know in the comments section.

Liked this post? Share it!

Create Your Own Nike Plus Dashboard Widget