NextBus launched last week for Washington, DC.  The system easily allows bookmarks for favorite routes but it doesn’t make it easy to take those bookmarks with you to your iGoogle home page.  This is how you setup a new iGoogle gadget to show the status of favorite routes.

1. Go to wmata.nextbus.com.
2. Select your route, destination and bus stop and then a blue box at at the bottom of the page shows when the next buses will arrive. This is the piece we want to take with us to our iGoogle page.
   
3. Click “Update page address so that it can be bookmarked.”
4. Using your mouse, Right Click and  choose View Page Source in Firefox or Chrome or View Source in Internet Explorer or Safari. This opens up a new window with the source code of the web page.
5. The address needed is at the bottom of the page in an iframe tag.  The quickest way to find it is to press Ctrl + f to access the search function. Search for iframe.  The iframe looks like this:
   

   <iframe id="mainFrame"
   src="http://wmata.nextbus.com/customStopSelector/fancyNewPredictionLayer.jsp?a=wmata&r=42&d=42_42_0&s=7018&ts=6905&cssFile=http://www.wmata.com/css/nextbus.css&bookmarkableURL=http://www.wmata.com/rider_tools/nextbus/arrivals.cfm#"
   width="80%" height="700" frameborder="0" scrolling="auto">
   </iframe>

6. Copy the web site address from the beginning through to the last part before “&css” because this is the direct link to the NextBus page for this route.   In the example below the part to copy is marked in red text:

   http://wmata.nextbus.com/customStopSelector/fancyNewPredictionLayer.jsp?a=wmata&r=42&d=42_42_0&s=7018&ts=6905&cssFile=http://www.wmata.com/css/nextbus.css&bookmarkableURL=http://www.wmata.com/rider_tools/nextbus/arrivals.cfm#

7. Login to your iGoogle page and click on Add Stuff on the top right part of the page.  Use the gadget named “iFrame” and then add it to your iGoogle page.
8. Return to your iGoogle page, click the drop down menu for the new iFrame Gadget and finally choose Edit Settings.  Use the settings in this example below.  Most of the gadget’s default settings work but a few need to be changed:
   src: Paste the source link from step 6 here.
   Title: Give this gadget a name so it is easy to find on your iGoogle page.
   Height: The default height is unnecessarily tall.  Try a shorter gadget — 225 pixels worked well on my page.When you’re done click on Save.
   
9. If everything worked your iGoogle page will now include a gadget showing your favorite bus route showing when the bus will actually arrive.  Here is a screen shot of my iGoogle page with the new gadget showing NextBus for the 42:
   
10. Here is this same bus route embedded on this web page to give you a live example:

11. And if that isn’t cool enough — try going to your new iGoogle page on your iPhone or Android phone.  There you’ll find your new gadget in all of its mobile glory:
    

Let me know if you have any issues with this or know of an easier way to access your favorite routes quickly.

Thanks to heryandotus for sharing his custom NextBus page since it inspired me to figure out how to do the same thing for those who aren’t web monkeys [via].